/* Tessera design tokens — 2026-05-16e · Polish: storage usage display * * One source of truth for surfaces, type, and elevation. Component CSS * in styles.css consumes only var(--*) values from this file. The dark * block at the bottom overrides every surface/ink/border/accent/status * token for an explicit dark theme; the @media block below it does the * same when the OS reports prefers-color-scheme: dark AND the user * hasn't set an explicit theme. */ :root { /* Surfaces */ --bg: #F4EDE0; /* warm cream — app shell */ --bg-deep: #EBE0CA; --panel: #FFFFFF; /* card / modal */ --panel-tint: #FBF8F1; /* subtle nested surface */ --panel-hi: #FDFAF4; --viewport-bg: #2A2A2A; /* neutral grey for Three.js scene */ /* Ink */ --ink: #191512; --ink-dim: #5C534A; --ink-mute: #8E8478; --ink-subtle: #B7AC9C; /* Borders */ --border: #E5D9C5; --border-soft: #EDE2CE; /* Accent (terracotta) */ --accent: #B8472D; --accent-hi: #D26446; --accent-soft: #F2D9CE; --accent-softer: #FAEDE6; --accent-ink: #7A2D17; /* Status */ --ok: #4A8F3F; --warn: #C97A2D; --warn-soft: #FBE9D6; --err: #B23A2C; /* Semantic tokens previously hardcoded across styles.css (Chunk 4) */ --warn-soft-ink: #5C3B14; --ok-soft-bg: #E2EBD8; --err-soft-bg: #FBE4E0; --err-soft-border: #E8B5AD; --err-soft-ink: #7A2418; --thumb-grad-start: #e6c79a; --thumb-grad-end: #b08a5e; --sheet-paper: #FBF7F0; /* Typography */ --font-display: 'Cormorant Garamond', Georgia, serif; --font-body: 'DM Sans', system-ui, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace; --app-font-family: var(--font-body); /* Elevation */ --shadow: 0 1px 2px rgba(60,30,15,0.05), 0 8px 24px -8px rgba(60,30,15,0.16); --shadow-soft: 0 1px 2px rgba(60,30,15,0.05), 0 4px 12px -4px rgba(60,30,15,0.10); --shadow-lg: 0 4px 12px rgba(60,30,15,0.10), 0 24px 48px -12px rgba(60,30,15,0.24); --shadow-press: 0 4px 12px -2px rgba(184, 71, 45, 0.35), inset 0 1px 0 rgba(255,255,255,0.16); /* Radii */ --radius-sm: 5px; --radius-md: 8px; --radius-lg: 10px; } /* ---------- Dark mode (Phase 5 SF1 Chunk 4) ---------- * * Applied explicitly via . Mirrors the @media * block below for users who choose Dark from Settings → Units & theme. * Auto mode (no data-theme attribute) falls through to the @media query * for OS-driven dark. */ :root[data-theme="dark"] { /* Surfaces */ --bg: #1A1612; --bg-deep: #14110D; --panel: #25201A; --panel-tint: #1F1B16; --panel-hi: #2A241D; --viewport-bg: #1A1A1A; /* Ink */ --ink: #F1E7D5; --ink-dim: #C5B8A4; --ink-mute: #8C8273; --ink-subtle: #5C5447; /* Borders */ --border: #3A3128; --border-soft: #2E2620; /* Accent — slightly brighter terracotta for contrast on dark */ --accent: #C95838; --accent-hi: #DC6A4A; --accent-soft: #4A2419; --accent-softer: #3A1C12; --accent-ink: #F2C4B4; /* Status */ --ok: #6FB05F; --warn: #D89952; --warn-soft: #3A2A14; --err: #D55D4E; /* Semantic tokens (dark variants) */ --warn-soft-ink: #E8C797; --ok-soft-bg: #28311F; --err-soft-bg: #3A1F1A; --err-soft-border: #6B3B33; --err-soft-ink: #E89D90; --thumb-grad-start: #4A3826; --thumb-grad-end: #2A1E13; --sheet-paper: #2A241D; /* Elevation — deeper shadows on dark backgrounds */ --shadow: 0 1px 2px rgba(0,0,0,0.4), 0 8px 24px -8px rgba(0,0,0,0.6); --shadow-soft: 0 1px 2px rgba(0,0,0,0.3), 0 4px 12px -4px rgba(0,0,0,0.4); --shadow-lg: 0 4px 12px rgba(0,0,0,0.5), 0 24px 48px -12px rgba(0,0,0,0.8); --shadow-press: 0 4px 12px -2px rgba(201, 88, 56, 0.5), inset 0 1px 0 rgba(255,255,255,0.08); } /* OS-driven dark mode (Auto theme — no data-theme attribute set). */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --bg: #1A1612; --bg-deep: #14110D; --panel: #25201A; --panel-tint: #1F1B16; --panel-hi: #2A241D; --viewport-bg: #1A1A1A; --ink: #F1E7D5; --ink-dim: #C5B8A4; --ink-mute: #8C8273; --ink-subtle: #5C5447; --border: #3A3128; --border-soft: #2E2620; --accent: #C95838; --accent-hi: #DC6A4A; --accent-soft: #4A2419; --accent-softer: #3A1C12; --accent-ink: #F2C4B4; --ok: #6FB05F; --warn: #D89952; --warn-soft: #3A2A14; --err: #D55D4E; --warn-soft-ink: #E8C797; --ok-soft-bg: #28311F; --err-soft-bg: #3A1F1A; --err-soft-border: #6B3B33; --err-soft-ink: #E89D90; --thumb-grad-start: #4A3826; --thumb-grad-end: #2A1E13; --sheet-paper: #2A241D; --shadow: 0 1px 2px rgba(0,0,0,0.4), 0 8px 24px -8px rgba(0,0,0,0.6); --shadow-soft: 0 1px 2px rgba(0,0,0,0.3), 0 4px 12px -4px rgba(0,0,0,0.4); --shadow-lg: 0 4px 12px rgba(0,0,0,0.5), 0 24px 48px -12px rgba(0,0,0,0.8); --shadow-press: 0 4px 12px -2px rgba(201, 88, 56, 0.5), inset 0 1px 0 rgba(255,255,255,0.08); } }