/* AUTO-GENERATED from design-system/ — do not edit here. Edit the master in design-system/, then run: node design-system/sync-to-extension.js */ /* ============================================================================ LLM Masker — Design Tokens (single source of truth · shared) ---------------------------------------------------------------------------- Canonical home: design-system/tokens.css (repo root). Shared by the Chrome extension AND the website. Edit ONLY this master, then run: node design-system/sync-to-extension.js to push the runtime copy into the extension (which must be self-contained for Chrome). Every color, font, radius, shadow and motion value lives here. Do NOT hardcode hex/rgba in component CSS — reference a token below. Layers: 1. Color primitives — the raw palette. Prefer the semantic roles in (2). 2. Semantic roles — meaning-based colors used by components. 3. Typography — families, weights, type scale. 4. Spacing — 4px grid. 5. Radii. 6. Elevation & glow. 7. Motion. 8. Component aliases — short names the current components consume. ============================================================================ */ :root { /* ===== 1 · COLOR PRIMITIVES ================================================ RGB triplets are provided for alpha composition: rgba(var(--rgb-lime), .1) */ --graphite-900: #131518; --graphite-850: #17191c; --graphite-800: #1c1f23; --graphite-700: #24282d; --graphite-600: #2a2e33; --lime-500: #c6f24e; /* brand */ --lime-300: #edf7ce; /* soft wash */ --lime-800: #3a4527; /* dim (bars, muted lime) */ --lime-900: #4a5522; /* deep (text on lime) */ --mint-500: #35d68a; /* live / safe / on-device */ --mint-200: #8fd6b0; --mint-900: #1c2f24; --ink-100: #f0f2ee; /* brightest text */ --grey-100: #c8cec4; /* body text */ --grey-300: #9aa39b; /* muted text */ --grey-400: #8b9088; /* subtle text / disabled knob */ --grey-500: #858b7f; /* faint text — 4.7:1 on raised panels (WCAG AA) */ --white: #ffffff; --paper: #f1f2ee; /* light background — website */ --rgb-lime: 198, 242, 78; --rgb-mint: 53, 214, 138; --rgb-black: 0, 0, 0; --rgb-white: 255, 255, 255; /* ===== 2 · SEMANTIC COLOR ROLES ========================================== */ --surface-base: var(--graphite-850); /* app / popup background */ --surface-deep: var(--graphite-900); /* deepest panel */ --surface-raised: var(--graphite-800); /* cards, rows, tiles */ --border: var(--graphite-700); --border-strong: var(--graphite-600); --hairline: rgba(var(--rgb-white), 0.14); /* light edge on dark surfaces (e.g. the popup frame) */ --brand: var(--lime-500); /* identity + primary action */ --brand-ink: var(--graphite-850); /* text/icon on a brand fill */ --brand-dim: var(--lime-800); --brand-deep: var(--lime-900); --brand-soft: var(--lime-300); --accent: var(--mint-500); /* status: live / safe / on-device */ --accent-surface: var(--mint-900); --accent-text: var(--mint-200); --text: var(--ink-100); --text-body: var(--grey-100); --text-muted: var(--grey-300); --text-subtle: var(--grey-400); --text-faint: var(--grey-500); --state-off: var(--graphite-600); /* disabled toggle track */ --state-off-knob: var(--grey-400); --website-bg: var(--paper); /* ===== 3 · TYPOGRAPHY ===================================================== */ --font-display: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif; /* headings, numbers */ --font-sans: 'Hanken Grotesk', 'Segoe UI', system-ui, sans-serif; /* UI + body */ --font-mono: 'JetBrains Mono', Consolas, monospace; /* timestamps, counts */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* Type scale (px). Fine-tune per component but pick from this ramp. */ --text-2xs: 9.5px; --text-xs: 10.5px; --text-sm: 11.5px; --text-base: 13px; --text-md: 15px; --text-lg: 16px; --text-xl: 21px; --text-2xl: 26px; --text-3xl: 34px; --text-display: 58px; --leading-tight: 1.15; --leading-snug: 1.4; --leading-normal: 1.6; --tracking-tight: -0.02em; --tracking-wide: 0.09em; /* ===== 4 · SPACING (4px grid) ============================================ */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; /* ===== 5 · RADII ========================================================= */ --radius-xs: 4px; --radius-sm: 7px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 18px; --radius-2xl: 22px; --radius-pill: 999px; /* ===== 6 · ELEVATION & GLOW ============================================== */ --shadow-sm: 0 10px 22px -12px rgba(var(--rgb-black), 0.5); --shadow-md: 0 20px 44px -16px rgba(var(--rgb-black), 0.5); --shadow-lg: 0 24px 60px -24px rgba(var(--rgb-black), 0.55); --glow-brand: 0 16px 34px -10px rgba(var(--rgb-lime), 0.45); --glow-muted: 0 16px 34px -10px rgba(var(--rgb-black), 0.4); /* brand glow, de-energized (paused) */ --tint-brand: rgba(var(--rgb-lime), 0.06); /* faint brand wash behind heroes */ --tint-brand-strong: rgba(var(--rgb-lime), 0.08); /* hover / emphasis wash */ --sheen: rgba(var(--rgb-white), 0.35); /* moving highlight on brand fills */ /* ===== 7 · MOTION ======================================================== */ --ease-standard: ease; --dur-fast: 0.16s; --dur-med: 0.25s; --float-amp: -7px; /* mask hover travel */ /* ===== 8 · COMPONENT ALIASES ============================================= * * Short names the current extension components reference. Keep these mapped * to the semantic roles above so components never touch a primitive directly.*/ --bg: var(--surface-base); --bg-deep: var(--surface-deep); --panel: var(--surface-raised); --line: var(--border); --line-strong: var(--border-strong); --lime: var(--brand); --lime-dim: var(--brand-dim); --lime-deep: var(--brand-deep); --mint: var(--accent); --mint-bg: var(--accent-surface); --mint-text: var(--accent-text); --ink: var(--text); --body: var(--text-body); --muted: var(--text-muted); --faint: var(--text-faint); --off: var(--state-off); --off-knob: var(--state-off-knob); --sans: var(--font-sans); --display: var(--font-display); --mono: var(--font-mono); }