/* Semantic design tokens. * * This is the layer the app is missing today: modern-style.css only defines raw * colour ramps (--primary-500, --gray-200), so every component hardcodes its own * shadows and radii and nothing can be themed. Here colours are named by ROLE * (surface, border, text, accent) instead of by hue, which is what makes dark * mode and the variant switching below possible without touching markup. * * Three axes, all independent and all driven by attributes on : * data-theme = light | dark * data-variant = glass | quiet | bold * data-density = comfortable | compact */ :root { /* ---- Spacing: 4px base, matches Tailwind's scale so the two can coexist */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; /* ---- Radius (variants override these; that alone changes the whole feel) */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 24px; --radius-full: 999px; /* ---- Elevation: one ramp instead of the 27 ad-hoc box-shadows in modern-style.css */ --elev-1: 0 1px 2px rgb(16 24 40 / 0.05); --elev-2: 0 1px 3px rgb(16 24 40 / 0.10), 0 1px 2px rgb(16 24 40 / 0.06); --elev-3: 0 4px 12px rgb(16 24 40 / 0.08), 0 2px 4px rgb(16 24 40 / 0.04); --elev-4: 0 12px 32px rgb(16 24 40 / 0.12), 0 4px 8px rgb(16 24 40 / 0.05); /* ---- Type */ --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif; /* Tabular figures so money and mileage columns align vertically. */ --font-num: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --text-xs: 0.75rem; --text-sm: 0.8125rem; --text-base: 0.875rem; --text-md: 1rem; --text-lg: 1.125rem; --text-xl: 1.375rem; --text-2xl: 1.75rem; --weight-normal: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* ---- Motion. Durations are deliberately short: this is a tool, not a toy. */ --motion-fast: 120ms; --motion-base: 200ms; --motion-slow: 320ms; --ease: cubic-bezier(0.4, 0, 0.2, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* ---- Layout */ --nav-height: 60px; --container-max: 1400px; /* ---- Glass: neutralised by default, switched on by the glass variant only */ --glass-blur: 0px; --glass-opacity: 1; --glass-highlight: transparent; --glass-saturate: 100%; } /* =================================================================== LIGHT THEME (default) =================================================================== */ :root, [data-theme="light"] { color-scheme: light; --canvas: #f6f7f9; --surface: #ffffff; --surface-raised: #ffffff; --surface-sunken: #f2f4f7; --surface-hover: #f6f7f9; --border: #e4e7ec; --border-strong: #d0d5dd; --text: #101828; --text-muted: #475467; --text-subtle: #98a2b3; --text-inverse: #ffffff; --accent: #2563eb; --accent-hover: #1d4ed8; --accent-fg: #ffffff; --accent-soft: #eff6ff; --accent-ring: rgb(37 99 235 / 0.35); --success: #16a34a; --success-soft: #ecfdf3; --warning: #d97706; --warning-soft: #fffaeb; --danger: #dc2626; --danger-soft: #fef3f2; /* cyan-700 rather than -600: the badge text sits on --info-soft at 12px, and * -600 only reaches 3.5:1 there. */ --info: #0e7490; --info-soft: #ecfeff; --nav-bg: var(--surface); --nav-fg: var(--text); --nav-border: var(--border); --skeleton-base: #eaecf0; --skeleton-shine: #f6f7f9; } /* =================================================================== DARK THEME Opt-in via so a user preference can override the OS, which is why the Tailwind dark variant was written as an attribute selector. =================================================================== */ [data-theme="dark"] { color-scheme: dark; --canvas: #0b0f19; --surface: #151a26; --surface-raised: #1b2130; --surface-sunken: #10151f; --surface-hover: #1f2634; --border: #262e3f; --border-strong: #364054; --text: #f0f3f9; --text-muted: #98a2b3; --text-subtle: #667085; --text-inverse: #0b0f19; --accent: #60a5fa; --accent-hover: #93c5fd; --accent-fg: #0b0f19; --accent-soft: rgb(96 165 250 / 0.14); --accent-ring: rgb(96 165 250 / 0.45); --success: #4ade80; --success-soft: rgb(74 222 128 / 0.14); --warning: #fbbf24; --warning-soft: rgb(251 191 36 / 0.14); --danger: #f87171; --danger-soft: rgb(248 113 113 / 0.14); --info: #22d3ee; --info-soft: rgb(34 211 238 / 0.14); --nav-bg: var(--surface); --nav-fg: var(--text); --nav-border: var(--border); --skeleton-base: #1f2634; --skeleton-shine: #2a3242; /* Shadows read as almost nothing on dark backgrounds, so lean on depth via * surface lightness instead and keep only a soft ambient shadow. */ --elev-1: 0 1px 2px rgb(0 0 0 / 0.30); --elev-2: 0 2px 6px rgb(0 0 0 / 0.36); --elev-3: 0 6px 16px rgb(0 0 0 / 0.42); --elev-4: 0 16px 40px rgb(0 0 0 / 0.50); } /* =================================================================== VARIANT A — LIQUID GLASS Translucent chrome, generous radii, vivid accent, specular top highlight. Glass is scoped to fixed chrome only (see components.css); content surfaces stay opaque so text contrast stays predictable and scrolling stays cheap. =================================================================== */ [data-variant="glass"] { --radius-sm: 8px; --radius-md: 12px; --radius-lg: 18px; --radius-xl: 24px; --radius-2xl: 30px; --glass-blur: 20px; --glass-opacity: 0.68; --glass-saturate: 180%; --glass-highlight: rgb(255 255 255 / 0.55); --accent: #3b6ef6; --accent-hover: #2557e0; --accent-ring: rgb(59 110 246 / 0.40); --canvas: #eef1f7; --elev-3: 0 8px 24px rgb(16 24 40 / 0.10), 0 2px 6px rgb(16 24 40 / 0.05); --elev-4: 0 20px 48px rgb(16 24 40 / 0.16), 0 6px 12px rgb(16 24 40 / 0.06); } [data-variant="glass"][data-theme="dark"] { --canvas: #070b13; --glass-opacity: 0.55; --glass-highlight: rgb(255 255 255 / 0.10); --accent: #7aa2ff; --accent-hover: #a5c0ff; } /* =================================================================== VARIANT B — QUIET PRECISION Hairline borders instead of shadows, tight radii, restrained accent. Reads as dense and precise; the right register for tables you stare at all day. =================================================================== */ [data-variant="quiet"] { --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-xl: 10px; --radius-2xl: 12px; --canvas: #fbfbfc; --surface: #ffffff; --border: #e8eaed; --border-strong: #c9cdd3; --accent: #4f46e5; --accent-hover: #4338ca; --accent-soft: #f2f1fe; --accent-ring: rgb(79 70 229 / 0.30); /* Structure comes from borders here, so flatten elevation almost entirely. */ --elev-1: none; --elev-2: 0 1px 2px rgb(16 24 40 / 0.04); --elev-3: 0 2px 6px rgb(16 24 40 / 0.06); --elev-4: 0 8px 24px rgb(16 24 40 / 0.10); --motion-fast: 90ms; --motion-base: 140ms; } [data-variant="quiet"][data-theme="dark"] { --canvas: #0c0d10; --surface: #16181d; --surface-raised: #1c1f26; --border: #23262e; --accent: #a5b4fc; --accent-soft: rgb(165 180 252 / 0.12); } /* =================================================================== VARIANT C — HIGH-CONTRAST WORKSHOP Built for a phone at arm's length in daylight: heavier weights, stronger borders, larger touch targets, saturated status colours. =================================================================== */ [data-variant="bold"] { --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 18px; --canvas: #eceff3; --surface: #ffffff; --border: #cfd5dd; --border-strong: #98a2b3; --text: #000000; --text-muted: #344054; --text-subtle: #667085; --accent: #1d4ed8; --accent-hover: #1739a8; --accent-ring: rgb(29 78 216 / 0.45); --success: #067647; --warning: #b54708; --danger: #b42318; --info: #026aa2; --weight-medium: 600; --weight-semibold: 700; --weight-bold: 800; --nav-bg: #101828; --nav-fg: #ffffff; --nav-border: #101828; --elev-2: 0 2px 4px rgb(16 24 40 / 0.14); --elev-3: 0 4px 10px rgb(16 24 40 / 0.16); } [data-variant="bold"][data-theme="dark"] { --canvas: #000000; --surface: #14181f; --surface-raised: #1b2028; --border: #3a4356; --border-strong: #5b6a85; --text: #ffffff; --nav-bg: #000000; --nav-border: #3a4356; --accent: #82aaff; /* These must be restated, not inherited. The [data-variant="bold"] block * above declares light-mode values for them and, being later in this file, * outranks the generic [data-theme="dark"] block on equal specificity. Left * out, secondary text lands at #344054 on black — a 1.7:1 ratio. */ --text-muted: #c3ccd9; --text-subtle: #9aa5b8; --success: #4ade80; --warning: #fbbf24; --danger: #fb7185; --info: #38bdf8; } /* =================================================================== DENSITY Independent of variant: the same design at two information densities. =================================================================== */ :root, [data-density="comfortable"] { --row-py: var(--space-3); --cell-px: var(--space-4); --card-p: var(--space-5); --control-h: 40px; --row-font: var(--text-base); } [data-density="compact"] { --row-py: 5px; --cell-px: var(--space-3); --card-p: var(--space-4); --control-h: 32px; --row-font: var(--text-sm); }