/*
 * Atashi design tokens — HARBOUR (dual theme: Harbour dark + Daylight light).
 *
 * Ramped to the DECIDED Harbour system 2026-07-14 (atashi-harbour-sheet /
 * harbour-kit.css). Every colour pair is the sheet's AA/AAA-verified palette.
 * The prior generic-dark values (#15161A base / #1289d3 accent) were never the
 * Harbour ramp the sheet flagged as "Next build" — this is that ramp.
 *
 * Naming: variables keep their brand-aligned names so ports work verbatim.
 *   - --orange is the semantic "primary accent" slot = Harbour HERO
 *     (dark: powder #ACC8E5 · light: sea #1D5C96). --on-hero is the readable
 *     text ON that fill (dark: navy · light: white).
 *   - --cream is the readable FOREGROUND (dark: #E9F1F9 · light: ink #112A46).
 */

:root,
:root[data-theme="dark"] {
  /* Surfaces — NEUTRAL dark (Sanjay's ramp, ratified 2026-07-28 17:36
   * "the dark template palette is awesome": pure-neutral Drive-class greys,
   * zero blue tint, flat. The Harbour navy ramp it replaces is banked in
   * docs/uiux-overhaul/atashi-neutral-ramp-board-2026-07-28.html. The
   * DEPTH LADDER semantics are unchanged (deeper = further away):
   * ground-deep < ground < base < elevated < elevated-2. Light (Daylight)
   * is deliberately UNTOUCHED — his 17:45 word: "leave our light theme
   * as is! I always liked our light theme more". */
  --base: #131314;
  --base-rgb: 19, 19, 20;
  --elevated: #1E1F20;
  --elevated-2: #282A2C;
  --ground: #0E0E0F;
  /* Deepest ladder step (GN-0 depth pass): shell chrome floor + composer
   * wells. Additive token — approved surfaces keep their exact values. */
  --ground-deep: #0A0A0B;

  /* Foreground (quiet neutral greys — no blue cast) */
  /* Full ramp (2026-08-21, Green): 80/70/50/30/5 were USED at 41 sites across 20 files but never
   * defined, so each fell back to its inline rgba(255,247,232,…) — near-white in BOTH themes →
   * invisible text in light (Yellow's drive: proposal-card heading/reason on 595a41f4).
   * tokens.cream-ramp.test.ts refuses any --cream-N outside this set. */
  --cream: #E3E3E3;
  --cream-80: rgba(227, 227, 227, 0.82);
  --cream-70: rgba(227, 227, 227, 0.72);
  --cream-60: rgba(227, 227, 227, 0.62);
  --cream-50: rgba(227, 227, 227, 0.52);
  --cream-40: rgba(227, 227, 227, 0.42);
  --cream-30: rgba(227, 227, 227, 0.32);
  --cream-20: rgba(227, 227, 227, 0.2);
  --cream-10: rgba(227, 227, 227, 0.1);
  --cream-5: rgba(227, 227, 227, 0.05);

  --hairline: rgba(255, 255, 255, 0.08);
  --hairline-strong: rgba(255, 255, 255, 0.18);

  --scrim: rgba(0, 0, 0, 0.62);
  --scrim-strong: rgba(0, 0, 0, 0.78);

  --red-tint: rgba(255, 138, 133, 0.08);
  --red-border-soft: rgba(255, 138, 133, 0.45);

  /* Accents — HERO powder KEPT as the single voice of colour on the neutral
   * base (Sanjay's board pick); onhero is the text on the fill. */
  --orange: #ACC8E5;
  --orange-soft: #93B4D6;
  --orange-tint: rgba(172, 200, 229, 0.1);
  --on-hero: #131314;
  --mint: #7FD4BE;
  /* Rail + History section labels ("Rooms"/"Direct messages"/"Recents").
   * Mint accent on dark; overridden to readable ink on light/system-light
   * so the labels stay legible (bug #5, Sanjay 2026-07-23). */
  --rail-section: var(--mint);

  --blue: #4A9BD9;
  /* hover/pressed partner for --blue, mirroring --orange-soft. Holds the
     value components previously hardcoded as #3A7FBA. */
  --blue-soft: #3A7FBA;
  --green: #5BD6A1;
  --amber: #E8C268;
  --red: #FF8A85;

  /* Type stacks — the decided system (Sanjay's 2026-07-02 pick, rendered in
     docs/uiux-overhaul/atashi-harbour-sheet.html): Manrope display + Inter
     body + JetBrains Mono. Every family here is self-hosted and actually
     loaded (@font-face in index.html) — the previous stacks led with Geist /
     Geist Mono, which were never shipped, so text fell back inconsistently
     (modals → Manrope, chat → system-ui, mono labels → OS monospace).
     --font-display = headings / labels / buttons; --font-sans = body / inputs
     / chat; --font-mono = technical labels. */
  --font-display: "Manrope", ui-sans-serif, system-ui, sans-serif;
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-serif: "Fraunces", ui-serif, Georgia, serif;
  --font-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;

  /* Spacing scale (4px loose grid) */
  --space-1: 4px;
  --space-2: 6px;
  --space-3: 8px;
  --space-4: 10px;
  --space-5: 12px;
  --space-6: 14px;
  --space-7: 16px;
  --space-8: 18px;
  --space-9: 20px;
  --space-10: 24px;
  --space-11: 32px;
  --space-12: 40px;
  --space-13: 48px;
  --space-14: 64px;
  --space-15: 88px;

  /* Motion */
  --motion-hover: 0.12s ease;
  --motion-disclosure: 0.15s ease;

  /* Geometry */
  --bracket-size: 14px;
  --chamfer-size: 8px;
}

:root[data-theme="light"] {
  /* Surfaces — Daylight */
  --base: #EEF3F9;
  --base-rgb: 238, 243, 249;
  --elevated: #FFFFFF;
  --elevated-2: #E2EBF5;
  --ground: #E2EBF5;
  /* Daylight twin of the dark abyss step — chrome floor + composer wells. */
  --ground-deep: #D5E2F0;

  /* Foreground (Harbour ink on paper) */
  --cream: #112A46;
  --cream-80: rgba(17, 42, 70, 0.8);
  --cream-70: rgba(17, 42, 70, 0.7);
  --cream-60: rgba(17, 42, 70, 0.6);
  --cream-50: rgba(17, 42, 70, 0.5);
  --cream-40: rgba(17, 42, 70, 0.4);
  --cream-30: rgba(17, 42, 70, 0.3);
  --cream-20: rgba(17, 42, 70, 0.2);
  --cream-10: rgba(17, 42, 70, 0.08);
  --cream-5: rgba(17, 42, 70, 0.04);

  --hairline: rgba(17, 42, 70, 0.14);
  --hairline-strong: rgba(17, 42, 70, 0.4);

  --scrim: rgba(17, 42, 70, 0.45);
  --scrim-strong: rgba(17, 42, 70, 0.6);

  --red-tint: rgba(179, 38, 30, 0.06);
  --red-border-soft: rgba(179, 38, 30, 0.4);

  --orange: #1D5C96;
  --orange-soft: #174B7C;
  --orange-tint: rgba(29, 92, 150, 0.12);
  --on-hero: #FFFFFF;
  --mint: #7FD4BE;
  /* Readable dark ink for the rail/History section labels on the light theme
   * (bug #5) — mint washed out on paper. */
  --rail-section: rgba(17, 42, 70, 0.75);

  --blue: #1D5C96;
  --blue-soft: #174B7C;
  --green: #156940;
  --amber: #715A00;
  --red: #B3261E;
}

/* "System" theme — respect OS preference when data-theme="system" is set. */
@media (prefers-color-scheme: light) {
  :root[data-theme="system"] {
    --base: #EEF3F9;
    --base-rgb: 238, 243, 249;
    --elevated: #FFFFFF;
    --elevated-2: #E2EBF5;
    --ground: #E2EBF5;

    --cream: #112A46;
    --cream-80: rgba(17, 42, 70, 0.8);
    --cream-70: rgba(17, 42, 70, 0.7);
    --cream-60: rgba(17, 42, 70, 0.6);
    --cream-50: rgba(17, 42, 70, 0.5);
    --cream-40: rgba(17, 42, 70, 0.4);
    --cream-30: rgba(17, 42, 70, 0.3);
    --cream-20: rgba(17, 42, 70, 0.2);
    --cream-10: rgba(17, 42, 70, 0.08);
    --cream-5: rgba(17, 42, 70, 0.04);

    --hairline: rgba(17, 42, 70, 0.14);
    --hairline-strong: rgba(17, 42, 70, 0.4);

    --scrim: rgba(17, 42, 70, 0.45);
    --scrim-strong: rgba(17, 42, 70, 0.6);

    --red-tint: rgba(179, 38, 30, 0.06);
    --red-border-soft: rgba(179, 38, 30, 0.4);

    --orange: #1D5C96;
    --orange-soft: #174B7C;
    --orange-tint: rgba(29, 92, 150, 0.12);
    --on-hero: #FFFFFF;
    --mint: #7FD4BE;
    /* Readable dark ink for the rail/History section labels on system-light
     * (bug #5) — twin of the explicit light theme. */
    --rail-section: rgba(17, 42, 70, 0.75);

    --blue: #1D5C96;
    --blue-soft: #174B7C;
    --green: #156940;
    --amber: #715A00;
    --red: #B3261E;
  }
}

/* Ladder-down aliases (2026-07-19, Sanjay's "one shade darker" ruling): each
 * surface token's one-step-darker neighbour, captured AT ROOT so a scoped
 * remap (the settings-modal family) can shift a whole surface one rung
 * without circular var() references. var() inside a custom property resolves
 * on the defining element with the WINNING theme's cascade, so these stay
 * theme-correct in dark, light and system. */
:root {
  --elevated-2-down: var(--elevated);
  --elevated-down: var(--base);
  --base-down: var(--ground);
}