/* ════════════════════════════════════════════════════════════════════════ NazBook DESIGN TOKENS — single source of truth · "Cyber-Glass" Loaded FIRST on every screen (before components.css and any inline style). Dark is default; [data-theme="light"] overrides the same vars — every screen that uses these vars supports light mode by toggling one attribute on . [data-palette="jade"] re-points the brand vars only. `color-scheme` on both blocks is load-bearing, not decorative: without it, some browsers/OSes (notably Android Chrome's auto-dark heuristic) try to "helpfully" re-color content they don't recognize as intentionally dark-themed — and misfire on icon-font glyphs specifically. Declaring color-scheme tells the platform "this IS the real theme, don't touch it." Rule (§11.1): screens use ONLY these tokens — no raw hex, no white-alpha. ════════════════════════════════════════════════════════════════════════ */ :root, [data-theme="dark"]{ color-scheme:dark; /* surfaces */ --bg:#080a0c; --s-low:#0f1214; --s1:#15191c; --s2:#1d2125; --s3:#272a2c; --s4:#323537; --surface-solid:#15191c; /* modals/drawers: opaque — page must not bleed through */ --thead:#12161a; /* sticky table header */ --row:rgba(255,255,255,.012); /* table row tint */ /* glass (card elevation) + overlay elevation */ --glass-bg:rgba(255,255,255,.04); --glass-bd:rgba(255,255,255,.10); --glass-sh:0 8px 32px rgba(0,0,0,.55); --overlay-bd:rgba(255,255,255,.16); --overlay-sh:0 16px 48px rgba(0,0,0,.65); /* text */ --on:#e1e2e5; --on-var:#b9caca; --on-dim:#95a2a3; /* §3.3: +18% toward --on (was #849495, 5.6:1 on a card — thin) */ --outline:#849495; --outline-v:#3a494a; --hair:rgba(255,255,255,.08); /* universal LOW-CONTRAST divider (NN/g) — never a bright stroke */ /* brand — Electric Cyan */ --primary:#00f5ff; --primary-dim:#00dce5; --primary-bright:#63f7ff; --primary-ink:#7df5f4; /* cyan-as-TEXT always uses this, never --primary */ --on-primary:#00282b; /* near-black ink on cyan buttons (AA) */ --primary-hover:#5cf8ff; --primary-glow:0 4px 22px rgba(0,245,255,.28); --primary-glow-hover:0 4px 30px rgba(0,245,255,.42); --primary-container:rgba(0,245,255,.12); /* positive chip/tint bg */ --primary-container-bd:rgba(0,245,255,.30); /* positive chip border */ --aqua:#7df5f4; --indigo:#343d96; --purple:#8e2de2; --purple-ink:#c79bff; /* status (no green / no yellow) */ --warn:#fb923c; --warn-ink:#fbbf6e; --warn-container:rgba(251,146,60,.14); --warn-container-bd:rgba(251,146,60,.35); --error:#ff6b6b; /* error TEXT/icons — the only error red */ --error-container:rgba(255,107,107,.12); /* error chip/banner bg */ --error-container-bd:rgba(255,107,107,.32); /* error chip/banner border */ /* fields + loading */ --field:rgba(255,255,255,.05); --field-bd:rgba(255,255,255,.14); --skel:rgba(255,255,255,.06); --skel-sheen:rgba(255,255,255,.13); /* RGB triplets — for Tailwind opacity modifiers: rgb(var(--x-rgb) / ) */ --primary-rgb:0 245 255; --primary-dim-rgb:0 220 229; --error-rgb:255 107 107; --warn-rgb:251 146 60; --on-rgb:225 226 229; --mesh-op:1; --orb-op:.22; /* §3.4: shared .fld:focus glow — dark keeps the neon cyan bloom */ --focus-glow:0 0 18px rgba(125,245,244,.18); /* §3.2: text color for small colored badges (avatar initials on a gradient chip, "partner access" chip, etc.) — brighter than --primary-ink on purpose for that one use case, so it's its own token rather than reusing --primary-ink and changing every existing badge's look. */ --color-badge-text:#bff7fb; /* ── motion (§11.7 Cyber-Glass motion spec) ────────────────────────────── Resend-benchmark: nothing moves unless it communicates state; fast-out easing; entrances stagger once on first paint, never replay on re-render. */ --dur-micro:120ms; --dur-component:200ms; --dur-drawer:300ms; --ease-out-fast:cubic-bezier(.32,.72,0,1); --stagger-step:25ms; } [data-theme="light"]{ color-scheme:light; --bg:#eef2f6; --s-low:#ffffff; --s1:#ffffff; --s2:#f3f6f9; --s3:#e6ebf0; --s4:#dde4ec; --surface-solid:#ffffff; --thead:#e8edf2; --row:rgba(15,23,42,.012); /* §11.2: light glass = near-opaque white + visible hairline + two-layer soft shadow */ --glass-bg:rgba(255,255,255,.92); --glass-bd:rgba(15,23,42,.12); --glass-sh:0 1px 2px rgba(15,23,42,.06), 0 8px 24px rgba(15,23,42,.08); --overlay-bd:rgba(15,23,42,.16); --overlay-sh:0 2px 4px rgba(15,23,42,.08), 0 16px 40px rgba(15,23,42,.14); --on:#0f1720; --on-var:#43505e; --on-dim:#5a6673; /* §3.3: +18% toward --on (was #6b7785, 4.56:1 on a white card — right at AA's edge) */ --outline:#6b7785; --outline-v:#c3ccd6; --hair:rgba(15,23,42,.08); --primary:#00d4e0; --primary-dim:#0891a3; --primary-bright:#0a7c87; --primary-ink:#0a7c87; /* §11.2-5: cyan is a SURFACE color in light; cyan text = this */ --on-primary:#00282b; --primary-hover:#00c2cc; /* §11.2-3: no neon glows on light — plain elevation shadows */ --primary-glow:0 1px 2px rgba(15,23,42,.10), 0 4px 12px rgba(15,23,42,.14); --primary-glow-hover:0 2px 4px rgba(15,23,42,.12), 0 6px 16px rgba(15,23,42,.18); --primary-container:rgba(8,145,163,.10); --primary-container-bd:rgba(8,145,163,.30); --aqua:#0aa2b0; --indigo:#3b46b8; --purple:#7b2bd6; --purple-ink:#6b21b8; --warn:#ea7a17; --warn-ink:#b45309; --warn-container:rgba(234,122,23,.10); --warn-container-bd:rgba(234,122,23,.32); --error:#c0362c; --error-container:rgba(192,54,44,.08); --error-container-bd:rgba(192,54,44,.28); /* §3.4: at .04/.14 a field's border composited to ~1.3:1 against a white card — essentially invisible, which is why inputs read as "not there" in light mode. Bumped fill+border together (not just the border alone) since a barely-tinted fill is itself part of how a field reads as a field, not just its outline. */ --field:rgba(15,23,42,.06); --field-bd:rgba(15,23,42,.22); --skel:rgba(15,23,42,.06); --skel-sheen:rgba(15,23,42,.03); /* §3.4: the shared cyan neon glow reads as a stray effect on a light background (§11.2-3's own "no neon glows on light" rule) — a crisp ring, same family as focus-visible's outline, reads as "focused" without looking like leftover dark-mode glow. */ --focus-glow:0 0 0 3px rgb(var(--primary-rgb) / .16); --primary-rgb:0 212 224; --primary-dim-rgb:8 145 163; --error-rgb:192 54 44; --warn-rgb:234 122 23; --on-rgb:15 23 32; --mesh-op:.5; --orb-op:0; /* §11.2-4: orbs are dark-theme ambiance only */ /* dark-tuned bright cyan reads as near-invisible on a pale badge bg in light mode — same dark-cyan-ink already proven correct for --primary-ink */ --color-badge-text:var(--primary-ink); } /* ════════ PALETTE: "Jade Horizon" — supported theme option (founder 2026-07-08) ════════ Flip via data-palette="jade" on . Brand vars only; layout untouched. White CTA text. [A11Y-J1]: dark jade primary is #237A56 (≈5.3:1 with white), NOT #288760 (4.45:1 — fails AA). Light jade #1A5140 (≈9:1) passes as-is. */ [data-palette="jade"]{ --primary:#237A56; --primary-dim:#5CA87C; --primary-bright:#7CC79A; --primary-ink:#B7E5BA; --on-primary:#ffffff; --aqua:#5CA87C; --primary-hover:#2f9d70; --primary-glow:0 4px 22px rgba(40,135,96,.40); --primary-glow-hover:0 4px 30px rgba(40,135,96,.55); --primary-container:rgba(40,135,96,.16); --primary-container-bd:rgba(92,168,124,.40); --primary-rgb:35 122 86; --primary-dim-rgb:92 168 124; } [data-palette="jade"][data-theme="light"]{ --primary:#1A5140; --primary-dim:#288760; --primary-bright:#1A5140; --primary-ink:#1A5140; --on-primary:#ffffff; --aqua:#288760; --primary-hover:#153f33; --primary-glow:0 1px 2px rgba(15,23,42,.10), 0 4px 12px rgba(26,81,64,.20); --primary-glow-hover:0 2px 4px rgba(15,23,42,.12), 0 6px 16px rgba(26,81,64,.26); --primary-container:rgba(40,135,96,.10); --primary-container-bd:rgba(40,135,96,.32); --primary-rgb:26 81 64; --primary-dim-rgb:40 135 96; }