/*
  Design tokens — Section 3 of design spec.
  Light theme is default (no data-theme attribute needed).
  Dark theme activates via [data-theme="dark"] on <html>.
*/

:root {
  /* Light — "Registan Day" */
  --bg-base: #F6F0E2;
  --bg-surface: #FFFDF6;
  --bg-raised: #FBF6EA;
  --primary: #1D4E89;
  --primary-deep: #143A6B;
  --secondary: #2FA4A9;
  --accent-turquoise-light: #6FD3DE;
  --accent-turquoise-deep: #146E77;
  --accent-gold: #C7952C;
  --accent-terracotta: #B65C38;
  --text-main: #26221B;
  --text-muted: #6E6353;
  --border: #E4D9C3;
  --pattern-tint: #1D4E89;
  --pattern-opacity: 0.07;
  --shadow-color: 38, 34, 27;

  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* Radius */
  --radius-card: 14px;
  --radius-btn: 10px;

  /* Container */
  --container-max: 1400px;

  color-scheme: light;
}

:root[data-theme="dark"] {
  /* Dark — "Night Majlis" */
  --bg-base: #0D1A2C;
  --bg-surface: #132540;
  --bg-raised: #18304F;
  --primary: #5B8FD4;
  --primary-deep: #4576B8;
  --secondary: #4FC8C4;
  --accent-turquoise-light: #7FE0EA;
  --accent-turquoise-deep: #2AA6AE;
  --accent-gold: #D9AE5F;
  --accent-terracotta: #C97C56;
  --text-main: #F2EDE1;
  --text-muted: #A99F8C;
  --border: #24406A;
  --pattern-tint: #4FC8C4;
  --pattern-opacity: 0.08;
  --shadow-color: 0, 0, 0;

  color-scheme: dark;
}

/* Respect system preference only before the user has made an explicit choice.
   The theme-toggle feature stamps data-theme on <html> as soon as a choice
   (stored or detected) is resolved, so this media query is effectively a
   first-paint fallback for the brief moment before JS runs. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    --bg-base: #0D1A2C;
    --bg-surface: #132540;
    --bg-raised: #18304F;
    --primary: #5B8FD4;
    --primary-deep: #4576B8;
    --secondary: #4FC8C4;
    --accent-turquoise-light: #7FE0EA;
    --accent-turquoise-deep: #2AA6AE;
    --accent-gold: #D9AE5F;
    --accent-terracotta: #C97C56;
    --text-main: #F2EDE1;
    --text-muted: #A99F8C;
    --border: #24406A;
    --pattern-tint: #4FC8C4;
    --pattern-opacity: 0.08;
    --shadow-color: 0, 0, 0;
    color-scheme: dark;
  }
}