/* ============================================================ tokens.tailwind.css — ai.com Quiet Sky v2.0 · Tailwind v4 edition ------------------------------------------------------------ For Tailwind v4 CSS-first repos. REPLACES tokens.css there — do not import both. Plain-CSS repos use tokens.css instead. Usage (in globals.css, after the tailwind import): @import 'tailwindcss'; @import './quiet-sky/tokens.tailwind.css'; Structure — and why it is shaped this way: · Runtime values live in :root / [data-theme='light'] so both themes share one utility set (var-level switching). · @theme inline maps runtime vars into Tailwind namespaces so utilities are generated (var() is invalid in plain @theme). · DARK IS THE DEFAULT (:root = night). This inverts the canonical tokens.css to match a dark-first app; the values are identical, only which theme needs the attribute differs. · Quiet Sky's --text-1/2/3 are COLOURS; Tailwind's --text-* namespace is FONT-SIZE. The runtime vars keep their spec names; utilities expose them as content-1/2/3: text-content-1 == color: var(--text-1) ============================================================ */ /* ---- primitives (theme-invariant) -------------------------- */ :root { --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; /* layering — closed scale, no raw z-index anywhere. Tailwind v4 var shorthand: class="z-(--z-modal)". */ --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; /* Vendored portals (LiveKit, emoji-mart) inject 1000+. Treat 1000+ as the vendor band: never place app UI there; wrap portals instead. */ /* density — space only, never type/radius/stroke. data-density="compact" on the app root. Never default on touch. */ --row-h:44px; --gap-section:24px; --pad-card:16px; --cell-y:11px; --cell-x:18px; --ease-brand:cubic-bezier(0.22,1,0.36,1); --t-fast:200ms; --t-base:250ms; --t-slow:300ms; --t-reveal:500ms; } [data-density="compact"] { --row-h:36px; --gap-section:16px; --pad-card:12px; --cell-y:7px; --cell-x:14px; } /* ---- semantic · DARK (the default — no attribute needed) ---- */ :root { --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); --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); --elev-card:0 0 0 1px rgba(0,0,0,.30), 0 24px 64px rgba(0,0,0,.50); --elev-soft:0 1px 2px rgba(0,0,0,.30), 0 12px 32px rgba(0,0,0,.35); --focus-ring:var(--cyan-night); --chart-1:#057D95; --chart-2:#0897B3; --chart-3:#34B1CE; --chart-4:#54CAE8; --chart-5:#89E6FF; color-scheme:dark; } /* ---- semantic · LIGHT (the override) ------------------------ */ [data-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); --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); --elev-card:0 1px 2px rgba(14,14,20,.04), 0 24px 64px rgba(14,14,20,.12); --elev-soft:0 1px 2px rgba(14,14,20,.04), 0 12px 32px rgba(14,14,20,.07); --focus-ring:var(--cyan); --chart-1:#5FBFE0; --chart-2:#1FA9CE; --chart-3:#0A8AAB; --chart-4:#07728C; --chart-5:#05596D; /* --chart-5 is "most" in BOTH modes and always the highest-contrast step: brightest on night, darkest on canvas. The anchor flips with the theme. Two series → chart-4 + chart-2, never the ends. */ color-scheme:light; } /* ---- Tailwind namespace mapping (generates the utilities) --- */ @theme inline { /* colour → bg-* text-* border-* fill-* stroke-* ring-* … */ --color-canvas:var(--bg); --color-surface-1:var(--surface-1); --color-surface-2:var(--surface-2); --color-surface-3:var(--surface-3); --color-content-1:var(--text-1); /* text-content-1, not text-text-1 */ --color-content-2:var(--text-2); --color-content-3:var(--text-3); --color-line:var(--border); /* border-line */ --color-line-strong:var(--border-strong); --color-wash:var(--fill); /* bg-wash — the quiet, meaning-free fill */ --color-accent:var(--accent); --color-accent-text:var(--accent-text); --color-accent-tint:var(--accent-tint); --color-accent-border:var(--accent-border); --color-danger:var(--danger); --color-ok:var(--ok); --color-ok-text:var(--ok-text); --color-ok-tint:var(--ok-tint); --color-btn-primary:var(--btn-primary-bg); --color-btn-primary-fg:var(--btn-primary-fg); --color-bubble-agent:var(--bubble-agent); --color-bubble-user:var(--bubble-user-bg); --color-bubble-user-fg:var(--bubble-user-fg); --color-glass:var(--glass); --color-focus:var(--focus-ring); --color-chart-1:var(--chart-1); --color-chart-2:var(--chart-2); --color-chart-3:var(--chart-3); --color-chart-4:var(--chart-4); --color-chart-5:var(--chart-5); /* elevation → shadow-card / shadow-soft */ --shadow-card:var(--elev-card); --shadow-soft:var(--elev-soft); /* motion → ease-brand */ --ease-brand:var(--ease-brand); } @theme { /* shape → rounded-pill / -frame / -card / -inner / -ctrl / -tight. The system has no sharp corners at any scale. */ --radius-pill:99px; --radius-frame:20px; --radius-card:16px; --radius-inner:14px; --radius-ctrl:12px; --radius-tight:8px; /* type scale (Part A3) → text-title-1 … text-micro. Onest for EVERYTHING, numbers included. Weights: 700 titles, 600 emphasis/numerals, 500/400 body. Eyebrow = caption + 700 + tracking, a component concern, not a size. */ --text-title-1:28px; --text-title-1--line-height:34px; /* page titles */ --text-title-2:19px; --text-title-2--line-height:25px; /* card/modal titles */ --text-title-3:15px; --text-title-3--line-height:21px; /* row titles */ --text-body:14px; --text-body--line-height:21px; /* the product default */ --text-small:13px; --text-small--line-height:19px; /* secondary rows, nav */ --text-caption:12px; --text-caption--line-height:17px; /* timestamps, meta */ --text-micro:11px; --text-micro--line-height:15px; /* chips, micro labels */ /* Onest replaces the sans stack. Keep a mono ONLY for authored code content inside messages/docs (R10) — never UI chrome. */ --font-sans:'Onest','Inter',system-ui,sans-serif; } /* Structural per-theme overrides (rare — prefer var-level theming): class="light:hidden" etc. NOTE: if a `dark` custom-variant keyed to a `.dark` class exists in your globals, delete it — nothing sets that class when theming via data-theme, so dark:* silently no-ops. */ @custom-variant light ([data-theme='light'] &);