/*
 * Heron — Chrome tokens (Layer A)
 * =================================
 * Shared design tokens for Heron-owned UI (CMS shell, login, billing).
 * Colour sets switch with `html[data-color-scheme="light"|"dark"]`
 * (set by /shared/theme-color-scheme.js before first paint).
 *
 * Native apps (SwiftUI / Jetpack Compose): mirror these semantic names
 * (bg, groupedSurface, label, secondaryLabel, accent) so web + iOS/Android
 * stay visually aligned; SF Pro on iOS maps to --aqos-ff-sans (Inter) on web.
 *
 * Tenant-owned surfaces (kiosk, preview) still use theme-injector.js.
 *
 * Versioned: v1.4 (2026-05-01). Linear/Heron retune — warm near-black
 * canvas, indigo accent, hairline borders, gradient surfaces, soft
 * tall shadows. Token NAMES preserved for backward compatibility with
 * existing CMS HTML (~30k lines keyed to --aqos-*); only the VALUES
 * change. New surface-grad / hero-glow / edge-top tokens added for
 * Linear-style atmospheric chrome on top of the existing palette.
 *
 * v1.5 (2026-05-07). Brand split — Slate (the company) gets its own
 * --slate-* token namespace for BRAND assets only (wordmark, marketing,
 * social, email signature, deck). Brand tokens are scheme-INDEPENDENT
 * because the brand is a constant — the wordmark on a business card
 * isn't supposed to flip when the kiosk OS hits dusk. Product UI keeps
 * using the theme-aware --aqos-* tokens unchanged. Coral / indigo /
 * AI-purple have been retired as brand colors (still available as
 * legacy product-UI accents but no longer appear in marketing).
 */

:root {
  /* ── Type (one scale, one family) — scheme-independent ───────────── */
  --aqos-ff-sans:    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --aqos-ff-display: 'Inter Tight', Inter, system-ui, sans-serif;
  /* No monospace anywhere in the product UI (decision 2026-05-09).
     Token is kept so existing var(--aqos-ff-mono) refs resolve, but it
     now points at the sans stack. For aligned numerals (analytics
     tables, IDs, timestamps), add `font-variant-numeric: tabular-nums`
     on the element. Brand deliverables in /public/brand/ are exempt
     and continue to use SF Mono per brand-guidelines.md. */
  --aqos-ff-mono:    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --aqos-fs-xs: 12px;
  --aqos-fs-sm: 14px;
  --aqos-fs-md: 16px;
  --aqos-fs-lg: 20px;
  --aqos-fs-xl: 28px;

  --aqos-lh-tight: 1.2;
  --aqos-lh-body:  1.5;
  --aqos-lh-prose: 1.65;

  /* ── Spacing (8-value scale) ─────────────────────────────────────── */
  --aqos-sp-1: 4px;
  --aqos-sp-2: 8px;
  --aqos-sp-3: 12px;
  --aqos-sp-4: 16px;
  --aqos-sp-5: 24px;
  --aqos-sp-6: 32px;
  --aqos-sp-7: 48px;
  --aqos-sp-8: 64px;

  /* ── Radius (3 values + pill) ────────────────────────────────────── */
  --aqos-r-sm:  8px;
  --aqos-r-md: 14px;
  --aqos-r-lg: 22px;
  --aqos-r-pill: 999px;

  /* ── Motion (4 durations, 2 easings) ─────────────────────────────── */
  --aqos-d-1: 120ms;
  --aqos-d-2: 200ms;
  --aqos-d-3: 280ms;
  --aqos-d-4: 420ms;
  --aqos-ease-out: cubic-bezier(0.22, 0.7, 0.3, 1);
  --aqos-ease-io:  cubic-bezier(0.4, 0, 0.2, 1);

  --brand-logo-mark:     '';
  --brand-logo-wordmark: '';
  --brand-density: comfortable;

  /* ── Slate brand tokens — scheme-INDEPENDENT ───────────────────────
   * Use exclusively for BRAND assets: the wordmark, marketing-site
   * brand surfaces, social images, the email signature, the pitch
   * deck, the favicon. These do NOT flip with light/dark mode — the
   * brand is a constant.
   *
   * Product UI (kiosk, CMS, mobile) continues to use the theme-aware
   * --aqos-* tokens defined below; this is a separate, brand-only
   * layer that sits on top.
   *
   * Strict palette: 7 grays (canvas → bone), nothing else. No coral,
   * no indigo, no purple. Functional state colors (success/warn/
   * danger/info) live in the --aqos-* layer and are explicitly NOT
   * part of the brand — they only appear inside the product UI for
   * state communication.
   */
  --slate-canvas:  #0a0b0e;   /* warm near-black — primary brand surface */
  --slate-surface: #1a1c22;   /* card / panel surface */
  --slate-raised:  #21232a;   /* raised tile / active row */
  --slate-faint:   #54565d;   /* fine UI lines, low-contrast captions */
  --slate-dim:     #7a7d85;   /* secondary text */
  --slate-text:    #d4d6dc;   /* primary text on canvas */
  --slate-bone:    #fafaf7;   /* off-white type for hero / display mark */
}

/* ── Dark (default venue / evening ops) ───────────────────────────── *
 * `:root` keeps legacy pages working before theme-color-scheme.js runs.
 * `html[data-color-scheme="dark"]` wins when explicitly dark.
 *
 * Dark palette retuned to Linear-faithful warm near-black. The token
 * names retain their `navy-*` historical labels for backward compat,
 * but the VALUES are now warm-grey near-blacks (no blue cast). The
 * canvas (#0a0b0e) is darker than slate-950, the surface (#1a1c22)
 * is lifted enough to read as a panel without being grey-on-grey.
 */
:root,
html[data-color-scheme="dark"] {
  color-scheme: dark;

  /* Layered greys — names are historical (navy-*), values are warm
     near-blacks. Keep names so 30k+ existing references stay valid. */
  --aqos-navy-0: #0a0b0e;   /* outermost canvas */
  --aqos-navy-1: #1a1c22;   /* card / panel surface */
  --aqos-navy-2: #21232a;   /* raised tile, active nav row */
  --aqos-ink-0:  #d4d6dc;   /* primary text — never pure white */
  --aqos-ink-1:  #7a7d85;   /* secondary text */
  --aqos-ink-2:  #54565d;   /* tertiary / placeholder */

  /* DEPRECATED AS BRAND COLOR — v1.5. Indigo / coral / AI-purple are
     no longer brand colors. They remain here ONLY because product UI
     references them (~hundreds of CSS rules); marketing, the wordmark,
     email signatures, decks, and social must use --slate-* tokens
     above. New product UI should also avoid these where possible.
     Functional state colors (success/warn/danger) are intentionally
     KEPT — they communicate state inside the product, and being in
     OKLCH means they age well across themes. */
  --aqos-aqua:   oklch(0.66 0.16 270);   /* indigo (kept name for compat) */
  --aqos-coral:  #ff7b5a;
  --aqos-success: oklch(0.78 0.13 160);
  --aqos-warn:   oklch(0.78 0.14 75);
  --aqos-danger: oklch(0.70 0.16 25);
  --aqos-ai-accent: #7e3ff2;

  /* Accent variants — needed for tinted backgrounds, soft borders,
     atmospheric glow. New in v1.4. */
  --aqos-accent-soft:  oklch(0.66 0.16 270 / 0.14);
  --aqos-accent-line:  oklch(0.66 0.16 270 / 0.32);
  --aqos-accent-glow:  oklch(0.66 0.16 270 / 0.18);
  --aqos-accent-ink:   rgba(255, 255, 255, 0.96);

  --aqos-bg:        var(--aqos-navy-0);
  --aqos-surface:   var(--aqos-navy-1);
  --aqos-surface-2: var(--aqos-navy-2);
  --aqos-surface-3: color-mix(in srgb, var(--aqos-navy-2) 52%, var(--aqos-navy-1) 48%);
  --aqos-text:      var(--aqos-ink-0);
  --aqos-text-dim:  var(--aqos-ink-1);
  --aqos-text-faint:var(--aqos-ink-2);

  /* Hairlines — uniform-thickness, alpha-on-white in dark / alpha-on-
     black in light. Auto-flip with theme. */
  --aqos-border:        rgba(255, 255, 255, 0.10);
  --aqos-border-hover:  rgba(255, 255, 255, 0.14);

  /* Atmospheric gradients — new in v1.4. Use these on the page, main
     panel, and card surfaces to get the Linear-style "lifted" feel
     without any visible glow. Each layer has its own light direction. */
  --aqos-page-grad:    radial-gradient(ellipse 80% 60% at 30% 0%, #101116 0%, #0a0b0e 70%);
  --aqos-main-grad:    radial-gradient(ellipse 130% 110% at 0% 0%, #1d1f25 0%, #181a1f 30%, #131519 65%, #101216 100%);
  --aqos-surface-grad: linear-gradient(155deg, #1d1f25 0%, #181a20 50%, #14161b 100%);
  --aqos-hero-glow:    radial-gradient(ellipse 50% 70% at 0% 0%, rgba(255,255,255,0.035) 0%, transparent 55%);
  /* Top-edge inner highlight — pair with `box-shadow: var(--aqos-edge-top)`
     on raised surfaces (active nav item, primary buttons, hero cards). */
  --aqos-edge-top: inset 0 1px 0 rgba(255, 255, 255, 0.03);

  /* Soft tall shadows — retuned for the warm-grey canvas. */
  --aqos-sh-1: 0 1px 2px rgba(0, 0, 0, 0.30), 0 4px 14px rgba(0, 0, 0, 0.20);
  --aqos-sh-2: 0 2px 4px rgba(0, 0, 0, 0.30), 0 12px 32px rgba(0, 0, 0, 0.30);
  --aqos-sh-3: 0 1px 0 rgba(255, 255, 255, 0.04) inset,
               0 24px 60px -20px rgba(0, 0, 0, 0.55),
               0 1px 2px rgba(0, 0, 0, 0.4);

  --brand-primary:    var(--aqos-aqua);
  --brand-primary-ink: var(--aqos-accent-ink);
  --brand-secondary:  var(--aqos-navy-1);
  --brand-accent:     var(--aqos-coral);
  --brand-surface:    var(--aqos-navy-0);

  --species-hue: 270;
  --species-r:  166;   /* indigo-ish defaults for species cards */
  --species-g:  148;
  --species-b:  239;
  --species-card-gradient: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));
  --species-pattern: plain;
}

/* ── Light (daylit curatorial desks — warm off-white per Linear) ──── */
html[data-color-scheme="light"] {
  color-scheme: light;

  /* Warm off-white palette (replaces slate-100). Mirrors prototype's
     light-mode foundational tokens. */
  --aqos-navy-0: #f4f4f0;
  --aqos-navy-1: #ffffff;
  --aqos-navy-2: #f7f7f4;
  --aqos-ink-0:  #1d1f24;
  --aqos-ink-1:  #6c6e76;
  --aqos-ink-2:  #9a9ca2;

  /* Accent stays indigo in both themes — flips of the saturated
     accent are unnecessary and disorienting. Light-mode soft/line/glow
     alphas are tuned down so the accent reads on white. */
  --aqos-aqua:   oklch(0.55 0.20 270);
  --aqos-coral:  #ea580c;
  --aqos-success: oklch(0.55 0.14 160);
  --aqos-warn:   oklch(0.62 0.14 70);
  --aqos-danger: oklch(0.55 0.18 25);
  --aqos-ai-accent: #6d28d9;

  --aqos-accent-soft: oklch(0.55 0.20 270 / 0.10);
  --aqos-accent-line: oklch(0.55 0.20 270 / 0.32);
  --aqos-accent-glow: oklch(0.55 0.20 270 / 0.12);
  --aqos-accent-ink:  rgba(255, 255, 255, 0.98);

  --aqos-bg:        var(--aqos-navy-0);
  --aqos-surface:   var(--aqos-navy-1);
  --aqos-surface-2: var(--aqos-navy-2);
  --aqos-surface-3: color-mix(in srgb, var(--aqos-navy-2) 70%, #ededea 30%);
  --aqos-text:      var(--aqos-ink-0);
  --aqos-text-dim:  var(--aqos-ink-1);
  --aqos-text-faint:var(--aqos-ink-2);

  --aqos-border:        rgba(0, 0, 0, 0.10);
  --aqos-border-hover:  rgba(0, 0, 0, 0.14);

  --aqos-page-grad:    radial-gradient(ellipse 80% 60% at 30% 0%, #fafaf6 0%, #ececea 70%);
  --aqos-main-grad:    radial-gradient(ellipse 130% 110% at 0% 0%, #ffffff 0%, #fafaf7 30%, #f3f3f0 65%, #ededea 100%);
  --aqos-surface-grad: linear-gradient(155deg, #ffffff 0%, #fafaf7 50%, #f4f4f0 100%);
  --aqos-hero-glow:    radial-gradient(ellipse 50% 70% at 0% 0%, rgba(0,0,0,0.025) 0%, transparent 55%);
  --aqos-edge-top: inset 0 1px 0 rgba(255, 255, 255, 0.7);

  --aqos-sh-1: 0 1px 2px rgba(20, 22, 30, 0.06), 0 4px 14px rgba(20, 22, 30, 0.05);
  --aqos-sh-2: 0 2px 4px rgba(20, 22, 30, 0.06), 0 12px 32px rgba(20, 22, 30, 0.08);
  --aqos-sh-3: 0 1px 0 rgba(255, 255, 255, 0.8) inset,
               0 24px 60px -20px rgba(20, 22, 30, 0.18),
               0 1px 2px rgba(20, 22, 30, 0.05);

  --brand-primary:    var(--aqos-aqua);
  --brand-primary-ink: #ffffff;
  --brand-secondary:  #ffffff;
  --brand-accent:     var(--aqos-coral);
  --brand-surface:    var(--aqos-navy-0);

  --species-hue: 270;
  --species-r:   72;
  --species-g:   58;
  --species-b:   178;
  --species-card-gradient: linear-gradient(135deg, var(--brand-primary), color-mix(in srgb, var(--brand-primary) 35%, var(--aqos-navy-2) 65%));
  --species-pattern: plain;
}

/* ── Reduced motion — single source of truth ─────────────────────── */
@media (prefers-reduced-motion: reduce) {
  :root {
    --aqos-d-1: 0ms;
    --aqos-d-2: 0ms;
    --aqos-d-3: 0ms;
    --aqos-d-4: 0ms;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Legacy aliases — retained for non-migrated surfaces ─────────── */
:root,
html[data-color-scheme="dark"],
html[data-color-scheme="light"] {
  --teal:   var(--brand-primary);
  --aqua:   var(--brand-primary);
  --coral:  var(--brand-accent);
  --accent: var(--brand-accent);
  --bg:     var(--brand-surface);
  --bg-deep:var(--brand-surface);
}