/* House of Anons v3 — tokens.css
   Theme separated from structure (plan §5). Three layers:
   L1 primitives  — ALIASED to @houseofanons/brand (../brand/tokens.css), imported below. Brand is
                    the single source of truth for the cross-project palette/type/radius/motion —
                    edit brand/tokens.json + re-run brand/gen-tokens.py, never a value here.
                    A few L1 primitives stay LOCAL (not brand-sourced) because they are demo-only
                    decorative shades with no cross-project meaning (accessibility-tuned gradient
                    stops, the note-in-a-bottle parchment palette, the handwritten/serif fonts) —
                    each is commented as such.
   L2 roles       — Nightshore's role layer mapped over the primitives (what each colour is FOR).
   L3 components  — sizes/shapes for the recurring pieces (bottle, note card, rail card, chip, badge, quick action).
   Structure (shell.css, content.css, app.css, index.html) references L2/L3 roles only — never an
   L1 primitive directly, and never a literal (HL2 design-system lane, card HOA_APEX_CUTOVER_2026-09-16 §Lanes/HL2).
   Theme switch: brand/tokens.css defines [data-theme="shore"] and [data-theme="chapter"] as full
   property sets on --hoa-*; because every L1 name below is `var(--hoa-*)`, this file needs NO
   per-theme override block of its own — set data-theme once on <html> (app.js already does this
   from the Settings panel toggle) and the whole cascade repaints. */
@import url("../brand/tokens.css");

:root{
  /* ---------- L1 PRIMITIVES ---------- */
  /* brand-sourced (single source: brand/tokens.json → [data-theme="shore"|"chapter"]) */
  --k3-bg:var(--hoa-ink);
  --k3-panel:var(--hoa-ink-2);
  --k3-panel2:var(--hoa-ink-3);
  --k3-line:var(--hoa-line);
  --k3-txt:var(--hoa-cream);
  --k3-muted:var(--hoa-cream-dim);
  --k3-coral:var(--hoa-copper);
  --k3-coral-deep2:var(--hoa-copper-bright); /* AA-safe flat-fill CTA token, 4.86:1 vs white (fix cycle 1, defect 6) */
  --k3-cyan:var(--hoa-euc);
  --k3-amber:var(--hoa-rose);
  /* v3-local (2026-09-16): brand's shore radii are 16/14, v3's scale is 12/14/16. Aliasing sm to
     --hoa-radius-panel silently changed the DEFAULT theme 12px -> 16px on the live apex. HL2 checked
     hex values, found them identical, and reported "no visual change" — true of colour, false of
     radius. Pinned back to the shipped value; aligning v3's radius scale to brand is a DESIGN
     decision, not a side effect of tokenising. */
  --radius-sm:12px;
  --radius-md:var(--hoa-radius-card);
  --radius-lg:16px; /* v3-local: was silently changed to 12px by the same aliasing pass; brand has no fourth step */
  --radius-pill:var(--hoa-radius-button); /* shore's "button" radius IS a pill (30px) */

  /* v3-local — demo-only decorative primitives, not part of the cross-project brand */
  --k3-coral-deep:#f2544a;     /* one step darker than --k3-coral; topbar/signin gradient CTAs
                                   only — 3.42:1 against white, NOT AA on its own as a flat fill
                                   (fix cycle 1, defect 6); superseded by --k3-coral-deep2 for fills */
  --k3-coral-light:#ff7a6c;    /* lighter gradient stop paired with --k3-coral-deep, same CTAs */
  --k3-purple:#8b6cf0;         /* chat/community accent — no brand-palette equivalent */
  --k3-hand:'Segoe Script','Bradley Hand','Comic Sans MS',cursive;   /* handwritten note font — demo-only, not a brand type */
  --k3-sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --k3-serif:Georgia,'Times New Roman',serif;

  --motion-fast:var(--hoa-duration-fast);
  --motion-med:var(--hoa-duration-med);      /* the bottle-open / note-unfurl beat (D9) */
  --motion-slow:var(--hoa-duration-slow);
  --motion-slide:8s;       /* story-slider auto-rotate interval (§3) — v3-local, no brand equivalent */
  --motion-scale:1;        /* 0 under prefers-reduced-motion — every ambient keyframe duration multiplies by this */

  /* ============ L2 ROLES ============ */
  --surface-bg:var(--k3-bg);
  --surface-panel:var(--k3-panel);
  --surface-panel-alt:var(--k3-panel2);
  --surface-panel-alpha:rgba(12,21,48,.7);
  --surface-hover:rgba(255,255,255,.04);   /* hover wash on dark surfaces — events rail cards */
  --border-cool:var(--k3-line);
  --border-cool-strong:var(--hoa-line-2);

  --text-primary:var(--k3-txt);
  --text-muted:var(--k3-muted);
  --text-on-accent:#ffffff;

  /* accent purposes (§5) */
  --accent-primary:var(--k3-coral);         /* primary action — links/icons */
  --accent-primary-fill:var(--k3-coral-deep2); /* primary action — solid CTA fill; 4.86:1 vs white, AA (fix cycle 1, defect 6) */
  --accent-live:var(--k3-cyan);             /* live / positive */
  --accent-community:var(--k3-purple);      /* chat / community */
  --accent-price:var(--k3-amber);           /* price / highlight TEXT only, never a fill */
  /* chat surfaces need --accent-community at a few fixed alphas (banner/thread/bubble washes) —
     named here once so the CHAT consumer never inlines its own rgba() literal */
  --accent-community-08:rgba(139,108,240,.08);
  --accent-community-14:rgba(139,108,240,.14);
  --accent-community-22:rgba(139,108,240,.22);
  --accent-community-35:rgba(139,108,240,.35);
  --accent-community-40:rgba(139,108,240,.4);

  /* the booking/onboarding sign-in sheet + its entry points (sidebar/topbar CTAs) + the toast
     it triggers ("Phase 3 of this build — not wired") — the BOOKING and ONBOARDING consumers */
  --overlay-backdrop:rgba(3,6,15,.72);
  --k3-coral-glow:0 8px 22px rgba(255,107,94,.28);
  --toast-bg:#101d42;          /* v3-local: the toast's own surface, distinct from panel/panel2 */
  --toast-border:rgba(55,213,224,.4);

  /* badge/parchment pairs, mapped explicitly */
  --chip-date-bg:#ffffff;                   /* Nightshore's white date chip */
  --chip-date-fg:#0c1530;                   /* navy ink on the white chip */
  --parchment-bg:linear-gradient(#f8f0dd,#eee2c6);
  --parchment-ink:#2c2416;
  --parchment-rule:#6b5b3e;
  --parchment-accent:#d6455f;
  --badge-count-bg:rgba(255,107,94,.18);
  --badge-count-fg:var(--k3-coral);
  --badge-live-bg:rgba(55,213,224,.16);
  --badge-live-fg:var(--k3-cyan);

  /* ============ L3 COMPONENTS ============ */
  --bottle-w:5.8em;
  --bottle-viewbox:'0 0 64 152';
  --note-card-radius:var(--radius-lg);
  --note-card-shadow:0 18px 40px rgba(0,0,0,.5);
  --rail-card-radius:var(--radius-md);
  --rail-card-bg:var(--surface-panel);
  --rail-card-border:var(--border-cool);
  --chip-radius:var(--radius-pill);
  --badge-radius:20px;
  --qa-tile-radius:var(--radius-lg);
  --qa-tile-bg:var(--surface-panel);
}

@media (prefers-reduced-motion: reduce){
  :root{ --motion-scale:0; }
}