/*
 * Ceritera Design Foundation V1.0
 * Source of truth for colour, typography, spacing, shape, depth and motion.
 * Application-specific selectors belong in app.css, not here.
 */

:root,
[data-theme="majalah"] {
  color-scheme: light;

  /* Publication palette: Editorial Cream */
  --bg: #ece5d8;
  --bg-alt: #e4dbc9;
  --panel: #fffdf9;
  --ink: #1c1a16;
  --muted: #756d60;
  --line: #d4c8b3;
  --accent: #d95b35;
  --accent-soft: #f6ddd1;
  --accent2: #e58b65;
  --gold: #b9863f;

  /* Font roles. System fallbacks keep the app usable offline. */
  --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Lora', Georgia, 'Times New Roman', serif;
  --font-reading: 'Lora', Georgia, 'Times New Roman', serif;
  --font-label: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Compatibility aliases used by the existing application. */
  --sans: var(--font-ui);
  --display: var(--font-reading);
  --headline: var(--font-display);
  --mono: var(--font-label);

  /* Type scale */
  --text-2xs: 0.625rem;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-md: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: clamp(1.75rem, 3vw, 2.5rem);
  --text-3xl: clamp(2.25rem, 5vw, 4rem);
  --text-display: clamp(3rem, 9vw, 6.75rem);
  --leading-tight: 0.98;
  --leading-heading: 1.12;
  --leading-ui: 1.45;
  --leading-reading: 1.72;
  --tracking-tight: -0.025em;
  --tracking-label: 0.11em;

  /* 4px spacing grid */
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* Editorial geometry */
  --radius-none: 0;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-pill: 999px;
  --border-hairline: 1px;
  --border-strong: 2px;

  /* Depth: paper layers, not neumorphism */
  --shadow-control: 0 1px 2px rgba(28, 26, 22, 0.10), 0 4px 12px rgba(28, 26, 22, 0.07);
  --shadow-raised: 0 8px 24px rgba(28, 26, 22, 0.11);
  --shadow-cover: 0 18px 42px rgba(28, 26, 22, 0.18);
  --shadow-focus: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent);

  /* Compatibility aliases. */
  --sh-out: var(--shadow-raised);
  --sh-out-sm: var(--shadow-control);
  --sh-in: inset 0 0 0 1px var(--line);
  --sh-in-sm: inset 0 0 0 1px var(--line);

  /* Layout */
  --layout-app: 75rem;
  --layout-content: 65rem;
  --layout-reader: 43.75rem;
  --layout-narrow: 32rem;
  --gutter-mobile: 1rem;
  --gutter-tablet: 2rem;
  --gutter-desktop: 2.75rem;
  --cover-ratio: 3 / 4;

  /* Motion */
  --duration-fast: 120ms;
  --duration-normal: 220ms;
  --duration-page: 360ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-emphasized: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* Semantic layer */
  --surface-app: var(--bg);
  --surface-subtle: var(--bg-alt);
  --surface-paper: var(--panel);
  --text-primary: var(--ink);
  --text-secondary: var(--muted);
  --border-subtle: var(--line);
  --action-primary: var(--accent);
  --action-primary-soft: var(--accent-soft);
  --action-secondary: var(--accent2);

  /* Reader defaults */
  --reader-font-size: 1.15rem;
  --reader-line-height: var(--leading-reading);
  --reader-paragraph-gap: 1.15em;
  --reader-measure: 68ch;
}

[data-theme="majalah"].dark {
  color-scheme: dark;
  --bg: #17140f;
  --bg-alt: #1f1b14;
  --panel: #262119;
  --ink: #f3ede1;
  --muted: #aaa08e;
  --line: #41392d;
  --accent: #ef7147;
  --accent-soft: #34231a;
  --accent2: #f29a72;
  --gold: #d6aa67;
  --shadow-control: 0 1px 2px rgba(0, 0, 0, 0.34), 0 5px 14px rgba(0, 0, 0, 0.24);
  --shadow-raised: 0 10px 28px rgba(0, 0, 0, 0.32);
  --shadow-cover: 0 20px 48px rgba(0, 0, 0, 0.42);
}

[data-theme="koral"] {
  --bg:#ECE6F7; --bg-alt:#F4EEFC; --panel:#FFFBF8; --ink:#473F58; --muted:#9186a5;
  --line:#E4DCF2; --accent:#8B72C9; --accent-soft:#F4EEFC; --accent2:#C3AEE8; --gold:#c7904f;
}
[data-theme="koral"].dark {
  color-scheme:dark; --bg:#262133; --bg-alt:#3C3552; --panel:#322C44; --ink:#EAE4F5; --muted:#AFA3C8;
  --line:#4A4262; --accent:#B79CE8; --accent-soft:#3C3552; --accent2:#C3AEE8; --gold:#e0b380;
}

[data-theme="mint"] {
  --bg:#eefaf4; --bg-alt:#e3f5ed; --panel:#ffffff; --ink:#1f3d33; --muted:#678d7e;
  --line:#d3ece1; --accent:#4fae8c; --accent-soft:#e0f5ec; --accent2:#7cc6ac; --gold:#b58c43;
}
[data-theme="mint"].dark {
  color-scheme:dark; --bg:#122019; --bg-alt:#17281f; --panel:#1c332a; --ink:#e3f5ed; --muted:#8fbfae;
  --line:#2a4438; --accent:#6ec9a6; --accent-soft:#20392e; --accent2:#8fd6bb; --gold:#e0c17d;
}

[data-theme="lavender"] {
  --bg:#f4f0fb; --bg-alt:#ede5f8; --panel:#ffffff; --ink:#33294a; --muted:#8376a0;
  --line:#e0d6f2; --accent:#8968c9; --accent-soft:#ece3fa; --accent2:#b79ce0; --gold:#b88b47;
}
[data-theme="lavender"].dark {
  color-scheme:dark; --bg:#1b1526; --bg-alt:#221a30; --panel:#2b2140; --ink:#ece3fa; --muted:#a898c4;
  --line:#3c2f56; --accent:#a982e6; --accent-soft:#332750; --accent2:#c3aae9; --gold:#deb47c;
}

[data-theme="pic"] {
  --bg:#fdf1f4; --bg-alt:#fbe6ec; --panel:#ffffff; --ink:#452531; --muted:#9f7180;
  --line:#f6d9e2; --accent:#e0648a; --accent-soft:#fce1e9; --accent2:#e894ab; --gold:#bb8948;
}
[data-theme="pic"].dark {
  color-scheme:dark; --bg:#261218; --bg-alt:#30171e; --panel:#3d1f28; --ink:#fce1e9; --muted:#c491a0;
  --line:#4f2c37; --accent:#e88ba3; --accent-soft:#3d232c; --accent2:#eda6ba; --gold:#e0b57e;
}

[data-theme="sage"] {
  --bg:#f2f5ee; --bg-alt:#e9efe1; --panel:#ffffff; --ink:#33402b; --muted:#809173;
  --line:#dde7d1; --accent:#7c9b5c; --accent-soft:#e9f0e0; --accent2:#a0b885; --gold:#a9823f;
}
[data-theme="sage"].dark {
  color-scheme:dark; --bg:#181f14; --bg-alt:#1f2819; --panel:#28331f; --ink:#e9f0e0; --muted:#a3b791;
  --line:#3a4a2e; --accent:#9bbd7a; --accent-soft:#2e3b24; --accent2:#b3cc96; --gold:#d1b271;
}

[data-theme="beri"] {
  --bg:#faf0f5; --bg-alt:#f5e3ed; --panel:#ffffff; --ink:#3f2030; --muted:#976a84;
  --line:#eed3e2; --accent:#a3436f; --accent-soft:#f6e0ec; --accent2:#c2749b; --gold:#b08043;
}
[data-theme="beri"].dark {
  color-scheme:dark; --bg:#221019; --bg-alt:#2c1521; --panel:#391c2b; --ink:#f6e0ec; --muted:#c091a8;
  --line:#4a2739; --accent:#cd6f97; --accent-soft:#3a2130; --accent2:#d68eae; --gold:#dcb578;
}

[data-theme="ros"] {
  --bg:#fdf1ee; --bg-alt:#fbe4de; --panel:#ffffff; --ink:#432720; --muted:#9d7164;
  --line:#f5d7cd; --accent:#c05a3d; --accent-soft:#fbe2da; --accent2:#d68868; --gold:#b1813f;
}
[data-theme="ros"].dark {
  color-scheme:dark; --bg:#241410; --bg-alt:#2e1a14; --panel:#3b2219; --ink:#fbe2da; --muted:#c39385;
  --line:#4c2e22; --accent:#e0866a; --accent-soft:#3c2318; --accent2:#e6a487; --gold:#dcb478;
}

[data-theme="langit"] {
  --bg:#eef5fb; --bg-alt:#e2eff9; --panel:#ffffff; --ink:#20344a; --muted:#67879f;
  --line:#d1e4f3; --accent:#3f83bd; --accent-soft:#e2f0fa; --accent2:#75a8d3; --gold:#ae884c;
}
[data-theme="langit"].dark {
  color-scheme:dark; --bg:#0f1a24; --bg-alt:#15222f; --panel:#1b2c3c; --ink:#e2f0fa; --muted:#8fadc4;
  --line:#293e51; --accent:#6ca6d6; --accent-soft:#1f3244; --accent2:#8fbfe2; --gold:#dcb87c;
}

[data-theme="lemon"] {
  --bg:#fdfaee; --bg-alt:#fbf5df; --panel:#ffffff; --ink:#40391c; --muted:#91835f;
  --line:#f2e7c4; --accent:#b99025; --accent-soft:#f8f0d3; --accent2:#d9bc63; --gold:#a67d16;
}
[data-theme="lemon"].dark {
  color-scheme:dark; --bg:#211d0f; --bg-alt:#2a2513; --panel:#37301a; --ink:#f8f0d3; --muted:#c2b382;
  --line:#4a4021; --accent:#dcbb52; --accent-soft:#3a331b; --accent2:#e3ca77; --gold:#e3c675;
}

[data-theme="laut"] {
  --bg:#edf7f7; --bg-alt:#dff0f0; --panel:#ffffff; --ink:#1e3a3c; --muted:#608f90;
  --line:#cde8e8; --accent:#2c8a8d; --accent-soft:#def0f0; --accent2:#5cabac; --gold:#a47e3c;
}
[data-theme="laut"].dark {
  color-scheme:dark; --bg:#0e1f1f; --bg-alt:#132929; --panel:#193535; --ink:#def0f0; --muted:#8bb8b8;
  --line:#264848; --accent:#4fb0b2; --accent-soft:#1c3838; --accent2:#75c3c4; --gold:#d8b478;
}

[data-theme="pasir"] {
  --bg:#faf6ee; --bg-alt:#f5eede; --panel:#ffffff; --ink:#443626; --muted:#967b60;
  --line:#ecdfc7; --accent:#a97839; --accent-soft:#f5e9d3; --accent2:#cba871; --gold:#94682e;
}
[data-theme="pasir"].dark {
  color-scheme:dark; --bg:#211a10; --bg-alt:#2a2115; --panel:#372c1c; --ink:#f5e9d3; --muted:#c2ac8a;
  --line:#4a3b25; --accent:#d1a565; --accent-soft:#3a2f1c; --accent2:#dcbb84; --gold:#e0bd78;
}

/* Shared depth values for every dark palette. */
[data-theme].dark {
  --shadow-control: 0 1px 2px rgba(0, 0, 0, 0.34), 0 5px 14px rgba(0, 0, 0, 0.24);
  --shadow-raised: 0 10px 28px rgba(0, 0, 0, 0.32);
  --shadow-cover: 0 20px 48px rgba(0, 0, 0, 0.42);
}