/* Rihla tours template — tokens.css The design system: every colour, shadow and font family both pages use. Change a value here and it changes on the storefront and the dashboard at once. Three blocks, in this order, and the order matters: :root the complete light palette @media (prefers-color-scheme: dark) dark, only when the visitor has not chosen :root[data-theme="dark"] dark, chosen explicitly Set data-theme="light" or "dark" on to force a theme; leave it off to follow the OS. Chart colours (--c1..--c4, --o1..--o3) are validated for colour-blind separation and contrast in both themes. If you swap them, re-check the pairs before shipping. */ :root{ color-scheme:light; /* surfaces */ --bg:#EDF2F1; --surface:#FFFFFF; --surface2:#F5F8F8; --sidebar:#0B2A31; --sidebar-ink:#CFE2E4; --sidebar-mut:#7D9CA3; /* text & rules */ --ink:#0B2A31; --ink2:#38555D; --muted:#52707A; --line:#D3DFDF; --line2:#E8EFEF; /* brand */ --primary:#0E6C76; --primary-ink:#FFFFFF; --primary-soft:#DCEFF0; --ring:#0E6C76; --amber:#F0A22E; --amber-soft:#FCEBCB; --amber-ink:#2B1B02; /* status — reserved for state, never reused as a chart series colour */ --good:#17714A; --good-soft:#DCF1E5; --warn:#8A5206; --warn-soft:#FAEBD0; --bad:#AC3428; --bad-soft:#FBE3E0; --info-soft:#E4EEF6; /* chart: categorical (identity) — assign in order, never cycle */ --c1:#008C9E; --c2:#C08215; --c3:#93468B; --c4:#42934E; /* chart: ordinal ramp (fare classes, tiers) — light to dark */ --o1:#79BFC9; --o2:#2E939C; --o3:#095A63; /* chart chrome */ --grid:#E4ECEC; --axis:#93A9AC; --shadow:0 1px 2px rgba(11,42,49,.05),0 8px 24px rgba(11,42,49,.06); --shadow-lg:0 10px 50px rgba(11,42,49,.22); /* type — --f-display and --f-brand are the same face under two names, so either page's CSS reads naturally */ --f-display:'Bricolage Grotesque','IBM Plex Sans Arabic',system-ui,sans-serif; --f-brand:'Bricolage Grotesque','IBM Plex Sans Arabic',system-ui,sans-serif; --f:'IBM Plex Sans','IBM Plex Sans Arabic',system-ui,-apple-system,sans-serif; --f-body:'IBM Plex Sans','IBM Plex Sans Arabic',system-ui,-apple-system,sans-serif; --f-mono:'IBM Plex Mono',ui-monospace,Menlo,Consolas,monospace; } @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ color-scheme:dark; --bg:#06161A; --surface:#0E2228; --surface2:#0A1B20; --sidebar:#071A1F; --sidebar-ink:#BFD8DC; --sidebar-mut:#6E8F97; --ink:#E6F0F0; --ink2:#BDD2D5; --muted:#8DA9B0; --line:#1F3C45; --line2:#173037; --primary:#4FC0CB; --primary-ink:#04212A; --primary-soft:#113A41; --ring:#6FD3DD; --amber:#F4B14C; --amber-soft:#3B2E12; --amber-ink:#2B1B02; --good:#5CC894; --good-soft:#11362A; --warn:#E0A758; --warn-soft:#37290F; --bad:#F1897C; --bad-soft:#3C1E1B; --info-soft:#132B38; --c1:#2FA3B0; --c2:#BC8529; --c3:#9F5C96; --c4:#4BA365; --o1:#2A7F8B; --o2:#4FB0BD; --o3:#9BD8E0; --grid:#1B353D; --axis:#5E7C84; --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.34); --shadow-lg:0 10px 50px rgba(0,0,0,.6); } } :root[data-theme="dark"]{ color-scheme:dark; --bg:#06161A; --surface:#0E2228; --surface2:#0A1B20; --sidebar:#071A1F; --sidebar-ink:#BFD8DC; --sidebar-mut:#6E8F97; --ink:#E6F0F0; --ink2:#BDD2D5; --muted:#8DA9B0; --line:#1F3C45; --line2:#173037; --primary:#4FC0CB; --primary-ink:#04212A; --primary-soft:#113A41; --ring:#6FD3DD; --amber:#F4B14C; --amber-soft:#3B2E12; --amber-ink:#2B1B02; --good:#5CC894; --good-soft:#11362A; --warn:#E0A758; --warn-soft:#37290F; --bad:#F1897C; --bad-soft:#3C1E1B; --info-soft:#132B38; --c1:#2FA3B0; --c2:#BC8529; --c3:#9F5C96; --c4:#4BA365; --o1:#2A7F8B; --o2:#4FB0BD; --o3:#9BD8E0; --grid:#1B353D; --axis:#5E7C84; --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.34); --shadow-lg:0 10px 50px rgba(0,0,0,.6); }