/* ========================================================================== Design tokens. Matches the approved dark mockup, with a light variant. Swap by setting [data-theme="light"] or [data-theme="dark"] on . ========================================================================== */ :root, [data-theme="dark"] { color-scheme: dark; /* Surface */ --bg-app: #1a1a1a; --bg-surface: #2c2c2c; --bg-surface-2: #353535; --bg-sunken: #222; --border: #3a3a3a; --border-strong: #4a4a4a; /* Text */ --text: #e8e8e8; --text-muted: #999; --text-subtle: #777; --text-inverse: #1a1a1a; /* Accents */ --accent-blue: #0c447c; --accent-blue-soft: #042c53; --accent-blue-ink: #85b7eb; --accent-blue-text: #b5d4f4; --accent-amber: #633806; --accent-amber-soft: #412402; --accent-amber-ink: #fac775; --accent-green: #1d9e75; --accent-green-soft: #0f5f43; --accent-green-ink: #5dcaa5; --accent-red: #e24b4a; --accent-red-soft: #501313; --accent-red-ink: #f09595; /* Progress bar */ --progress-track: #444; --progress-fill: var(--accent-green); /* Inputs */ --input-bg: #1f1f1f; --input-border: #3a3a3a; --input-focus: var(--accent-blue-ink); /* Radii / spacing / shadow */ --radius-xs: 4px; --radius-sm: 8px; --radius-md: 10px; --radius-lg: 14px; --radius-pill: 999px; --shadow-md: 0 4px 24px rgba(0,0,0,0.4); /* Type */ --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; /* Layout */ --content-max: 760px; --nav-height: 64px; --header-height: 52px; } [data-theme="light"] { color-scheme: light; --bg-app: #f3f4f6; --bg-surface: #ffffff; --bg-surface-2: #f8f9fb; --bg-sunken: #eef0f4; --border: #e2e5ea; --border-strong: #c8cdd4; --text: #1a1a1a; --text-muted: #5a6270; --text-subtle: #828a95; --text-inverse: #ffffff; --accent-blue: #1c5bb5; --accent-blue-soft: #e4efff; --accent-blue-ink: #1c5bb5; --accent-blue-text: #0c447c; --accent-amber: #a86a12; --accent-amber-soft: #fdf1dd; --accent-amber-ink: #8a530b; --accent-green: #178864; --accent-green-soft: #e4f6ee; --accent-green-ink: #178864; --accent-red: #c43a39; --accent-red-soft: #fde4e4; --accent-red-ink: #c43a39; --progress-track: #dde1e7; --progress-fill: var(--accent-green); --input-bg: #ffffff; --input-border: #c8cdd4; --input-focus: var(--accent-blue); --shadow-md: 0 2px 12px rgba(0,0,0,0.08); }