/*! * Kadrio — Design Tokens (theme.css) * ---------------------------------------------------------------------------- * The ONLY file in this product that contains raw color values. * Every other stylesheet must reference these tokens via var(--token). * * Rebrand in 60 seconds: override --accent, --accent-soft and --accent-strong * (or set data-accent="green|purple|blue|rose" on ). * Dark mode: set data-theme="dark" on . * * TABLE OF CONTENTS * ---------------------------------------------------------------------------- * 1. Base tokens — light theme (default) * 1.1 Backgrounds * 1.2 Accent * 1.3 Dark contrast elements * 1.4 Text * 1.5 Borders * 1.6 Semantic status colors * 2. Typography * 3. Shape — border radii * 4. Spacing scale * 5. Shadows * 6. Motion * 7. Layers (z-index) * 8. Data palette (charts + avatars) * 9. Dark theme overrides — [data-theme="dark"] * 10. Accent presets — [data-accent="..."] * 10.1 Green 10.2 Purple 10.3 Blue 10.4 Rose * 11. Print — forces the light palette on paper regardless of theme * ---------------------------------------------------------------------------- */ /* ========================================================================== */ /* 1. Base tokens — light theme (default) */ /* ========================================================================== */ :root { color-scheme: light; /* 1.1 Backgrounds ------------------------------------------------------- */ --bg-app: #F6F3EA; /* warm cream app background */ --bg-glow: #F8EFC9; /* radial warm glow used in page corners */ --surface: #FFFFFF; /* cards */ --surface-alt: #FBFAF5; /* secondary surfaces, row hover, zebra rows */ /* 1.2 Accent ------------------------------------------------------------ */ --accent: #F2D74E; /* primary accent — progress, highlights */ --accent-soft: #FAF0C8; /* soft accent — badge/segment backgrounds */ --accent-strong: #E8C93A; /* hover / active accent state */ /* 1.3 Dark contrast elements -------------------------------------------- */ --dark: #1F1F1C; /* dark pills, active nav item, dark cards */ --dark-surface: #2A2A26; /* elements sitting on a dark card */ /* 1.4 Text --------------------------------------------------------------- */ --text: #1E1E1B; /* headings, primary text */ --text-secondary: #726F66; /* labels, secondary text — 4.5:1+ on every bg */ --text-on-dark: #FAFAF7; /* text on --dark surfaces */ --text-on-dark-secondary: #9A988E; /* muted text on --dark (≥4.5:1 both themes) */ --text-on-accent: #1E1E1B; /* ALWAYS dark text on accent (contrast rule) */ /* 1.5 Borders ------------------------------------------------------------ */ --border: #ECE9DF; /* subtle card borders */ --border-dashed: #D9D5C8; /* decorative dashed lines */ /* 1.6 Semantic status colors --------------------------------------------- */ --success: #4CAF7D; /* approved, active, present */ --success-soft: #E1F2E9; --success-text: #1F6B45; /* badge text on --success-soft (5.57:1) */ --warning: #E8A13C; /* pending, late */ --warning-soft: #FAEDD9; --warning-text: #8A5310; /* badge text on --warning-soft (5.47:1) */ --danger: #D95F4C; /* rejected, terminated, errors */ --danger-soft: #F9E4E0; --danger-text: #A33424; /* badge text on --danger-soft (5.60:1) */ --danger-strong: #B0402F; /* solid danger buttons; white text = 5.80:1 */ --danger-strong-hover: #9E3727; /* hover goes DARKER (6.93:1) — never back to --danger */ --text-on-danger: #FFFFFF; --info: #5B8DEF; /* neutral information */ --info-soft: #E4EDFC; --info-text: #2D5DB8; /* badge text on --info-soft (5.29:1) */ /* ======================================================================== */ /* 2. Typography */ /* ======================================================================== */ --font: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif; --fs-display: 2.75rem; /* 44px — large stat numbers (use --fw-light) */ --fs-h1: 2rem; /* 32px — page title / greeting */ --fs-h2: 1.25rem; /* 20px — card titles */ --fs-h3: 1rem; /* 16px — subsection titles */ --fs-body: 0.9375rem; /* 15px — base text */ --fs-small: 0.8125rem; /* 13px — secondary labels */ --fs-tiny: 0.6875rem; /* 11px — meta info, dates */ --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --lh-tight: 1.2; /* headings, big numbers */ --lh-base: 1.5; /* body text */ /* ======================================================================== */ /* 3. Shape — border radii */ /* ======================================================================== */ --radius-card: 24px; /* main cards */ --radius-inner: 16px; /* elements inside cards */ --radius-small: 12px; /* inputs, small elements */ --radius-pill: 999px; /* buttons, badges, nav, tags */ /* ======================================================================== */ /* 4. Spacing scale (4px base) */ /* ======================================================================== */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; /* default grid gap between cards */ --sp-6: 24px; /* default card padding */ --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; /* ======================================================================== */ /* 5. Shadows */ /* ======================================================================== */ --shadow-card: 0 1px 3px rgba(30, 30, 27, 0.04), 0 8px 24px rgba(30, 30, 27, 0.05); --shadow-pop: 0 4px 12px rgba(30, 30, 27, 0.08), 0 16px 40px rgba(30, 30, 27, 0.10); --shadow-dark-card: 0 12px 32px rgba(30, 30, 27, 0.18); --overlay: rgba(30, 30, 27, 0.45); /* modal overlay backdrop */ /* ======================================================================== */ /* 6. Motion */ /* ======================================================================== */ --transition-fast: 150ms ease-out; --transition-base: 200ms ease-out; /* ======================================================================== */ /* 7. Layers (z-index) */ /* ======================================================================== */ --z-header: 100; --z-modal: 300; --z-dropdown: 350; /* above modals — dropdowns can open inside a dialog */ --z-toast: 400; /* ======================================================================== */ /* 8. Data palette (charts + avatars) */ /* Theme-independent pastels; dark text on any of them is >= 8.5:1. */ /* ======================================================================== */ --chart-1: #F2D74E; --chart-2: #9FD9B4; --chart-3: #A9C2F7; --chart-4: #C5AEF2; --chart-5: #F2A9BE; --chart-6: #F2BC8D; --chart-7: #9FDDE3; --chart-8: #D8D3C5; } /* ========================================================================== */ /* 9. Dark theme overrides — [data-theme="dark"] */ /* Warm dark base (not cold gray); accent stays identical (brand mark). */ /* ========================================================================== */ [data-theme='dark'] { color-scheme: dark; --bg-app: #1B1A17; --bg-glow: #2A2718; --surface: #24231F; --surface-alt: #2C2B26; --accent: #F2D74E; --accent-soft: #3A3522; --accent-strong: #F7DF6B; --dark: #141311; --dark-surface: #1E1D1A; --text: #F2F1EC; --text-secondary: #9A988E; --text-on-dark: #FAFAF7; --text-on-accent: #1E1E1B; --border: #35342E; --border-dashed: #45443C; --success-soft: #243B30; --success-text: #7FD8A8; /* 7.05:1 on the dark soft background */ --warning-soft: #3D2F1B; --warning-text: #E8B86A; /* 7.09:1 */ --danger-soft: #41241F; --danger-text: #F0907F; /* 6.01:1 */ --info-soft: #25304A; --info-text: #8FB1F5; /* 6.11:1 */ --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.20), 0 8px 24px rgba(0, 0, 0, 0.25); --shadow-pop: 0 4px 12px rgba(0, 0, 0, 0.30), 0 16px 40px rgba(0, 0, 0, 0.35); --shadow-dark-card: 0 12px 32px rgba(0, 0, 0, 0.40); --overlay: rgba(0, 0, 0, 0.60); } /* ========================================================================== */ /* 10. Accent presets — [data-accent="..."] */ /* Buyer rebranding: one attribute swaps the brand color everywhere. */ /* --accent-soft needs a light and a dark variant per preset. */ /* ========================================================================== */ /* 10.0 Default ------------------------------------------------------------- */ /* Re-asserts the :root yellow so an element (e.g. a settings swatch) can carry data-accent="default" and so "reset to default" is an explicit choice. */ [data-accent='default'] { --accent: #F2D74E; --accent-soft: #FAF0C8; --accent-strong: #E8C93A; } [data-theme='dark'][data-accent='default'] { --accent-soft: #3A3522; --accent-strong: #F7DF6B; } /* 10.1 Green ---------------------------------------------------------------- */ [data-accent='green'] { --accent: #62C28E; --accent-soft: #DDF2E6; --accent-strong: #4FAE7C; } [data-theme='dark'][data-accent='green'] { --accent-soft: #243B30; --accent-strong: #7BCFA1; } /* 10.2 Purple --------------------------------------------------------------- */ [data-accent='purple'] { --accent: #9D7BEA; --accent-soft: #ECE4FB; /* Hover goes lighter, not darker: keeps >= 4.5:1 with --text-on-accent. */ --accent-strong: #A685EE; } [data-theme='dark'][data-accent='purple'] { --accent-soft: #322B45; --accent-strong: #B095F0; } /* 10.3 Blue ----------------------------------------------------------------- */ /* Indigo-leaning blue, deliberately distinct from the semantic --info color. Base 5.56:1 and strong 4.86:1 against --text-on-accent (WCAG AA). */ [data-accent='blue'] { --accent: #7A8FEE; --accent-soft: #E4E8FC; --accent-strong: #6E83EB; } [data-theme='dark'][data-accent='blue'] { --accent-soft: #282C4A; --accent-strong: #7E90F0; } /* 10.4 Rose ----------------------------------------------------------------- */ [data-accent='rose'] { --accent: #EF7B9B; --accent-soft: #FCE4EC; --accent-strong: #DD6488; } [data-theme='dark'][data-accent='rose'] { --accent-soft: #432A33; --accent-strong: #F495AF; } /* ========================================================================== */ /* 11. Print — forces the light palette on paper regardless of theme */ /* (dark backgrounds must never reach the printer) */ /* ========================================================================== */ @media print { :root, [data-theme='dark'] { color-scheme: light; --bg-app: #FFFFFF; --bg-glow: #FFFFFF; --surface: #FFFFFF; --surface-alt: #F5F5F2; --text: #1E1E1B; --text-secondary: #5B5A54; --border: #D9D5C8; --border-dashed: #D9D5C8; /* Semantic soft/text pairs go back to their light values — a draft notice or status badge must stay readable on paper. */ --accent-soft: #FAF0C8; --success-soft: #E1F2E9; --success-text: #1F6B45; --warning-soft: #FAEDD9; --warning-text: #8A5310; --danger-soft: #F9E4E0; --danger-text: #A33424; --info-soft: #E4EDFC; --info-text: #2D5DB8; --shadow-card: none; --shadow-pop: none; --shadow-dark-card: none; } }