/* ============================================================================ KOREVRA SERVE — design tokens ("Saffron Kitchen") One ledger, three doors. Warm paper for people, deep plum for screens that live in a kitchen. Every colour below exists in BOTH themes; portals choose their default surface with data-theme on (landing/admin/app = light, kiosk/KDS = dark) and the user can flip it. ==========================================================================*/ :root { /* typography */ --font-ui: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-display: 'Fraunces', Georgia, 'Times New Roman', serif; --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; /* brand hues (theme-invariant fills — carry white text) */ --saffron: #F5A524; --saffron-600: #D98A0C; --saffron-700: #B8720A; --paprika: #E4572E; --paprika-600: #C4431D; --basil: #1F9D6A; --basil-600: #157A51; --teal: #1B8A8A; --teal-600: #136B6B; --plum: #5B2A86; --plum-600: #45206A; --korevra: #E8732C; --sky: #2F7DE1; --rose: #D8345F; /* light surfaces */ --bg: #FBF7F0; --bg-2: #F4EDE1; --bg-3: #EBE2D2; --card: #FFFFFF; --card-2: #FFF9F0; --line: rgba(23, 18, 31, 0.10); --line-2: rgba(23, 18, 31, 0.18); --ink: #17121F; --ink-2: #463D52; --ink-3: #6F6680; --ink-4: #9B93A8; --inverse: #FFFFFF; /* accent inks (AA on the surfaces above) */ --saffron-ink: #9A5E04; --paprika-ink: #B53E18; --basil-ink: #137451; --teal-ink: #136B6B; --plum-ink: #4B2270; --sky-ink: #1E5FB3; --rose-ink: #B0264B; /* washes (tinted surfaces for chips/badges/callouts) */ --saffron-wash: rgba(245, 165, 36, 0.16); --paprika-wash: rgba(228, 87, 46, 0.14); --basil-wash: rgba(31, 157, 106, 0.14); --teal-wash: rgba(27, 138, 138, 0.14); --plum-wash: rgba(91, 42, 134, 0.12); --sky-wash: rgba(47, 125, 225, 0.12); --rose-wash: rgba(216, 52, 95, 0.12); /* elevation */ --shadow-1: 0 1px 2px rgba(23, 18, 31, 0.06), 0 1px 3px rgba(23, 18, 31, 0.08); --shadow-2: 0 4px 14px rgba(23, 18, 31, 0.10), 0 1px 3px rgba(23, 18, 31, 0.06); --shadow-3: 0 18px 48px rgba(23, 18, 31, 0.18), 0 4px 12px rgba(23, 18, 31, 0.08); --glow-saffron: 0 0 0 4px rgba(245, 165, 36, 0.25); /* geometry */ --r-1: 8px; --r-2: 12px; --r-3: 18px; --r-4: 26px; --r-pill: 999px; /* motion */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --t-fast: 140ms; --t-base: 240ms; --t-slow: 480ms; color-scheme: light; } /* ---- dark ---------------------------------------------------------------- */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #120E1A; --bg-2: #1A1424; --bg-3: #241C31; --card: #1E1729; --card-2: #271E35; --line: rgba(255, 255, 255, 0.10); --line-2: rgba(255, 255, 255, 0.18); --ink: #F6F1EA; --ink-2: #D2CADC; --ink-3: #A79DB6; --ink-4: #7B7190; --inverse: #17121F; --saffron-ink: #FFC45C; --paprika-ink: #FF8A66; --basil-ink: #4FD39A; --teal-ink: #4FC4C4; --plum-ink: #C9A3F0; --sky-ink: #7FB3FF; --rose-ink: #FF7A9B; --saffron-wash: rgba(245, 165, 36, 0.18); --paprika-wash: rgba(228, 87, 46, 0.18); --basil-wash: rgba(31, 157, 106, 0.18); --teal-wash: rgba(27, 138, 138, 0.20); --plum-wash: rgba(140, 90, 200, 0.20); --sky-wash: rgba(47, 125, 225, 0.20); --rose-wash: rgba(216, 52, 95, 0.20); --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-2: 0 6px 18px rgba(0, 0, 0, 0.45); --shadow-3: 0 24px 60px rgba(0, 0, 0, 0.6); color-scheme: dark; } } :root[data-theme="dark"] { --bg: #120E1A; --bg-2: #1A1424; --bg-3: #241C31; --card: #1E1729; --card-2: #271E35; --line: rgba(255, 255, 255, 0.10); --line-2: rgba(255, 255, 255, 0.18); --ink: #F6F1EA; --ink-2: #D2CADC; --ink-3: #A79DB6; --ink-4: #7B7190; --inverse: #17121F; --saffron-ink: #FFC45C; --paprika-ink: #FF8A66; --basil-ink: #4FD39A; --teal-ink: #4FC4C4; --plum-ink: #C9A3F0; --sky-ink: #7FB3FF; --rose-ink: #FF7A9B; --saffron-wash: rgba(245, 165, 36, 0.18); --paprika-wash: rgba(228, 87, 46, 0.18); --basil-wash: rgba(31, 157, 106, 0.18); --teal-wash: rgba(27, 138, 138, 0.20); --plum-wash: rgba(140, 90, 200, 0.20); --sky-wash: rgba(47, 125, 225, 0.20); --rose-wash: rgba(216, 52, 95, 0.20); --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-2: 0 6px 18px rgba(0, 0, 0, 0.45); --shadow-3: 0 24px 60px rgba(0, 0, 0, 0.6); color-scheme: dark; } @media (prefers-reduced-motion: reduce) { :root { --t-fast: 0ms; --t-base: 0ms; --t-slow: 0ms; } }