/* ==========================================================================
   Design tokens — mkostarev.com
   Dark is the default identity; light is an opt-in theme that follows
   prefers-color-scheme unless the visitor picks one explicitly.
   ========================================================================== */

:root {
  color-scheme: dark;

  /* Palette */
  --c-indigo: #667eea;
  --c-violet: #764ba2;
  --c-pink: #f093fb;
  --c-blue: #4facfe;
  --c-green: #38ef7d;
  --c-coral: #ff6b6b;
  --c-gold: #ffd166;

  /* Surfaces & text */
  --bg: #000;
  --bg-raised: #0d0d10;
  --surface: rgba(255, 255, 255, 0.04);
  --surface-strong: rgba(255, 255, 255, 0.08);
  --surface-overlay: rgba(12, 12, 16, 0.86);
  --border: rgba(255, 255, 255, 0.12);
  --border-strong: rgba(255, 255, 255, 0.22);
  --text: #f5f5f7;
  --text-muted: #a1a1a6;
  --text-faint: #86868b;
  --text-on-accent: #fff;

  /* Accent (brand gradient) */
  --accent: var(--c-indigo);
  --accent-text: #8c9cf5;
  --accent-soft: rgba(102, 126, 234, 0.16);
  --gradient: linear-gradient(135deg, var(--c-indigo) 0%, var(--c-violet) 100%);
  --gradient-wide: linear-gradient(135deg, var(--c-indigo), var(--c-violet), var(--c-pink));
  --gradient-text: linear-gradient(135deg, #fff 0%, var(--c-indigo) 100%);

  /* Project accent — overridden per page via [data-project] */
  --project-accent: var(--c-indigo);
  --project-accent-text: var(--accent-text);

  /* Typography — system stack, modular scale 1.25 on 17px */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fs-xs: 0.8125rem;   /* 13 */
  --fs-sm: 0.9375rem;   /* 15 */
  --fs-base: 1.0625rem; /* 17 */
  --fs-md: 1.3125rem;   /* 21 */
  --fs-lg: 1.625rem;    /* 26 */
  --fs-xl: 2.0625rem;   /* 33 */
  --fs-2xl: clamp(2.25rem, 1.6rem + 2.6vw, 3rem);
  --fs-display: clamp(2.75rem, 1.4rem + 6vw, 4.5rem);
  --lh-tight: 1.15;
  --lh-snug: 1.35;
  --lh-body: 1.6;
  --measure: 68ch;

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;
  --space-9: 6rem;
  --gutter: clamp(1rem, 4vw, 2rem);
  --content-max: 1100px;

  /* Shape */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* Elevation */
  --shadow-panel: 0 18px 50px rgba(0, 0, 0, 0.55);
  --shadow-glow: 0 24px 70px rgba(102, 126, 234, 0.32);
  --blur: saturate(180%) blur(20px);

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 160ms;
  --dur: 300ms;
  --dur-slow: 700ms;

  /* Layers */
  --z-content: 2;
  --z-map-ui: 800;
  --z-nav: 1000;
  --z-toast: 1500;
  --z-modal: 2000;
  --z-loader: 3000;
}

/* Light theme ----------------------------------------------------------- */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f5f5f7;
  --bg-raised: #fff;
  --surface: rgba(255, 255, 255, 0.72);
  --surface-strong: #fff;
  --surface-overlay: rgba(255, 255, 255, 0.9);
  --border: rgba(0, 0, 0, 0.1);
  --border-strong: rgba(0, 0, 0, 0.2);
  --text: #1d1d1f;
  --text-muted: #515154;
  --text-faint: #6e6e73;
  --accent-text: #4c5fd5;
  --accent-soft: rgba(102, 126, 234, 0.12);
  --gradient-text: linear-gradient(135deg, #1d1d1f 0%, var(--c-indigo) 100%);
  --shadow-panel: 0 16px 44px rgba(0, 0, 0, 0.14);
  --shadow-glow: 0 22px 60px rgba(102, 126, 234, 0.22);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --bg: #f5f5f7;
    --bg-raised: #fff;
    --surface: rgba(255, 255, 255, 0.72);
    --surface-strong: #fff;
    --surface-overlay: rgba(255, 255, 255, 0.9);
    --border: rgba(0, 0, 0, 0.1);
    --border-strong: rgba(0, 0, 0, 0.2);
    --text: #1d1d1f;
    --text-muted: #515154;
    --text-faint: #6e6e73;
    --accent-text: #4c5fd5;
    --accent-soft: rgba(102, 126, 234, 0.12);
    --gradient-text: linear-gradient(135deg, #1d1d1f 0%, var(--c-indigo) 100%);
    --shadow-panel: 0 16px 44px rgba(0, 0, 0, 0.14);
    --shadow-glow: 0 22px 60px rgba(102, 126, 234, 0.22);
  }
}

/* Project accents — one colour per project, AA-checked for text in both themes */
[data-project="severodvinsk"] { --project-accent: var(--c-indigo); --project-accent-text: var(--accent-text); }
[data-project="parks"]        { --project-accent: var(--c-green);  --project-accent-text: #38ef7d; }
[data-project="ambulance"]    { --project-accent: var(--c-coral);  --project-accent-text: #ff8a8a; }
[data-project="informal"]     { --project-accent: var(--c-pink);   --project-accent-text: #f4a8fc; }
[data-project="travel"]       { --project-accent: var(--c-blue);   --project-accent-text: #6cbcff; }
[data-project="fieldwork"]    { --project-accent: var(--c-violet); --project-accent-text: var(--accent-text); }

:root[data-theme="light"] [data-project="parks"],
:root[data-theme="light"][data-project="parks"]         { --project-accent-text: #11823b; }
:root[data-theme="light"] [data-project="ambulance"],
:root[data-theme="light"][data-project="ambulance"]     { --project-accent-text: #c23434; }
:root[data-theme="light"] [data-project="informal"],
:root[data-theme="light"][data-project="informal"]      { --project-accent-text: #a32cab; }
:root[data-theme="light"] [data-project="travel"],
:root[data-theme="light"][data-project="travel"]        { --project-accent-text: #1a6fc0; }

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) [data-project="parks"],
  :root:not([data-theme="dark"])[data-project="parks"]     { --project-accent-text: #11823b; }
  :root:not([data-theme="dark"]) [data-project="ambulance"],
  :root:not([data-theme="dark"])[data-project="ambulance"] { --project-accent-text: #c23434; }
  :root:not([data-theme="dark"]) [data-project="informal"],
  :root:not([data-theme="dark"])[data-project="informal"]  { --project-accent-text: #a32cab; }
  :root:not([data-theme="dark"]) [data-project="travel"],
  :root:not([data-theme="dark"])[data-project="travel"]    { --project-accent-text: #1a6fc0; }
}