/* ============================================================ SOBREMESA — design tokens for espanyol Warm Iberian stone. Two accents: terracotta = the daily work, Atlantic blue = the lineage/reference ("blue means lineage"). Light = "Cal", dark = "Brasa" (body.dark-mode). All text pairs AA-verified. ============================================================ */ :root { /* ----- Cal (light) ----- */ --bg: #F4EEE3; /* warm sandstone, never white */ --surface: #FBF7EF; --surface-muted: #EDE4D4; --surface-hover: #F2E9DA; --border: #DBCDB6; /* hairline, used sparingly */ --border-subtle: #E7DDCC; --text: #2A2622; /* ~13:1 on bg (AAA) */ --text-muted: #6B6155; /* ~5.2:1 (AA) */ --text-faint: #978D7E; /* large/decorative only */ --accent: #B5532F; /* terracotta — interactive, white label ~5:1 AA */ --accent-hover: #9C4527; --accent-fill: #C8A87A; /* LARGE FILLS ONLY (tracks, swatches) — never text */ --accent-cool: #2E5C6E; /* Atlantic blue — heritage thread + links (~6.3:1 AA) */ --accent-cool-hover: #244A59; --on-accent: #FBF7EF; /* label color on terracotta fills */ --success: #5C7548; /* olive — Good/Easy */ --warning: #8A5A12; /* ochre — Hard (darkened: AA as text, 5.5:1 on surface) */ --danger: #A53A2E; /* almagre — Again/lapse */ --success-bg: #E3EAD9; --warning-bg: #F5E8CF; --danger-bg: #F2DDD7; --cool-bg: #DCE7EC; /* ----- Spacing (strict 4/8) ----- */ --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --gutter: 20px; /* mobile screen edge */ /* ----- Radius ----- */ --r-sm: 8px; --r-md: 14px; --r-lg: 20px; --r-full: 999px; /* ----- Warm shadow / elevation ----- */ --shadow-card: 0 1px 2px rgba(60,42,28,.04), 0 8px 24px rgba(60,42,28,.06); --shadow-lift: 0 10px 30px rgba(60,42,28,.14); --shadow-sheet: 0 -2px 8px rgba(60,42,28,.06), 0 -16px 40px rgba(60,42,28,.14); /* ----- Motion ----- */ --ease-out: cubic-bezier(.16, 1, .3, 1); --ease-smooth: cubic-bezier(.25, .46, .45, .94); --ease-spring: cubic-bezier(.34, 1.56, .64, 1); --ease-settle: cubic-bezier(.34, 1.2, .64, 1); /* barely-perceptible deck overshoot */ --ease-soft: cubic-bezier(.4, 0, .2, 1); --dur-fast: .18s; --dur-base: .24s; /* ----- Type ----- */ --font-serif: "Source Serif 4", "Iowan Old Style", Georgia, "Times New Roman", serif; --font-ui: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --fs-caption: .78rem; --fs-label: .875rem; --fs-body: 1rem; --fs-body-lg: 1.125rem; --fs-h2: 1.3125rem; --fs-h1: 1.625rem; --fs-display: 2rem; --fs-hero: 2.4375rem; /* ----- Safe area (chrome padding on notched phones) ----- */ --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); --tabbar-h: 60px; color-scheme: light; } /* ----- Brasa (dark) ----- */ /* On (not body) so the theme survives ClientRouter body swaps. */ html.dark-mode { --bg: #1A1714; /* warm charcoal-brown, never pure black */ --surface: #2A2520; /* raised so bg->surface clears ~1.25 CR (was edgeless) */ --surface-muted: #342F27; --surface-hover: #3A342B; --border: #4A4234; /* a clean ~3-4 L* edge while staying tonal */ --border-subtle: #3A332A; --text: #EDE6D8; /* ~14:1 (AAA) */ --text-muted: #A99E8C; /* ~6.7:1 (AA) */ --text-faint: #8A8070; /* decoration only — raised to clear ~3:1 for glyphs */ --accent: #C8623A; /* deeper terracotta (less neon) — works as fill + icon */ --accent-hover: #D8784E; --accent-fill: #9E8155; /* muted bronze (own dark value) — large fills sit IN the theme, not glowing */ --accent-cool: #6FA3B8; --accent-cool-hover: #8ABACD; --on-accent: #FBF5EC; /* warm cream label on the clay fill (~5:1) — not the old dark-on-orange slab */ --success: #8FA86F; --warning: #D9A648; --danger: #D86A5A; --success-bg: #2E3A26; /* clearer lightness step over the raised surface */ --warning-bg: #43351C; --danger-bg: #48241E; --cool-bg: #21323B; /* Inset top highlight gives every card a visible edge on near-black without a decorative border (the warm double-shadow is invisible on dark). */ --shadow-card: inset 0 1px 0 rgba(255,255,255,.045), 0 1px 2px rgba(0,0,0,.5), 0 12px 28px rgba(0,0,0,.55); --shadow-lift: inset 0 1px 0 rgba(255,255,255,.05), 0 14px 36px rgba(0,0,0,.6); --shadow-sheet: 0 -2px 8px rgba(0,0,0,.4), 0 -16px 40px rgba(0,0,0,.6); color-scheme: dark; }