/* ==========================================================================
   Altalus Design System — tokens
   Single source of truth for colour, type, space, shape, motion.
   Brands override ONLY the --brand-* / --accent-* tokens via [data-brand].
   ========================================================================== */

:root {
  /* ---- Typography (system stack: no third-party requests, fast, GDPR-safe) */
  --font-sans: "Inter", "Segoe UI Variable Text", "Segoe UI", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Inter Display", "Inter", "Segoe UI Variable Display", "Segoe UI", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Code", Consolas, monospace;

  /* Fluid type scale (min @360px → max @1280px) */
  --step--1: clamp(0.8rem, 0.78rem + 0.1vw, 0.875rem);
  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --step-1: clamp(1.2rem, 1.1rem + 0.5vw, 1.45rem);
  --step-2: clamp(1.45rem, 1.25rem + 1vw, 2rem);
  --step-3: clamp(1.8rem, 1.4rem + 2vw, 2.9rem);
  --step-4: clamp(2.3rem, 1.6rem + 3.5vw, 4.2rem);
  --step-5: clamp(2.5rem, 1.3rem + 4.4vw, 5rem);       /* display: home hero only */

  /* Tracking + measure (editorial rhythm) */
  --tracking-display: -0.034em;
  --tracking-heading: -0.024em;
  --tracking-label: 0.16em;
  --measure: 64ch;        /* body copy */
  --measure-lead: 52ch;   /* leads, asides */

  --lh-tight: 1.1;
  --lh-snug: 1.3;
  --lh-body: 1.65;

  /* ---- Spacing (4px base) */
  --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: 7rem;

  /* ---- Shape & elevation */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgb(11 27 43 / 0.06), 0 1px 1px rgb(11 27 43 / 0.04);
  --shadow-md: 0 8px 24px -8px rgb(11 27 43 / 0.18), 0 2px 6px rgb(11 27 43 / 0.06);
  --shadow-lg: 0 24px 60px -20px rgb(11 27 43 / 0.35);

  /* ---- Layout */
  --container: 72rem;
  --gutter: clamp(1rem, 4vw, 2rem);
  --header-h: 4.25rem;
  --section-y: clamp(4.5rem, 2.6rem + 6.5vw, 8.5rem);   /* vertical rhythm between sections */

  /* ---- Motion */
  /* Motion (per Emil Kowalski: strong custom curves, UI under ~300ms) */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);        /* enter/exit, default */
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);   /* on-screen movement */
  --ease: var(--ease-out);
  --dur-press: 140ms;   /* button press feedback */
  --dur-fast: 160ms;    /* hover / colour changes */
  --dur: 240ms;         /* cards, menus */
  --dur-reveal: 520ms;  /* marketing scroll reveal only */

  /* ---- Core palette (raw) */
  --ink-950: #07131f;
  --ink-900: #0b1b2b;
  --ink-700: #2a3d50;
  --ink-500: #5a6b7c;
  --ink-300: #a9b6c3;
  --ink-200: #d5dde5;
  --ink-100: #e8edf2;
  --ink-50: #f4f7fa;
  --white: #ffffff;
  --amber-500: #f5a524;
  --amber-600: #d98a0b;
  --success: #1f9d55;
  --danger: #d64545;

  /* ---- Brand: Altalus (default) — logo blue #0070b0, graphite, steel; restrained teal accent */
  --graphite: #282828;
  --steel: #889098;
  --navy-900: #0a2036;
  --brand-700: #00507c;
  --brand-600: #0070b0;
  --brand-500: #1a8ad0;
  --brand-300: #8cc4e8;
  --brand-100: #d8eaf6;
  --brand-50: #eef6fb;
  --accent-500: #17a39b;
  --accent-600: #0f7f79;

  /* ---- Semantic tokens (light) — components use ONLY these */
  color-scheme: light dark;
  --bg: var(--white);
  --bg-alt: var(--ink-50);
  --bg-inverse: var(--navy-900);
  --surface: var(--white);
  --surface-raised: var(--white);
  --fg: var(--ink-900);
  --fg-muted: var(--ink-500);
  --fg-inverse: #eaf2f8;
  --border: var(--ink-100);
  --border-strong: var(--ink-200);
  --brand: var(--brand-600);
  --brand-strong: var(--brand-700);
  --brand-soft: var(--brand-50);
  --brand-contrast: #ffffff;
  --accent: var(--accent-500);
  --focus: var(--brand-500);
}

/* ---- Brand: Ardefsi — field green + water blue */
[data-brand="ardefsi"] {
  --brand-700: #1e6b3a;
  --brand-600: #2a8a4c;
  --brand-500: #3fae66;
  --brand-300: #9ddcb2;
  --brand-100: #dcf3e4;
  --brand-50: #f0faf3;
  --accent-500: #2f80ed;
  --accent-600: #1f66c7;
}

/* ---- Dark mode: semantic tokens only */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: var(--ink-950);
    --bg-alt: #0c1f31;
    --bg-inverse: #020a12;
    --surface: #0e2133;
    --surface-raised: #12293e;
    --fg: #e6eef5;
    --fg-muted: #9fb0c0;
    --border: #1b3349;
    --border-strong: #27445e;
    --brand: var(--brand-500);
    --brand-strong: var(--brand-300);
    --brand-soft: #0c2438;
    --brand-contrast: #04141b;
    --shadow-md: 0 8px 24px -8px rgb(0 0 0 / 0.6), 0 2px 6px rgb(0 0 0 / 0.3);
  }
  [data-brand="ardefsi"]:not([data-theme="light"]) {
    --brand-soft: #0f2a1a;
  }
}

:root[data-theme="dark"] {
  --bg: var(--ink-950);
  --bg-alt: #0c1f31;
  --bg-inverse: #020a12;
  --surface: #0e2133;
  --surface-raised: #12293e;
  --fg: #e6eef5;
  --fg-muted: #9fb0c0;
  --border: #1b3349;
  --border-strong: #27445e;
  --brand: var(--brand-500);
  --brand-strong: var(--brand-300);
  --brand-soft: #0c2438;
  --brand-contrast: #04141b;
}

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