/* ============================================================================ Brute Info — css/tokens.css The single source of truth for every design decision on this site. Rules for every downstream agent: 1. NEVER hard-code a colour, radius, shadow, duration or font-size in a page stylesheet. Use the custom properties defined here. 2. Raw palette ramps (--violet-500, --slate-300 …) are theme-INDEPENDENT. Semantic tokens (--surface, --text, --primary …) are theme-DEPENDENT and are the ones you should almost always reach for. 3. Dark theme is applied twice, deliberately: :root[data-theme="dark"] -> explicit toggle @media (prefers-color-scheme: dark) :root:not([data-theme="light"]) The two blocks are byte-identical. Change one, change the other. 4. Four appearance switches live on and are written by js/settings.js -> applySettings(). All four are pure variable swaps: data-theme = "light" | "dark" (absent = follow the system) data-accent = "indigo" | "violet" | "emerald" | "amber" | "rose" data-density = "comfortable" | "compact" data-contrast = "high" (absent = normal) style="--font-scale: 0.9 … 1.2" Never write a page rule that depends on those attributes; consume the tokens they swap instead. ========================================================================== */ :root { /* ------------------------------------------------------------------ * * 1. RAW PALETTE — theme independent * ------------------------------------------------------------------ */ /* Brand: deep indigo / violet */ --violet-50: #f1f0ff; --violet-100: #e5e3ff; --violet-200: #cdc9ff; --violet-300: #ada5ff; --violet-400: #8b7bff; --violet-500: #6a5af0; --violet-600: #5842d6; --violet-700: #4733ad; --violet-800: #3a2c8a; --violet-900: #2b2168; --violet-950: #191243; /* Accent: warm amber */ --amber-50: #fff8eb; --amber-100: #ffefc9; --amber-200: #ffdd8f; --amber-300: #ffc652; --amber-400: #ffb020; --amber-500: #f59e0b; --amber-600: #d97d06; --amber-700: #b45c09; --amber-800: #92470e; --amber-900: #783a0f; /* Success: emerald */ --green-50: #ecfdf5; --green-100: #d1fae5; --green-200: #a7f3d0; --green-300: #6ee7b7; --green-400: #34d399; --green-500: #10b981; --green-600: #059669; --green-700: #047857; --green-800: #065f46; --green-900: #064e3b; /* Danger: rose */ --red-50: #fef2f2; --red-100: #fee2e2; --red-200: #fecaca; --red-300: #fca5a5; --red-400: #f87171; --red-500: #ef4444; --red-600: #dc2626; --red-700: #b91c1c; --red-800: #991b1b; --red-900: #7f1d1d; /* Info: sky */ --sky-50: #eff8ff; --sky-100: #dbeefe; --sky-200: #b9e0fe; --sky-300: #7cc9fd; --sky-400: #37adf8; --sky-500: #0d92e9; --sky-600: #0173c7; --sky-700: #025ca1; --sky-800: #064e85; --sky-900: #0b426e; /* Neutral ramp — very slightly blue-tinted "cool slate" */ --slate-0: #ffffff; --slate-25: #fbfcfe; --slate-50: #f7f8fb; --slate-100: #eef1f6; --slate-150: #e6eaf2; --slate-200: #dbe0ea; --slate-300: #c3cad9; --slate-400: #97a0b3; --slate-500: #6f7889; --slate-600: #545c6d; --slate-700: #3e4555; --slate-750: #313747; --slate-800: #262b3a; --slate-850: #1d212d; --slate-900: #161a24; --slate-950: #0e111a; --slate-1000:#090b12; /* ------------------------------------------------------------------ * * 2. TYPOGRAPHY * ------------------------------------------------------------------ */ --font-sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif; --font-display: var(--font-sans); --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", "Courier New", monospace; /* Reader-controlled multiplier, 0.9 – 1.2. base.css turns it into the root font-size, so every rem-based measurement scales with it. */ --font-scale: 1; /* Type scale — 1rem base, ~1.2 modular with fluid display sizes */ --fs-2xs: 0.6875rem; /* 11px — micro labels */ --fs-xs: 0.75rem; /* 12px — badges, captions */ --fs-sm: 0.8125rem; /* 13px — dense UI text */ --fs-md: 0.875rem; /* 14px — default UI text */ --fs-base: 1rem; /* 16px — body copy */ --fs-lg: 1.0625rem; /* 17px — lead paragraph */ --fs-xl: 1.25rem; /* 20px — h5 / card title */ --fs-2xl: 1.5rem; /* 24px — h4 */ --fs-3xl: 1.875rem; /* 30px — h3 */ --fs-4xl: clamp(1.75rem, 1.35rem + 1.6vw, 2.375rem); /* h2 */ --fs-5xl: clamp(2.125rem, 1.5rem + 2.6vw, 3.25rem); /* h1 */ --fs-6xl: clamp(2.5rem, 1.5rem + 4.2vw, 4.25rem); /* hero display */ --lh-none: 1; --lh-tight: 1.15; --lh-snug: 1.3; --lh-base: 1.55; --lh-relaxed: 1.7; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-extrabold: 800; --tracking-tighter: -0.03em; --tracking-tight: -0.018em; --tracking-normal: 0em; --tracking-wide: 0.02em; --tracking-wider: 0.08em; /* ------------------------------------------------------------------ * * 3. SPACING — 4px base * ------------------------------------------------------------------ */ --space-0: 0; --space-1: 0.25rem; /* 4 */ --space-2: 0.5rem; /* 8 */ --space-3: 0.75rem; /* 12 */ --space-4: 1rem; /* 16 */ --space-5: 1.25rem; /* 20 */ --space-6: 1.5rem; /* 24 */ --space-7: 1.75rem; /* 28 */ --space-8: 2rem; /* 32 */ --space-10: 2.5rem; /* 40 */ --space-12: 3rem; /* 48 */ --space-14: 3.5rem; /* 56 */ --space-16: 4rem; /* 64 */ --space-20: 5rem; /* 80 */ --space-24: 6rem; /* 96 */ --space-32: 8rem; /* 128 */ /* Vertical rhythm for
, scaled by density */ --section-y: calc(clamp(3.5rem, 2rem + 5vw, 6.5rem) * var(--density-scale)); --section-y-tight: calc(clamp(2.25rem, 1.5rem + 3vw, 3.75rem) * var(--density-scale)); /* ------------------------------------------------------------------ * * 4. LAYOUT * ------------------------------------------------------------------ */ --container-max: 1200px; --container-wide: 1360px; --container-narrow: 720px; --container-pad: clamp(1rem, 0.55rem + 2vw, 2rem); --header-h: 68px; --header-h-compact: 60px; --z-base: 1; --z-sticky: 100; --z-header: 200; --z-drawer: 300; --z-dropdown: 400; --z-modal: 500; --z-toast: 600; /* ------------------------------------------------------------------ * * 5. RADII * ------------------------------------------------------------------ */ --radius-xs: 4px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 20px; --radius-2xl: 28px; --radius-3xl: 36px; --radius-full: 999px; /* ------------------------------------------------------------------ * * 6. MOTION * ------------------------------------------------------------------ */ --dur-instant: 80ms; --dur-fast: 140ms; --dur-base: 220ms; --dur-slow: 340ms; --dur-slower: 560ms; --ease-standard: cubic-bezier(0.2, 0, 0, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in: cubic-bezier(0.5, 0, 0.9, 0.3); --ease-spring: cubic-bezier(0.34, 1.4, 0.5, 1); /* ------------------------------------------------------------------ * * 7. DENSITY — comfortable is the default; see the [data-density] block * Components must size themselves from these, never from raw rems. * ------------------------------------------------------------------ */ --density-scale: 1; --control-h: 2.625rem; /* 42px — .btn, .input, .select */ --control-h-sm: 2.125rem; /* 34px */ --control-h-lg: 3.125rem; /* 50px */ --control-px: 1.25rem; --control-px-sm: 0.75rem; --control-px-lg: 1.75rem; --card-pad: 1.5rem; /* .card-body, .panel */ --card-pad-tight: 1rem; --card-head-py: 1.25rem; --row-py: 0.75rem; /* table + list rows */ --row-px: 1.25rem; --stack-gap: 1rem; /* default gap inside a stacked block */ --field-gap: 1.25rem; /* gap between form fields */ --tile-gap: 1.5rem; /* gap between cards in a grid */ } /* ========================================================================== * 8. ACCENT PALETTES * A palette only ever redefines the --a-* ramp. Every brand-coloured * semantic token in every theme is expressed in terms of --a-*, so one * attribute on repaints the whole product in both themes. * --a-600 is the light-theme primary (>= 4.5:1 on white) * --a-400 is the dark-theme primary (>= 4.5:1 on #0b0d14) * --a-950 is the ink used on top of the dark-theme primary * ========================================================================== */ :root, :root[data-accent="indigo"] { --a-50: #eef2ff; --a-100: #e0e7ff; --a-200: #c7d2fe; --a-300: #a5b4fc; --a-400: #818cf8; --a-500: #6366f1; --a-600: #4f46e5; --a-700: #4338ca; --a-800: #3730a3; --a-900: #2c2782; --a-950: #1a1747; } :root[data-accent="violet"] { --a-50: #f1f0ff; --a-100: #e5e3ff; --a-200: #cdc9ff; --a-300: #ada5ff; --a-400: #8b7bff; --a-500: #6a5af0; --a-600: #5842d6; --a-700: #4733ad; --a-800: #3a2c8a; --a-900: #2b2168; --a-950: #191243; } :root[data-accent="emerald"] { --a-50: #ecfdf5; --a-100: #d1fae5; --a-200: #a7f3d0; --a-300: #6ee7b7; --a-400: #34d399; --a-500: #0f9f74; --a-600: #047857; --a-700: #036249; --a-800: #04503c; --a-900: #063f31; --a-950: #022c22; } /* The amber palette also retunes the secondary highlight to indigo, so the two brand colours never collapse into one hue. */ :root[data-accent="amber"] { --a-50: #fff8eb; --a-100: #ffefc9; --a-200: #ffdd8f; --a-300: #ffc652; --a-400: #f5a524; --a-500: #d97d06; --a-600: #b45309; --a-700: #92400e; --a-800: #78350f; --a-900: #5c2a0c; --a-950: #2b1a03; --accent: var(--sky-600); --accent-hover: var(--sky-700); --accent-contrast: #ffffff; --accent-soft: var(--sky-50); --accent-soft-text: var(--sky-800); --accent-border: var(--sky-200); } :root[data-accent="rose"] { --a-50: #fff1f2; --a-100: #ffe4e6; --a-200: #fecdd3; --a-300: #fda4af; --a-400: #fb7185; --a-500: #f43f5e; --a-600: #e11d48; --a-700: #be123c; --a-800: #9f1239; --a-900: #881337; --a-950: #4c0519; } /* ========================================================================== * 9. SEMANTIC TOKENS — LIGHT THEME (default) * ========================================================================== */ :root { color-scheme: light; /* Surfaces */ --bg: var(--slate-50); --bg-gradient-stop: #eef0fb; --surface: var(--slate-0); --surface-2: var(--slate-100); --surface-3: var(--slate-150); --surface-inset: var(--slate-50); --surface-raised: var(--slate-0); --surface-overlay: rgba(255, 255, 255, 0.82); --surface-invert: var(--slate-900); /* Lines */ --border: #e3e7f0; --border-strong: #ccd3e1; --border-subtle: #eef1f7; /* Text */ --text: #131728; --text-muted: #565f73; --text-subtle: #7c8598; --text-inverse: #ffffff; --text-on-brand: #ffffff; /* Brand / primary — driven entirely by the --a-* ramp */ --primary: var(--a-600); --primary-hover: var(--a-700); --primary-active: var(--a-800); --primary-contrast: #ffffff; --primary-soft: var(--a-50); --primary-soft-hover: var(--a-100); --primary-soft-text: var(--a-700); --primary-border: var(--a-200); /* Secondary highlight (fixed warm amber, retuned by the amber palette) */ --accent: var(--amber-500); --accent-hover: var(--amber-600); --accent-contrast: #3a2205; --accent-soft: var(--amber-50); --accent-soft-text: var(--amber-800); --accent-border: var(--amber-200); /* Status */ --success: var(--green-600); --success-soft: var(--green-50); --success-soft-text: var(--green-800); --success-border: var(--green-200); --warn: var(--amber-600); --warn-soft: var(--amber-50); --warn-soft-text: var(--amber-800); --warn-border: var(--amber-200); --danger: var(--red-600); --danger-hover: var(--red-700); --danger-soft: var(--red-50); --danger-soft-text: var(--red-700); --danger-border: var(--red-200); --info: var(--sky-600); --info-soft: var(--sky-50); --info-soft-text: var(--sky-800); --info-border: var(--sky-200); /* Interaction */ --ring-w: 3px; --ring: 0 0 0 var(--ring-w) color-mix(in srgb, var(--a-500) 34%, transparent); --ring-danger: 0 0 0 var(--ring-w) color-mix(in srgb, var(--red-500) 30%, transparent); --focus-ring-color: var(--a-600); --selection-bg: var(--a-200); --selection-fg: var(--a-900); --overlay-scrim: rgba(15, 18, 34, 0.5); /* Shadows — layered, tinted navy, never pure black */ --shadow-xs: 0 1px 1px rgba(17, 22, 44, 0.04), 0 1px 2px rgba(17, 22, 44, 0.05); --shadow-sm: 0 1px 2px rgba(17, 22, 44, 0.05), 0 2px 5px rgba(17, 22, 44, 0.06); --shadow-md: 0 2px 4px rgba(17, 22, 44, 0.05), 0 6px 14px rgba(17, 22, 44, 0.08); --shadow-lg: 0 4px 8px rgba(17, 22, 44, 0.05), 0 14px 30px rgba(17, 22, 44, 0.10); --shadow-xl: 0 8px 16px rgba(17, 22, 44, 0.06), 0 26px 56px rgba(17, 22, 44, 0.13); --shadow-brand: 0 6px 16px color-mix(in srgb, var(--a-600) 24%, transparent), 0 2px 4px color-mix(in srgb, var(--a-600) 18%, transparent); --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.6); /* Gradients */ --grad-brand: linear-gradient(135deg, var(--a-400) 0%, var(--a-600) 55%, var(--a-700) 100%); --grad-brand-warm: linear-gradient(135deg, var(--a-400) 0%, var(--a-600) 48%, var(--amber-500) 130%); --grad-accent: linear-gradient(135deg, var(--amber-300) 0%, var(--amber-500) 60%, var(--amber-600) 100%); --grad-surface: linear-gradient(180deg, #ffffff 0%, #f7f8fb 100%); --grad-text: linear-gradient(100deg, var(--a-700) 0%, var(--a-500) 45%, var(--amber-600) 100%); --grad-mesh: radial-gradient(60% 55% at 12% 8%, color-mix(in srgb, var(--a-400) 30%, transparent) 0%, transparent 60%), radial-gradient(50% 50% at 88% 4%, rgba(245, 158, 11, 0.20) 0%, transparent 62%), radial-gradient(70% 60% at 62% 96%, color-mix(in srgb, var(--a-600) 16%, transparent) 0%, transparent 66%); /* Decorative */ --grid-line: rgba(19, 23, 40, 0.055); --glass-blur: 14px; --scrollbar-thumb: #c8cfdd; --scrollbar-thumb-hover: #aeb7ca; --scrollbar-track: transparent; --skeleton-base: #e9edf4; --skeleton-shine: #f6f8fc; /* Syntax colours for .code (see components.css) */ --code-bg: #f8f9fd; --code-fg: #2b3145; --code-gutter: #a3abbd; --tok-comment: #7b849a; --tok-keyword: #7c3aed; --tok-string: #0f7b5f; --tok-number: #b45309; --tok-func: #0d6bc4; --tok-type: #b3266b; --tok-op: #566078; --tok-punct: #8b93a7; } /* ========================================================================== * * 10. SEMANTIC TOKENS — DARK THEME * Block A: the user explicitly chose dark. * Block B: the OS asked for dark and the user has not chosen light. * The two bodies are generated from one source. Keep them identical. * ========================================================================== */ :root[data-theme="dark"] { color-scheme: dark; --bg: #0b0d14; --bg-gradient-stop: #10121d; --surface: #12141d; --surface-2: #191c27; --surface-3: #222634; --surface-inset: #0e1017; --surface-raised: #171a24; --surface-overlay: rgba(18, 20, 29, 0.78); --surface-invert: var(--slate-50); --border: #262b3a; --border-strong: #39415a; --border-subtle: #1d2130; --text: #edeff6; --text-muted: #a4acbf; --text-subtle: #7a8298; --text-inverse: #0b0d14; --text-on-brand: #ffffff; --primary: var(--a-400); --primary-hover: var(--a-300); --primary-active: var(--a-500); --primary-contrast: var(--a-950); --primary-soft: color-mix(in srgb, var(--a-400) 15%, transparent); --primary-soft-hover: color-mix(in srgb, var(--a-400) 24%, transparent); --primary-soft-text: var(--a-200); --primary-border: color-mix(in srgb, var(--a-400) 34%, transparent); --accent: #ffb020; --accent-hover: #ffc652; --accent-contrast: #2b1a03; --accent-soft: rgba(255, 176, 32, 0.14); --accent-soft-text: #ffd489; --accent-border: rgba(255, 176, 32, 0.32); --success: #34d399; --success-soft: rgba(52, 211, 153, 0.14); --success-soft-text: #86efc5; --success-border: rgba(52, 211, 153, 0.30); --warn: #fbbf3c; --warn-soft: rgba(251, 191, 60, 0.14); --warn-soft-text: #ffd98a; --warn-border: rgba(251, 191, 60, 0.30); --danger: #f87171; --danger-hover: #fb8f8f; --danger-soft: rgba(248, 113, 113, 0.14); --danger-soft-text: #fcabab; --danger-border: rgba(248, 113, 113, 0.30); --info: #56b8fb; --info-soft: rgba(86, 184, 251, 0.14); --info-soft-text: #a6d9fd; --info-border: rgba(86, 184, 251, 0.30); --ring-w: 3px; --ring: 0 0 0 var(--ring-w) color-mix(in srgb, var(--a-400) 45%, transparent); --ring-danger: 0 0 0 var(--ring-w) rgba(248, 113, 113, 0.38); --focus-ring-color: var(--a-300); --selection-bg: color-mix(in srgb, var(--a-400) 38%, transparent); --selection-fg: #ffffff; --overlay-scrim: rgba(4, 5, 10, 0.66); --shadow-xs: 0 1px 1px rgba(0, 0, 0, 0.28), 0 1px 2px rgba(0, 0, 0, 0.22); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.30), 0 2px 6px rgba(0, 0, 0, 0.26); --shadow-md: 0 2px 5px rgba(0, 0, 0, 0.32), 0 8px 18px rgba(0, 0, 0, 0.34); --shadow-lg: 0 6px 14px rgba(0, 0, 0, 0.36), 0 18px 40px rgba(0, 0, 0, 0.42); --shadow-xl: 0 10px 24px rgba(0, 0, 0, 0.40), 0 34px 68px rgba(0, 0, 0, 0.50); --shadow-brand: 0 6px 18px color-mix(in srgb, var(--a-600) 46%, transparent), 0 2px 6px rgba(0, 0, 0, 0.36); --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.06); --grad-brand: linear-gradient(135deg, var(--a-400) 0%, var(--a-500) 55%, var(--a-600) 100%); --grad-brand-warm: linear-gradient(135deg, var(--a-300) 0%, var(--a-500) 48%, var(--amber-400) 130%); --grad-accent: linear-gradient(135deg, #ffd489 0%, #ffb020 60%, #d97d06 100%); --grad-surface: linear-gradient(180deg, #171a24 0%, #12141d 100%); --grad-text: linear-gradient(100deg, var(--a-200) 0%, var(--a-400) 45%, var(--amber-300) 100%); --grad-mesh: radial-gradient(60% 55% at 12% 8%, color-mix(in srgb, var(--a-500) 34%, transparent) 0%, transparent 60%), radial-gradient(50% 50% at 88% 4%, rgba(245, 158, 11, 0.16) 0%, transparent 62%), radial-gradient(70% 60% at 62% 96%, color-mix(in srgb, var(--a-700) 34%, transparent) 0%, transparent 66%); --grid-line: rgba(233, 238, 250, 0.05); --scrollbar-thumb: #333a4d; --scrollbar-thumb-hover: #454e66; --scrollbar-track: transparent; --skeleton-base: #1d2130; --skeleton-shine: #272c3c; --code-bg: #0f111a; --code-fg: #d7dcea; --code-gutter: #565f78; --tok-comment: #6f7a94; --tok-keyword: #c4b5fd; --tok-string: #7ee0b8; --tok-number: #ffc652; --tok-func: #7cc9fd; --tok-type: #f9a8d4; --tok-op: #9aa3ba; --tok-punct: #77809a; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --bg: #0b0d14; --bg-gradient-stop: #10121d; --surface: #12141d; --surface-2: #191c27; --surface-3: #222634; --surface-inset: #0e1017; --surface-raised: #171a24; --surface-overlay: rgba(18, 20, 29, 0.78); --surface-invert: var(--slate-50); --border: #262b3a; --border-strong: #39415a; --border-subtle: #1d2130; --text: #edeff6; --text-muted: #a4acbf; --text-subtle: #7a8298; --text-inverse: #0b0d14; --text-on-brand: #ffffff; --primary: var(--a-400); --primary-hover: var(--a-300); --primary-active: var(--a-500); --primary-contrast: var(--a-950); --primary-soft: color-mix(in srgb, var(--a-400) 15%, transparent); --primary-soft-hover: color-mix(in srgb, var(--a-400) 24%, transparent); --primary-soft-text: var(--a-200); --primary-border: color-mix(in srgb, var(--a-400) 34%, transparent); --accent: #ffb020; --accent-hover: #ffc652; --accent-contrast: #2b1a03; --accent-soft: rgba(255, 176, 32, 0.14); --accent-soft-text: #ffd489; --accent-border: rgba(255, 176, 32, 0.32); --success: #34d399; --success-soft: rgba(52, 211, 153, 0.14); --success-soft-text: #86efc5; --success-border: rgba(52, 211, 153, 0.30); --warn: #fbbf3c; --warn-soft: rgba(251, 191, 60, 0.14); --warn-soft-text: #ffd98a; --warn-border: rgba(251, 191, 60, 0.30); --danger: #f87171; --danger-hover: #fb8f8f; --danger-soft: rgba(248, 113, 113, 0.14); --danger-soft-text: #fcabab; --danger-border: rgba(248, 113, 113, 0.30); --info: #56b8fb; --info-soft: rgba(86, 184, 251, 0.14); --info-soft-text: #a6d9fd; --info-border: rgba(86, 184, 251, 0.30); --ring-w: 3px; --ring: 0 0 0 var(--ring-w) color-mix(in srgb, var(--a-400) 45%, transparent); --ring-danger: 0 0 0 var(--ring-w) rgba(248, 113, 113, 0.38); --focus-ring-color: var(--a-300); --selection-bg: color-mix(in srgb, var(--a-400) 38%, transparent); --selection-fg: #ffffff; --overlay-scrim: rgba(4, 5, 10, 0.66); --shadow-xs: 0 1px 1px rgba(0, 0, 0, 0.28), 0 1px 2px rgba(0, 0, 0, 0.22); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.30), 0 2px 6px rgba(0, 0, 0, 0.26); --shadow-md: 0 2px 5px rgba(0, 0, 0, 0.32), 0 8px 18px rgba(0, 0, 0, 0.34); --shadow-lg: 0 6px 14px rgba(0, 0, 0, 0.36), 0 18px 40px rgba(0, 0, 0, 0.42); --shadow-xl: 0 10px 24px rgba(0, 0, 0, 0.40), 0 34px 68px rgba(0, 0, 0, 0.50); --shadow-brand: 0 6px 18px color-mix(in srgb, var(--a-600) 46%, transparent), 0 2px 6px rgba(0, 0, 0, 0.36); --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.06); --grad-brand: linear-gradient(135deg, var(--a-400) 0%, var(--a-500) 55%, var(--a-600) 100%); --grad-brand-warm: linear-gradient(135deg, var(--a-300) 0%, var(--a-500) 48%, var(--amber-400) 130%); --grad-accent: linear-gradient(135deg, #ffd489 0%, #ffb020 60%, #d97d06 100%); --grad-surface: linear-gradient(180deg, #171a24 0%, #12141d 100%); --grad-text: linear-gradient(100deg, var(--a-200) 0%, var(--a-400) 45%, var(--amber-300) 100%); --grad-mesh: radial-gradient(60% 55% at 12% 8%, color-mix(in srgb, var(--a-500) 34%, transparent) 0%, transparent 60%), radial-gradient(50% 50% at 88% 4%, rgba(245, 158, 11, 0.16) 0%, transparent 62%), radial-gradient(70% 60% at 62% 96%, color-mix(in srgb, var(--a-700) 34%, transparent) 0%, transparent 66%); --grid-line: rgba(233, 238, 250, 0.05); --scrollbar-thumb: #333a4d; --scrollbar-thumb-hover: #454e66; --scrollbar-track: transparent; --skeleton-base: #1d2130; --skeleton-shine: #272c3c; --code-bg: #0f111a; --code-fg: #d7dcea; --code-gutter: #565f78; --tok-comment: #6f7a94; --tok-keyword: #c4b5fd; --tok-string: #7ee0b8; --tok-number: #ffc652; --tok-func: #7cc9fd; --tok-type: #f9a8d4; --tok-op: #9aa3ba; --tok-punct: #77809a; } } /* ========================================================================== * 11. DENSITY — [data-density="compact"] on * Only sizing tokens change. No component needs a density-aware rule. * ========================================================================== */ :root[data-density="compact"] { --density-scale: 0.8; --control-h: 2.25rem; /* 36px */ --control-h-sm: 1.875rem; /* 30px */ --control-h-lg: 2.75rem; /* 44px */ --control-px: 0.875rem; --control-px-sm: 0.625rem; --control-px-lg: 1.25rem; --card-pad: 1rem; --card-pad-tight: 0.75rem; --card-head-py: 0.875rem; --row-py: 0.5rem; --row-px: 0.875rem; --stack-gap: 0.75rem; --field-gap: 0.875rem; --tile-gap: 1rem; --header-h: 60px; --header-h-compact: 54px; --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 22px; } :root[data-density="comfortable"] { --density-scale: 1; } /* ========================================================================== * * 11b. HIGH CONTRAST — [data-contrast="high"] on * Heavier lines, ink-black/paper-white text, flat shadows and a wider * focus ring. base.css adds the two structural rules that go with it. * ========================================================================== */ :root[data-contrast="high"] { --border: #6b7385; --border-strong: #2c3445; --border-subtle: #98a0b1; --text: #000000; --text-muted: #2a3040; --text-subtle: #3d4457; --surface-2: #eceff5; --surface-3: #dfe3ec; --primary: var(--a-700); --primary-hover: var(--a-800); --primary-soft-text: var(--a-800); --primary-border: var(--a-600); --success: #036249; --success-soft-text: #023d2e; --warn: #92400e; --warn-soft-text: #5c2a0c; --danger: #b91c1c; --danger-soft-text: #7f1d1d; --info: #025ca1; --info-soft-text: #06375f; --text-subtle-on-soft: #000000; --ring-w: 4px; --shadow-xs: 0 0 0 1px var(--border-strong); --shadow-sm: 0 0 0 1px var(--border-strong); --shadow-md: 0 0 0 1px var(--border-strong); --shadow-lg: 0 0 0 2px var(--border-strong); --shadow-xl: 0 0 0 2px var(--border-strong); --shadow-brand: 0 0 0 2px var(--primary); --grid-line: rgba(19, 23, 40, 0.12); } :root[data-contrast="high"][data-theme="dark"] { --border: #7d879f; --border-strong: #b6bed2; --border-subtle: #5b647c; --text: #ffffff; --text-muted: #dfe4ef; --text-subtle: #c3cad9; --surface: #0d0f17; --surface-2: #171a25; --surface-3: #212636; --primary: var(--a-300); --primary-hover: var(--a-200); --primary-soft-text: var(--a-100); --primary-border: var(--a-300); --success: #6ee7b7; --success-soft-text: #bdf5de; --warn: #ffd489; --warn-soft-text: #ffe7bb; --danger: #fca5a5; --danger-soft-text: #fed7d7; --info: #7cc9fd; --info-soft-text: #c6e8fe; --ring-w: 4px; --shadow-xs: 0 0 0 1px var(--border); --shadow-sm: 0 0 0 1px var(--border); --shadow-md: 0 0 0 1px var(--border); --shadow-lg: 0 0 0 2px var(--border); --shadow-xl: 0 0 0 2px var(--border); --shadow-brand: 0 0 0 2px var(--primary); --grid-line: rgba(233, 238, 250, 0.14); } @media (prefers-color-scheme: dark) { :root[data-contrast="high"]:not([data-theme="light"]) { --border: #7d879f; --border-strong: #b6bed2; --border-subtle: #5b647c; --text: #ffffff; --text-muted: #dfe4ef; --text-subtle: #c3cad9; --surface: #0d0f17; --surface-2: #171a25; --surface-3: #212636; --primary: var(--a-300); --primary-hover: var(--a-200); --primary-soft-text: var(--a-100); --primary-border: var(--a-300); --success: #6ee7b7; --success-soft-text: #bdf5de; --warn: #ffd489; --warn-soft-text: #ffe7bb; --danger: #fca5a5; --danger-soft-text: #fed7d7; --info: #7cc9fd; --info-soft-text: #c6e8fe; --ring-w: 4px; --shadow-xs: 0 0 0 1px var(--border); --shadow-sm: 0 0 0 1px var(--border); --shadow-md: 0 0 0 1px var(--border); --shadow-lg: 0 0 0 2px var(--border); --shadow-xl: 0 0 0 2px var(--border); --shadow-brand: 0 0 0 2px var(--primary); --grid-line: rgba(233, 238, 250, 0.14); } } /* ========================================================================== * 12. FORCED COLORS — respect the OS high-contrast mode as well * ========================================================================== */ @media (forced-colors: active) { :root { --shadow-xs: none; --shadow-sm: none; --shadow-md: none; --shadow-lg: none; --shadow-xl: none; --shadow-brand: none; --border: CanvasText; --border-strong: CanvasText; } }