/* ============================================================================
   VÆLARUM — Design Tokens
   Single source of truth for colors, typography, spacing, motion.
   Tokens mirror the master template (VAEL_TPL_ADM-0001) where applicable.
   ============================================================================ */

:root {
  /* Tells browsers (form controls, scrollbars) that we support both schemes */
  color-scheme: light dark;

  /* ---------- Brand Colors (unchanged across themes) ---------- */
  --brand:           #303940;
  --brand-dark:      #2a323a;
  --brand-mid:       #3a4452;
  --brand-light:     #5a6068;
  --brand-x-dark:    #15191f;

  /* ---------- Default theme = DARK ---------- */
  /* Text */
  --text-1:          #f0f2f5;
  --text-2:          #c5c8cf;
  --text-3:          #9aa0a8;
  --text-disabled:   #6a7078;
  --text-inverse:    #303940;

  /* Surfaces */
  --surface-0:       #303940;   /* brand — page background */
  --surface-1:       #3a4452;   /* cards / elevated */
  --surface-2:       #4a5560;   /* hover */
  --surface-3:       #5a6068;   /* active / inset */

  /* Borders */
  --border-1:        rgba(240, 242, 245, 0.12);
  --border-2:        rgba(240, 242, 245, 0.24);

  /* Header glass — dark default */
  --header-bg:       rgba(15, 19, 24, 0.78);

  /* ---------- Status Colors ---------- */
  --status-draft:    #3a5065;
  --status-progress: #1a486a;
  --status-review:   #8a7a2e;
  --status-final:    #4b7051;
  --status-flag:     #7a3748;

  /* ---------- Accent (sparingly) ---------- */
  --accent:          #4b7051;  /* nachhaltigkeits-bezogen, status-final tone */

  /* ---------- Typography ---------- */
  --font-mono:       'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --font-sans:       'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-serif:      'IBM Plex Serif', Georgia, serif;
  /* Display face — Trajan-inspired Roman serif. Used for the VÆLARUM
     wordmark to match the original logo lettering. Cinzel is open-source
     (SIL OFL), loaded from Google Fonts. */
  --font-display:    'Cinzel', 'Cormorant SC', 'Trajan Pro', Georgia, serif;

  /* Type scale — modular, base 16px, ratio ~1.22 */
  --fs-50:           0.75rem;     /* 12px — captions, labels */
  --fs-75:           0.875rem;    /* 14px — small */
  --fs-100:          1rem;        /* 16px — body */
  --fs-125:          1.125rem;    /* 18px — body-large */
  --fs-150:          1.375rem;    /* 22px — h5 */
  --fs-200:          1.75rem;     /* 28px — h4 */
  --fs-300:          2.25rem;     /* 36px — h3 */
  --fs-400:          3rem;        /* 48px — h2 */
  --fs-500:          4rem;        /* 64px — h1 hero */
  --fs-600:          5rem;        /* 80px — display */

  --lh-tight:        1.15;
  --lh-snug:         1.3;
  --lh-base:         1.55;
  --lh-relaxed:      1.7;

  --tracking-tight:  -0.015em;
  --tracking-base:   0;
  --tracking-wide:   0.04em;
  --tracking-wider:  0.12em;
  --tracking-widest: 0.18em;

  --fw-regular:      400;
  --fw-medium:       500;
  --fw-semibold:     600;
  --fw-bold:         700;

  /* ---------- Spacing Scale ---------- */
  --space-1:         0.25rem;     /* 4px  */
  --space-2:         0.5rem;      /* 8px  */
  --space-3:         0.75rem;     /* 12px */
  --space-4:         1rem;        /* 16px */
  --space-5:         1.5rem;      /* 24px */
  --space-6:         2rem;        /* 32px */
  --space-7:         3rem;        /* 48px */
  --space-8:         4rem;        /* 64px */
  --space-9:         6rem;        /* 96px */
  --space-10:        8rem;        /* 128px */

  /* ---------- Layout ---------- */
  --container-max:   1280px;
  --container-narrow:880px;
  --container-prose: 720px;

  --header-h:        4rem;        /* 64px */

  /* ---------- Radii ---------- */
  --r-xs:            2px;
  --r-sm:            4px;
  --r-md:            6px;
  --r-lg:            12px;
  --r-pill:          999px;

  /* ---------- Shadows ---------- */
  --shadow-1:        0 1px 2px rgba(21, 25, 31, 0.04), 0 1px 1px rgba(21, 25, 31, 0.03);
  --shadow-2:        0 4px 12px rgba(21, 25, 31, 0.06), 0 1px 3px rgba(21, 25, 31, 0.04);
  --shadow-3:        0 12px 32px rgba(21, 25, 31, 0.08), 0 4px 12px rgba(21, 25, 31, 0.05);

  /* ---------- Motion ---------- */
  --ease-out:        cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:     cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:        120ms;
  --dur-base:        220ms;
  --dur-slow:        420ms;

  /* ---------- Z-Index ---------- */
  --z-base:          1;
  --z-header:        10;
  --z-overlay:       50;
  --z-modal:         100;

  /* ---------- Focus ring ---------- */
  --focus-ring:      0 0 0 2px var(--surface-0), 0 0 0 4px var(--brand);

  /* ---------- Water-shader palette (read by water.js as uniforms) ---------- */
  /* Format: comma-separated RGB 0..1 floats. Dark-theme defaults. */
  --water-deep:    0.025, 0.035, 0.050;
  --water-mid:     0.082, 0.110, 0.140;
  --water-light:   0.220, 0.420, 0.560;
  --water-high:    0.55,  0.70,  0.82;
  --water-diff:    0.30;   /* diffuse multiplier */
  --water-spec:    0.55;   /* specular multiplier */
  --water-vignette: 1.35;
}

/* ===== Light theme =====
   Two activation paths:
   - OS preference (prefers-color-scheme: light) when no manual override
   - Explicit [data-theme="light"] from the JS toggle
*/
:root[data-theme="light"] {
  --text-1:          #2a323a;
  --text-2:          #4a5560;
  --text-3:          #6a7078;
  --text-disabled:   #b1b6bd;
  --text-inverse:    #f0f2f5;

  --surface-0:       #ffffff;   /* page background */
  --surface-1:       #f4f6f9;   /* cards / elevated */
  --surface-2:       #e7ebf0;   /* hover */
  --surface-3:       #d6dbe2;   /* active / inset */

  --border-1:        rgba(48, 57, 64, 0.12);
  --border-2:        rgba(48, 57, 64, 0.24);

  --shadow-1:        0 1px 2px rgba(21, 25, 31, 0.05), 0 1px 1px rgba(21, 25, 31, 0.04);
  --shadow-2:        0 4px 14px rgba(21, 25, 31, 0.08), 0 1px 3px rgba(21, 25, 31, 0.05);
  --shadow-3:        0 14px 36px rgba(21, 25, 31, 0.12), 0 4px 12px rgba(21, 25, 31, 0.06);

  /* Header glass — light */
  --header-bg:       rgba(255, 255, 255, 0.85);

  /* Light mode: brushed-silver / grey water (user explicitly: not bluish) */
  --water-deep:    0.36,  0.38,  0.42;
  --water-mid:     0.80,  0.81,  0.84;
  --water-light:   0.96,  0.96,  0.97;
  --water-high:    1.00,  1.00,  1.00;
  --water-diff:    0.55;
  --water-spec:    0.40;
  --water-vignette: 0.45;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --text-1:          #2a323a;
    --text-2:          #4a5560;
    --text-3:          #6a7078;
    --text-disabled:   #b1b6bd;
    --text-inverse:    #f0f2f5;

    --surface-0:       #ffffff;
    --surface-1:       #f4f6f9;
    --surface-2:       #e7ebf0;
    --surface-3:       #d6dbe2;

    --border-1:        rgba(48, 57, 64, 0.12);
    --border-2:        rgba(48, 57, 64, 0.24);

    --shadow-1:        0 1px 2px rgba(21, 25, 31, 0.05), 0 1px 1px rgba(21, 25, 31, 0.04);
    --shadow-2:        0 4px 14px rgba(21, 25, 31, 0.08), 0 1px 3px rgba(21, 25, 31, 0.05);
    --shadow-3:        0 14px 36px rgba(21, 25, 31, 0.12), 0 4px 12px rgba(21, 25, 31, 0.06);

    --header-bg:       rgba(255, 255, 255, 0.85);

    /* Light mode: brushed-silver / grey water (user explicitly: not bluish) */
    --water-deep:    0.36,  0.38,  0.42;
    --water-mid:     0.80,  0.81,  0.84;
    --water-light:   0.96,  0.96,  0.97;
    --water-high:    1.00,  1.00,  1.00;
    --water-diff:    0.55;
    --water-spec:    0.40;
    --water-vignette: 0.45;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
  }
}