/* ========================================================================== Phoenix Boss — design tokens (tokens.css) The only file that may contain raw colors. boss.css and every screen use these variables. Light is the default; dark comes from the OS setting or from . An explicit data-theme wins over the OS. Source of truth: docs/tasks/T-20260910-01-design-tokens-and-kit.md ========================================================================== */ :root { color-scheme: light; /* --- surfaces --- */ --bg: #F6F4F0; /* page background */ --card: #FFFFFF; /* cards, tiles, lists */ --card-2: #FFFFFF; /* elevated: totals bar, day selector, tab bar, sheets (+ --shadow-raised) */ --fill: #EFECE6; /* chips, segmented control track, skeleton */ --line: #E3DFD7; /* borders, dividers */ --scrim: rgba(27, 25, 23, 0.45); /* --- text --- */ --t1: #1B1917; /* primary text */ --t2: #5B5650; /* secondary text, labels */ --t3: #746E66; /* support text, axis labels — never a value the reader must act on */ /* --- accent (phoenix gold): chrome only, never data --- */ --acc: #C99A2E; /* fills: primary button, active tab icon */ --acc-on: #1B1917; /* text on --acc */ --acc-text: #8A6410; /* gold as text or icon on light surfaces */ --acc-soft: #F7EFD9; /* tinted background */ --focus: #8A6410; /* focus ring */ /* --- status: reserved meanings, always with icon or text --- */ --ok: #1E8E5A; --ok-text: #146B43; --ok-soft: #E3F3EA; --warn: #D67114; --warn-text: #9A4E08; --warn-soft: #FBEEDD; --bad: #D2323A; --bad-text: #A8262D; --bad-soft: #FBE5E6; --bad-on: #FFFFFF; --idle: #8F887E; /* offline after the day closed */ /* --- charts --- */ --grid: #E8E4DC; --c1: #B07E1E; --c2: #C9497A; --c3: #4B6FBF; --c4: #5F8A16; --c5: #7B52C4; --c6: #0E9C90; /* --- toast, switch --- */ --toast-bg: #1B1917; --toast-text: #F6F4F0; --toast-link: #E4BE5A; --switch-knob: #FFFFFF; --switch-knob-on: #FFFFFF; --skeleton: #EFECE6; --skeleton-hi: #FFFFFF; /* loading shimmer: base and moving highlight */ --fill-on: #FFFFFF; /* selected segment inside a --fill track */ --pressed: rgba(27, 25, 23, 0.06); /* :active wash on rows, tiles, tabs */ /* --- elevation --- */ --shadow-card: 0 1px 2px rgba(27, 25, 23, 0.05), 0 2px 6px rgba(27, 25, 23, 0.04); --shadow-raised: 0 -2px 8px rgba(27, 25, 23, 0.06), 0 8px 24px rgba(27, 25, 23, 0.12); /* --- spacing scale (D-G) --- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; /* --- radius --- */ --r-card: 16px; --r-ctl: 12px; --r-pill: 999px; /* --- type scale (D-E), rem so OS text scaling applies; root = 16px --- */ --font: "IBM Plex Sans", "IBM Plex Sans Arabic", "Segoe UI", system-ui, "Noto Sans Arabic", sans-serif; --font-ar: "IBM Plex Sans Arabic", "IBM Plex Sans", "Segoe UI", system-ui, "Noto Sans Arabic", sans-serif; --fs-title: 1.25rem; /* 20 */ --fs-section: 1rem; /* 16 */ --fs-kpi: 1.5rem; /* 24 */ --fs-kpi-sm: 1.125rem; /* 18 */ --fs-totals: 1.25rem; /* 20 */ --fs-body: 0.875rem; /* 14 */ --fs-label: 0.8125rem; /* 13 */ --fs-support: 0.8125rem; /* 13 */ --fs-nav: 0.75rem; /* 12 — bottom-tab labels only */ --fs-micro: 0.6875rem; /* 11 — badge digits and chart tick labels only */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; /* 600 is the maximum (D-D) */ --lh-body: 1.4; --lh-tight: 1.15; --lh-ar: 1.5; /* --- motion --- */ --dur-fast: 120ms; --dur: 200ms; --ease: cubic-bezier(0.2, 0.7, 0.2, 1); /* --- layers --- */ --z-sticky: 3; --z-header: 5; --z-tabbar: 6; --z-sheet: 20; --z-toast: 30; /* --- safe areas (D-S); -s/-e follow the writing direction --- */ --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px); --safe-s: env(safe-area-inset-left, 0px); --safe-e: env(safe-area-inset-right, 0px); /* --- sizes --- */ --tap: 44px; /* minimum hit area */ --content-max: 600px; /* tablets and landscape: content stays centred */ } [dir="rtl"] { --safe-s: env(safe-area-inset-right, 0px); --safe-e: env(safe-area-inset-left, 0px); } /* ---------- dark: OS setting, unless the user chose light ---------- */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --bg: #0F0E0D; --card: #191817; --card-2: #201F1D; --fill: #201F1D; --line: #302E2B; --scrim: rgba(0, 0, 0, 0.6); --t1: #F3EFE8; --t2: #B8B0A5; --t3: #8F887D; --acc: #E4BE5A; --acc-on: #1B1917; --acc-text: #E9C765; --acc-soft: #2B2416; --focus: #E4BE5A; --ok: #3FCB87; --ok-text: #3FCB87; --ok-soft: #162A20; --warn: #F2994A; --warn-text: #F2994A; --warn-soft: #2F2116; --bad: #F26B6B; --bad-text: #F26B6B; --bad-soft: #341A1A; --bad-on: #1B1917; --idle: #736D64; --grid: #262320; --c1: #B58A2A; --c2: #CC5288; --c3: #5B80D8; --c4: #7BA52A; --c5: #8E6FE3; --c6: #1E9C90; --toast-bg: #F3EFE8; --toast-text: #0F0E0D; --toast-link: #8A6410; --switch-knob: #F3EFE8; --switch-knob-on: #0F0E0D; --skeleton: #24221F; --skeleton-hi: #3A3733; --fill-on: #3A3733; --pressed: rgba(255, 255, 255, 0.07); --shadow-card: none; --shadow-raised: 0 -1px 0 rgba(255, 255, 255, 0.04), 0 8px 24px rgba(0, 0, 0, 0.5); } } /* ---------- dark: explicit user choice ---------- */ :root[data-theme="dark"] { color-scheme: dark; --bg: #0F0E0D; --card: #191817; --card-2: #201F1D; --fill: #201F1D; --line: #302E2B; --scrim: rgba(0, 0, 0, 0.6); --t1: #F3EFE8; --t2: #B8B0A5; --t3: #8F887D; --acc: #E4BE5A; --acc-on: #1B1917; --acc-text: #E9C765; --acc-soft: #2B2416; --focus: #E4BE5A; --ok: #3FCB87; --ok-text: #3FCB87; --ok-soft: #162A20; --warn: #F2994A; --warn-text: #F2994A; --warn-soft: #2F2116; --bad: #F26B6B; --bad-text: #F26B6B; --bad-soft: #341A1A; --bad-on: #1B1917; --idle: #736D64; --grid: #262320; --c1: #B58A2A; --c2: #CC5288; --c3: #5B80D8; --c4: #7BA52A; --c5: #8E6FE3; --c6: #1E9C90; --toast-bg: #F3EFE8; --toast-text: #0F0E0D; --toast-link: #8A6410; --switch-knob: #F3EFE8; --switch-knob-on: #0F0E0D; --skeleton: #24221F; --skeleton-hi: #3A3733; --fill-on: #3A3733; --pressed: rgba(255, 255, 255, 0.07); --shadow-card: none; --shadow-raised: 0 -1px 0 rgba(255, 255, 255, 0.04), 0 8px 24px rgba(0, 0, 0, 0.5); } /* ---------- motion off when the OS asks ---------- */ @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 0ms; --dur: 0ms; } }