/* ========================================================================== SazAI Design System — tokens.css (SOURCE OF TRUTH) -------------------------------------------------------------------------- The FROZEN token system (U1, Sys Arch ruling 2026-07-09): 99 declarations, framework-neutral CSS custom properties, in 3 layers. The freeze governs the role tokens; additive brand aliases (the logo "guides", 2026-07-10) extend it without reopening any existing value. L1 primitives (raw values — never used directly by components) L2 semantic (role-based, theme-aware: light + dark) L3 component/surface tokens are declared per-component in shadow CSS, consuming ONLY L1/L2 (never raw values). Ported VERBATIM from the frozen design (ds_proof_u1_phaseA.html). The design does not reopen — only component builds sequence (ADR-047). Theme: the host sets `data-theme="light|dark"` on the root; custom properties pierce the shadow boundary, so every element themes with no wiring. Fonts (DM Sans / DM Mono) are provided by the host — see docs/reference/hosting.md. ========================================================================== */ /* ------- L1 · PRIMITIVES --------------------------------------------------- */ :root { /* Text-rendering baseline — DS-wide, skin-independent. Grayscale antialiasing (vs the browser's default subpixel) is the SazAI house look: lighter, crisper type on every surface. Inherited, so it reaches shadow-DOM components too. */ -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; /* Neutral ramp (zinc) */ --zinc-50:#fafafa; --zinc-100:#f4f4f5; --zinc-200:#e4e4e7; --zinc-300:#d4d4d8; --zinc-400:#a1a1aa; --zinc-500:#71717a; --zinc-600:#52525b; --zinc-700:#3f3f46; --zinc-800:#27272a; --zinc-900:#18181b; --zinc-950:#09090b; --white:#ffffff; /* pure white — single source (surface, on-primary, filled-button text) */ /* Brand / domain hues — LIGHT base (dark variants overridden below, decision #6) */ --hue-analysis:#4166f5; /* DD/DP/DS — analysis */ --hue-reprocess:#cc338b; /* TE/TR/TD — reprocess */ --hue-output:#93c83e; /* DE — output / success */ --hue-upload:#f98128; /* upload accent — orange */ --hue-amber:#eab308; /* warning — VIVID yellow; used as a FILL with dark text (never as text on white) */ --hue-danger:#dc2626; /* hard error — red */ /* Brand — "the guides": the four logo dots ARE the four domain hues (theme-aware aliases so they lift for legibility on dark, decision #6), plus the logo ground + mark. This is the SazAI signature palette. */ --brand-blue:var(--hue-analysis); /* logo dot 1 */ --brand-orange:var(--hue-upload); /* logo dot 2 */ --brand-green:var(--hue-output); /* logo dot 3 */ --brand-magenta:var(--hue-reprocess);/* logo dot 4 */ --brand-ink:#0b2e33; /* logo ground — deep teal */ --brand-ice:#e8f4f6; /* logo mark — ice */ /* Type scale (rem) */ --fs-xs:.72rem; --fs-sm:.8rem; --fs-base:.9rem; --fs-md:1rem; --fs-lg:1.1rem; --fs-xl:1.6rem; --fs-2xl:2rem; --fw-light:300; --fw-normal:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700; --lh-tight:1.2; --lh-normal:1.45; --lh-relaxed:1.6; --font-sans:"DM Sans", "Noto Sans Arabic", system-ui, sans-serif; --font-mono:"DM Mono", ui-monospace, monospace; /* Spacing scale */ --sp-1:4px; --sp-2:6px; --sp-3:8px; --sp-4:12px; --sp-5:16px; /* sz-user-panel: reserved authed-panel height (toolbar row + gap + 40px avatar identity row) so the host chrome reserves it and the toolbar keeps its x/y across the session-less→authed transition. */ --sz-userpanel-reserve:6rem; --sp-6:24px; --sp-7:32px; --sp-8:48px; /* Radius */ --r-sm:6px; --r-md:8px; --r-lg:10px; --r-xl:12px; --r-2xl:16px; --r-full:999px; /* Motion */ --ease-out:cubic-bezier(.2,.7,.3,1); --ease-spring:cubic-bezier(.2,1.6,.4,1); /* overshoot spring — --ease-out would flatten it (ADR-047 Add.3) */ --dur-fast:160ms; --dur-mid:300ms; --dur-slow:800ms; /* Semantic status = the domain hues (theme-independent mapping; the hues themselves flip per theme, decision #6). */ --info:var(--hue-analysis); --success:var(--hue-output); --warning:var(--hue-amber); --danger:var(--hue-danger); /* Accent — base aliases (like --info/--success); skins re-map --accent to their own (ADR-047 Add.3). Components target --accent* rather than reaching the skin-only --secondary/--textHighlight. */ --accent:var(--hue-analysis); --accent-2:var(--hue-reprocess); } /* ------- L2 · SEMANTIC (role-based, theme-aware) -------------------------- */ :root[data-theme="light"] { color-scheme:light; /* the BROWSER chrome (scrollbars, form widgets) follows the theme — DS-wide so all three surfaces behave identically (2026-07-29; the Quartz darkmode plugin used to carry this, but marketing ships without that plugin — the theme is the DS's, so the rule is too) */ --bg:var(--zinc-50); --surface:var(--white); --surface-2:var(--zinc-50); --text:var(--zinc-900); --text-muted:var(--zinc-500); --text-faint:var(--zinc-400); --border:var(--zinc-200); --border-strong:var(--zinc-300); --highlight:var(--zinc-100); --primary:var(--zinc-900); --on-primary:var(--white); --focus-ring:var(--zinc-900); --shadow-sm:0 1px 2px rgba(0,0,0,.06); --shadow-md:0 4px 12px rgba(0,0,0,.08); --shadow-lg:0 12px 40px rgba(0,0,0,.18); --scrim:rgba(0,0,0,.5); /* modal/overlay backdrop — theme-aware, like the shadows (ADR-047 Add.3) */ } :root[data-theme="dark"] { color-scheme:dark; --bg:var(--zinc-950); --surface:var(--zinc-900); --surface-2:var(--zinc-800); --text:var(--zinc-50); --text-muted:var(--zinc-400); --text-faint:var(--zinc-500); --border:var(--zinc-800); --border-strong:var(--zinc-700); --highlight:var(--zinc-800); --primary:var(--zinc-50); --on-primary:var(--zinc-900); --focus-ring:var(--zinc-300); --shadow-sm:0 1px 2px rgba(0,0,0,.5); --shadow-md:0 4px 12px rgba(0,0,0,.5); --shadow-lg:0 12px 40px rgba(0,0,0,.6); --scrim:rgba(0,0,0,.62); /* heavier on dark, matching the shadow ratios (ADR-047 Add.3) */ /* decision #6 — domain hues lifted for legibility on dark bg */ --hue-analysis:#7a94ff; --hue-reprocess:#e05fae; --hue-output:#a7dc5a; --hue-upload:#ffa04d; --hue-amber:#facc15; --hue-danger:#fb4d4d; }