/*
 * ai.com Quiet Sky — portable semantic token contract
 * Verified against frontend/web/src/app/globals.css on 2026-09-03.
 *
 * WHAT WAS VERIFIED
 *   Primitive values          globals.css:26-44
 *   Semantic dark / light     globals.css:78-158
 *   Collision-safe --qs-*     globals.css:251-261
 *   Radius scale              globals.css:214-219
 *   Type scale, seven rungs   globals.css:222-230, 293-298
 *   Density and motion        globals.css:57-68
 *   Layer scale               globals.css:46-55
 *
 * WHAT THIS FILE EXCLUDES
 *   Icing, shadcn, legacy AIC aliases, OKLCH multihue charts, avatar
 *   palettes, and product compatibility layers. Their effects on the
 *   shipping frontend are recorded in conformance.html, not here.
 *
 * NAMES THAT ARE NOT PRODUCTION TOKENS
 *   --r-*          alias of --radius-*, kept for site.css and demo.css
 *   --font         alias of --font-sans
 *   --qs-space-*   a 4px rhythm for this package only; production has no
 *                  canonical Quiet Sky spacing scale (see below)
 *   --qs-<primitive>
 *                  alias of an unprefixed production primitive, kept so a
 *                  consumer written against an earlier version of this file
 *                  keeps resolving. Production prefixes only three names:
 *                  --qs-accent, --qs-border-soft, --qs-border-strong.
 *
 * Dark is the default. Set data-theme="light" on <html> for light mode.
 */

:root {
  color-scheme: dark;

  /* ---- primitives (theme-invariant) --------------------------------
     Production names, unprefixed, exactly as globals.css:26-44. A
     component rule that references a primitive instead of a semantic
     token is a review flag: it will break in the other theme. */
  --white: #ffffff;
  --canvas-l: #fbfbfd;
  --ink: #0e0e14;
  --gray-muted: #5b5b66;
  --gray-faint: #8a8a94;
  --night: #0a0d12;
  --night-2: #0d1117;
  --night-3: #12161f;
  --night-ink: #edeef4;
  --night-muted: #9da1b2;
  --night-faint: #7e8095;
  --cyan: #0fa8ce;
  --cyan-deep: #0b86a6;
  --cyan-night: #5fd4f2;
  --red: #c24558;
  --red-night: #ff7a87;
  --mint: #2bd9a9;
  --mint-deep: #14795c;
  --mint-night: #8fe0c4;

  /* Compatibility aliases for the --qs- prefixed primitive names this
     file used before it was reconciled with production. */
  --qs-white: var(--white);
  --qs-canvas-light: var(--canvas-l);
  --qs-ink: var(--ink);
  --qs-muted: var(--gray-muted);
  --qs-faint: var(--gray-faint);
  --qs-night: var(--night);
  --qs-night-2: var(--night-2);
  --qs-night-3: var(--night-3);
  --qs-night-ink: var(--night-ink);
  --qs-night-muted: var(--night-muted);
  --qs-night-faint: var(--night-faint);
  --qs-cyan: var(--cyan);
  --qs-cyan-deep: var(--cyan-deep);
  --qs-cyan-night: var(--cyan-night);
  --qs-red: var(--red);
  --qs-red-night: var(--red-night);
  --qs-mint: var(--mint);
  --qs-mint-deep: var(--mint-deep);
  --qs-mint-night: var(--mint-night);

  /* ---- semantic · dark (the default) ------------------------------- */
  --bg: var(--night);
  --surface-1: var(--night-2);
  --surface-2: var(--night-3);
  --surface-3: #0f131b;
  --text-1: var(--night-ink);
  --text-2: var(--night-muted);
  --text-3: var(--night-faint);
  --fill: rgba(237, 238, 244, 0.05);
  --track: rgba(237, 238, 244, 0.08);
  --accent-text: var(--cyan-night);
  --accent-tint: rgba(95, 212, 242, 0.1);
  --accent-border: rgba(95, 212, 242, 0.3);
  --danger: var(--red-night);
  --danger-text: var(--red-night);
  --danger-tint: rgba(255, 122, 135, 0.1);
  --danger-border: rgba(255, 122, 135, 0.3);
  --ok: var(--mint);
  --ok-text: var(--mint-night);
  --ok-tint: rgba(43, 217, 169, 0.1);
  --ok-border: rgba(43, 217, 169, 0.3);
  --btn-primary-bg: var(--night-ink);
  --btn-primary-fg: var(--night);
  --bubble-agent: rgba(237, 238, 244, 0.07);
  --bubble-user-bg: var(--night-ink);
  --bubble-user-fg: var(--night);
  --glass: rgba(13, 17, 23, 0.72);
  --focus-ring: var(--cyan-night);

  /* ---- collision-safe names ----------------------------------------
     These three are real production tokens (globals.css:251-261). They
     exist because shadcn redefines --border and --accent later in
     globals.css (lines 1209, 1212, 1558, 1561) and wins. Any code
     destined for the frontend must use these, not the generic names. */
  --qs-accent: var(--cyan-night);
  --qs-border-soft: rgba(237, 238, 244, 0.09);
  --qs-border-strong: rgba(237, 238, 244, 0.18);

  /* Portable-only. Safe in a standalone consumer of this file, unsafe in
     the frontend, where shadcn overwrites --accent with a grey hover fill
     and --border with its own value. Prefer the --qs- names above. */
  --accent: var(--qs-accent);
  --border: var(--qs-border-soft);
  --border-strong: var(--qs-border-strong);

  /* ---- chart ramp (a sequence, not five independent colors) -------- */
  --chart-1: #057d95;
  --chart-2: #0897b3;
  --chart-3: #34b1ce;
  --chart-4: #54cae8;
  --chart-5: #89e6ff;

  /* ---- elevation --------------------------------------------------- */
  --elev-card: 0 0 0 1px rgba(0, 0, 0, 0.3), 0 24px 64px rgba(0, 0, 0, 0.5);
  --elev-soft: 0 1px 2px rgba(0, 0, 0, 0.3), 0 12px 32px rgba(0, 0, 0, 0.35);
  --shadow-card: var(--elev-card);
  --shadow-soft: var(--elev-soft);

  /* ---- shape ------------------------------------------------------- */
  --radius-tight: 8px;
  --radius-ctrl: 12px;
  --radius-inner: 14px;
  --radius-card: 16px;
  --radius-frame: 20px;
  --radius-pill: 99px;

  /* Short aliases. site.css and demo.css resolve these. */
  --r-tight: var(--radius-tight);
  --r-ctrl: var(--radius-ctrl);
  --r-inner: var(--radius-inner);
  --r-card: var(--radius-card);
  --r-frame: var(--radius-frame);
  --r-pill: var(--radius-pill);

  /* ---- spacing -----------------------------------------------------
     A 4px rhythm for this package. NOT a production token: the frontend
     ships two competing spacing scales and no canonical Quiet Sky one.
       --space-xs/sm/md/lg/xl/2xl = 4/8/16/24/32/48   globals.css:1069-1074
       --spacing-token-half/1..5  = 2/4/8/12/16/20    globals.css:900-905
     Prefixed so it collides with neither. The canonical rule is the 4px
     rhythm itself; these variables are a convenience for this reference. */
  --qs-space-1: 4px;
  --qs-space-2: 8px;
  --qs-space-3: 12px;
  --qs-space-4: 16px;
  --qs-space-5: 20px;
  --qs-space-6: 24px;

  /* ---- type -------------------------------------------------------
     Seven functional rungs, same names as tokens.tailwind.css. Note
     --text-1/2/3 above are COLORS; the size tokens are --text-<name>.
     Three of these are overwritten in the production Tailwind build by
     the legacy AIC layer — see conformance.html and globals.css:269-300. */
  --text-title-1: 28px;
  --text-title-1--line-height: 34px;
  --text-title-2: 19px;
  --text-title-2--line-height: 25px;
  --text-title-3: 15px;
  --text-title-3--line-height: 21px;
  --text-qs-body: 14px;
  --text-qs-body--line-height: 21px;
  --text-small: 13px;
  --text-small--line-height: 19px;
  --text-qs-caption: 12px;
  --text-qs-caption--line-height: 17px;
  --text-qs-micro: 11px;
  --text-qs-micro--line-height: 15px;

  /* Production's --font-sans also chains --font-inter-variable and system
     fallbacks (globals.css:1077). Onest is canonical and comes first. */
  --font-sans: "Onest", system-ui, sans-serif;
  --font: var(--font-sans);

  /* ---- density (space only, never type, radius, or stroke) --------- */
  --row-h: 44px;
  --gap-section: 24px;
  --pad-card: 16px;
  --cell-y: 11px;
  --cell-x: 18px;

  /* ---- motion ------------------------------------------------------ */
  --ease-brand: cubic-bezier(0.22, 1, 0.36, 1);
  --t-fast: 200ms;
  --t-base: 250ms;
  --t-slow: 300ms;
  --t-reveal: 500ms;

  /* ---- layers (closed scale, no raw z-index) ----------------------- */
  --z-base: 0;
  --z-raised: 100;
  --z-rail: 200;
  --z-popover: 300;
  --z-drawer: 400;
  --z-scrim: 500;
  --z-modal: 600;
  --z-toast: 700;
  --z-tooltip: 800;
}

[data-theme="light"] {
  color-scheme: light;
  --bg: var(--canvas-l);
  --surface-1: var(--white);
  --surface-2: #f7f7fa;
  --surface-3: #fdfdfe;
  --text-1: var(--ink);
  --text-2: var(--gray-muted);
  --text-3: var(--gray-faint);
  --fill: rgba(14, 14, 20, 0.045);
  --track: rgba(14, 14, 20, 0.07);
  --accent-text: var(--cyan-deep);
  --accent-tint: rgba(15, 168, 206, 0.08);
  --accent-border: rgba(15, 168, 206, 0.3);
  --danger: var(--red);
  --danger-text: var(--red);
  --danger-tint: rgba(194, 69, 88, 0.08);
  --danger-border: rgba(194, 69, 88, 0.3);
  --ok: var(--mint);
  --ok-text: var(--mint-deep);
  --ok-tint: rgba(43, 217, 169, 0.1);
  --ok-border: rgba(43, 217, 169, 0.35);
  --btn-primary-bg: var(--ink);
  --btn-primary-fg: var(--white);
  --bubble-agent: #f4f4f8;
  --bubble-user-bg: var(--ink);
  --bubble-user-fg: var(--white);
  --glass: rgba(255, 255, 255, 0.78);
  --focus-ring: var(--cyan);

  --qs-accent: var(--cyan);
  --qs-border-soft: rgba(14, 14, 20, 0.08);
  --qs-border-strong: rgba(14, 14, 20, 0.14);
  --accent: var(--qs-accent);
  --border: var(--qs-border-soft);
  --border-strong: var(--qs-border-strong);

  --chart-1: #5fbfe0;
  --chart-2: #1fa9ce;
  --chart-3: #0a8aab;
  --chart-4: #07728c;
  --chart-5: #05596d;
  --elev-card: 0 1px 2px rgba(14, 14, 20, 0.04), 0 24px 64px rgba(14, 14, 20, 0.12);
  --elev-soft: 0 1px 2px rgba(14, 14, 20, 0.04), 0 12px 32px rgba(14, 14, 20, 0.07);
}

[data-density="compact"] {
  --row-h: 36px;
  --gap-section: 16px;
  --pad-card: 12px;
  --cell-y: 7px;
  --cell-x: 14px;
}