/* ============================================================
   tokens.css — ai.com Quiet Sky v2.0
   ------------------------------------------------------------
   The only file the product imports for design values. Components
   consume the SEMANTIC layer (--bg, --surface-1, --text-2, --accent).
   A component that references a primitive (--cyan, --ink) or a raw
   hex is a review flag: it will break in the other theme.

   Theming API: data-theme="light|dark" on <html>. Omit it and honour
   prefers-color-scheme with the bootstrap at the bottom of this file.
   Scoped theming (a pinned-dark hero inside a light page) is the same
   variables on a .theme-dark wrapper.
   ============================================================ */

:root {
  /* primitives */
  --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;
  /* shape */
  --r-pill:99px; --r-frame:20px; --r-card:16px;
  --r-inner:14px; --r-ctrl:12px; --r-tight:8px;
  /* motion */
  --ease:cubic-bezier(0.22,1,0.36,1);
  --ease-brand:var(--ease);
  --t-fast:200ms; --t-base:250ms; --t-slow:300ms; --t-reveal:500ms;
  /* type */
  --font:"Onest",system-ui,sans-serif;
}

:root[data-theme="light"], .theme-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);
  --border:rgba(14,14,20,.08); --border-strong:rgba(14,14,20,.14);
  --fill:rgba(14,14,20,.045);
  --accent:var(--cyan); --accent-text:var(--cyan-deep);
  --accent-tint:rgba(15,168,206,.08); --accent-border:rgba(15,168,206,.30);
  --danger:var(--red); --danger-text:var(--red);
  --danger-tint:rgba(194,69,88,.08); --danger-border:rgba(194,69,88,.30);
  --ok:var(--mint); --ok-text:var(--mint-deep);
  --ok-tint:rgba(43,217,169,.10); --ok-border:rgba(43,217,169,.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,.78);
  --shadow-card:0 1px 2px rgba(14,14,20,.04), 0 24px 64px rgba(14,14,20,.12);
  --shadow-soft:0 1px 2px rgba(14,14,20,.04), 0 12px 32px rgba(14,14,20,.07);
  --elev-card:var(--shadow-card); --elev-soft:var(--shadow-soft);
  --focus-ring:var(--cyan);
  color-scheme: light;
}

:root[data-theme="dark"], .theme-dark {
  --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);
  --border:rgba(237,238,244,.09); --border-strong:rgba(237,238,244,.18);
  --fill:rgba(237,238,244,.05);
  --accent:var(--cyan-night); --accent-text:var(--cyan-night);
  --accent-tint:rgba(95,212,242,.10); --accent-border:rgba(95,212,242,.30);
  --danger:var(--red-night); --danger-text:var(--red-night);
  --danger-tint:rgba(255,122,135,.10); --danger-border:rgba(255,122,135,.30);
  --ok:var(--mint); --ok-text:var(--mint-night);
  --ok-tint:rgba(43,217,169,.10); --ok-border:rgba(43,217,169,.30);
  --btn-primary-bg:var(--night-ink); --btn-primary-fg:var(--night);
  --bubble-agent:rgba(237,238,244,.07);
  --bubble-user-bg:var(--night-ink); --bubble-user-fg:var(--night);
  --glass:rgba(13,17,23,.72);
  --shadow-card:0 0 0 1px rgba(0,0,0,.30), 0 24px 64px rgba(0,0,0,.50);
  --shadow-soft:0 1px 2px rgba(0,0,0,.30), 0 12px 32px rgba(0,0,0,.35);
  --elev-card:var(--shadow-card); --elev-soft:var(--shadow-soft);
  --focus-ring:var(--cyan-night);
  color-scheme: dark;
}

/* ------------------------------------------------------------
   v2.0 · layering
   Ad-hoc z-index values are how a popover ends up under a sticky
   header. This scale is closed — no raw z-index in product code.
   Toasts sit ABOVE modals so a confirmation from a modal action is
   still visible; tooltips are last because they attach to whatever
   currently has focus.
   ------------------------------------------------------------ */
:root {
  --z-base:0;        /* page content                                  */
  --z-raised:100;    /* sticky page + table headers, the composer bar */
  --z-rail:200;      /* sidebar rail, right panel                     */
  --z-popover:300;   /* dropdowns, menus, pickers, notifications      */
  --z-drawer:400;    /* mobile sheets, side drawers                   */
  --z-scrim:500;     /* the modal backdrop                            */
  --z-modal:600;     /* modals, the command palette                   */
  --z-toast:700;     /* toasts                                        */
  --z-tooltip:800;   /* tooltips                                      */
}

/* ------------------------------------------------------------
   v2.0 · chart ramps
   One hue, five steps. Magnitude is carried by the ramp; identity is
   carried by position and direct labels, never by a second hue.
   --chart-5 is always the largest value AND always the step with the
   most contrast against its surface: darkest on canvas, brightest on
   night. The anchor flips with the mode — get it backwards and "most"
   becomes the least visible mark on the chart.
   For two series use --chart-4 and --chart-2, never the ends.

   Both ramps pass the ordinal checks (monotone lightness, adjacent
   dL >= 0.06, light-end contrast >= 2:1, single hue) against that
   mode's own surface. Re-run before changing them; see
   brand/doc/chart-ramps.md.
   ------------------------------------------------------------ */
:root[data-theme="light"], .theme-light {
  --chart-1:#5FBFE0; --chart-2:#1FA9CE; --chart-3:#0A8AAB;
  --chart-4:#07728C; --chart-5:#05596D;
}
:root[data-theme="dark"], .theme-dark {
  --chart-1:#057D95; --chart-2:#0897B3; --chart-3:#34B1CE;
  --chart-4:#54CAE8; --chart-5:#89E6FF;
}

/* ------------------------------------------------------------
   v2.0 · density
   Two densities, one set of components. Density changes SPACE only —
   never type size, never radius, never stroke. Set data-density on
   the app root. Never the default on touch, where 44px is the floor.
   ------------------------------------------------------------ */
:root { --row-h:44px; --gap-section:24px; --pad-card:16px; --cell-y:11px; --cell-x:18px; }
[data-density="compact"] { --row-h:36px; --gap-section:16px; --pad-card:12px; --cell-y:7px; --cell-x:14px; }

/* ------------------------------------------------------------
   Theme bootstrap — paste into <head>, before first paint.

   <script>
     const saved = localStorage.getItem("aic-theme");
     const mode = saved ?? (matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");
     document.documentElement.dataset.theme = mode;
   </script>
   ------------------------------------------------------------ */