/* ============================================================ Ponytail — Design Tokens (v1) · the settings file Every colour, type size, space, radius, shadow, motion and z-index value lives here. design-system.css only consumes these names. Load order (includes/layout.php, after Bootstrap and the font file): bootstrap.rtl.min.css → cairo.css (Cairo: Arabic + Latin) → design-tokens.css → design-system.css → style.css Naming: --ds-* (new). Legacy --pt-* in style.css migrates onto these. Components use SEMANTIC tokens (--ds-text, --ds-surface…), never the primitive palette (--ds-navy-*, --ds-gold-*). That is what makes dark mode work without touching component code. Brand: deep steel-navy + brushed gold, taken from the logo. Gold is reserved for brand moments and money (commission, payouts). ============================================================ */ /* ---------- 1. Primitive palette (do not use in components) ---------- */ :root { /* Navy — logo background family */ --ds-navy-950: #0B1624; --ds-navy-900: #112136; --ds-navy-800: #1A2D47; --ds-navy-700: #243B5C; --ds-navy-600: #33507A; --ds-navy-200: #C5D0DF; --ds-navy-100: #E4EAF2; --ds-navy-50: #F3F6FA; /* Gold — brushed brass from the logo mark */ --ds-gold-700: #765822; --ds-gold-500: #C9A45C; --ds-gold-300: #E3CB8F; --ds-gold-100: #F6EEDA; } /* ---------- 2. Semantic tokens — LIGHT (default) ---------- */ :root, :root[data-theme="light"] { color-scheme: light; --ds-canvas: #F4F6F9; /* app background */ --ds-surface: #FFFFFF; /* cards, inputs, modals */ --ds-surface-2: #EEF2F7; /* table head, hover, disabled, sidebar wells */ --ds-line: #DFE5EE; /* dividers, card borders */ --ds-line-strong: #C3CCD9; /* input borders, table head rule */ --ds-text: #0F1B2D; /* 17.3:1 on surface */ --ds-text-2: #4A5A70; /* 7.0:1 */ --ds-text-3: #566780; /* placeholders, help text (≥4.5:1 on surface-2) */ --ds-brand: var(--ds-navy-800); --ds-brand-hover: var(--ds-navy-700); --ds-brand-active: var(--ds-navy-900); --ds-on-brand: #FFFFFF; --ds-brand-text: var(--ds-navy-600); /* links */ --ds-accent: var(--ds-gold-500); /* fills: commission chips, money CTA */ --ds-on-accent: var(--ds-navy-950); --ds-accent-text: var(--ds-gold-700); /* gold as text, ≥4.5:1 on accent-bg */ --ds-accent-bg: var(--ds-gold-100); --ds-focus: var(--ds-navy-600); /* 8.2:1 on white */ --ds-focus-halo: rgba(51, 80, 122, .18); --ds-overlay: rgba(11, 22, 36, .5); --ds-success-text: #1F6B4A; --ds-success-bg: #E3F2EA; --ds-success-solid: #2E7D5B; --ds-warning-text: #A34B17; --ds-warning-bg: #FBEADF; --ds-warning-solid: #C0622B; --ds-danger-text: #A3202F; --ds-danger-bg: #F9E3E5; --ds-danger-solid: #C8323F; --ds-info-text: #25608F; --ds-info-bg: #E2EEF8; --ds-info-solid: #3B7DB8; --ds-neutral-text: #3E4D63; --ds-neutral-bg: #E6EBF2; --ds-elev-1: 0 1px 2px rgba(11, 22, 36, .06); --ds-elev-2: 0 10px 28px rgba(11, 22, 36, .12); --ds-elev-3: 0 28px 64px rgba(11, 22, 36, .22); } /* ---------- 3. Semantic tokens — DARK ---------- */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --ds-canvas: #0B1420; --ds-surface: #121C2B; --ds-surface-2: #19263A; --ds-line: #243349; --ds-line-strong: #33455F; --ds-text: #E8EDF4; --ds-text-2: #A9B6C7; --ds-text-3: #8593A8; --ds-brand: #3A6EA5; --ds-brand-hover: #4A80BA; --ds-brand-active: #2F5E91; --ds-on-brand: #FFFFFF; --ds-brand-text: #9DB7DA; --ds-accent: var(--ds-gold-500); --ds-on-accent: var(--ds-navy-950); --ds-accent-text: var(--ds-gold-300); --ds-accent-bg: rgba(227, 203, 143, .08); --ds-focus: var(--ds-gold-300); --ds-focus-halo: rgba(227, 203, 143, .22); --ds-overlay: rgba(3, 8, 15, .6); --ds-success-text: #7FD1A8; --ds-success-bg: rgba(127, 209, 168, .12); --ds-success-solid: #3FA57A; --ds-warning-text: #F0A77A; --ds-warning-bg: rgba(240, 167, 122, .09); --ds-warning-solid: #E07F4C; --ds-danger-text: #F08A97; --ds-danger-bg: rgba(240, 138, 151, .12); --ds-danger-solid: #E0505E; --ds-info-text: #8CC0E8; --ds-info-bg: rgba(140, 192, 232, .12); --ds-info-solid: #5AA0D6; --ds-neutral-text: #B9C5D4; --ds-neutral-bg: rgba(169, 182, 199, .14); --ds-elev-1: 0 1px 2px rgba(0, 0, 0, .4); --ds-elev-2: 0 10px 28px rgba(0, 0, 0, .45); --ds-elev-3: 0 28px 64px rgba(0, 0, 0, .6); } } :root[data-theme="dark"] { color-scheme: dark; --ds-canvas: #0B1420; --ds-surface: #121C2B; --ds-surface-2: #19263A; --ds-line: #243349; --ds-line-strong: #33455F; --ds-text: #E8EDF4; --ds-text-2: #A9B6C7; --ds-text-3: #8593A8; --ds-brand: #3A6EA5; --ds-brand-hover: #4A80BA; --ds-brand-active: #2F5E91; --ds-on-brand: #FFFFFF; --ds-brand-text: #9DB7DA; --ds-accent: var(--ds-gold-500); --ds-on-accent: var(--ds-navy-950); --ds-accent-text: var(--ds-gold-300); --ds-accent-bg: rgba(227, 203, 143, .08); --ds-focus: var(--ds-gold-300); --ds-focus-halo: rgba(227, 203, 143, .22); --ds-overlay: rgba(3, 8, 15, .6); --ds-success-text: #7FD1A8; --ds-success-bg: rgba(127, 209, 168, .12); --ds-success-solid: #3FA57A; --ds-warning-text: #F0A77A; --ds-warning-bg: rgba(240, 167, 122, .09); --ds-warning-solid: #E07F4C; --ds-danger-text: #F08A97; --ds-danger-bg: rgba(240, 138, 151, .12); --ds-danger-solid: #E0505E; --ds-info-text: #8CC0E8; --ds-info-bg: rgba(140, 192, 232, .12); --ds-info-solid: #5AA0D6; --ds-neutral-text: #B9C5D4; --ds-neutral-bg: rgba(169, 182, 199, .14); --ds-elev-1: 0 1px 2px rgba(0, 0, 0, .4); --ds-elev-2: 0 10px 28px rgba(0, 0, 0, .45); --ds-elev-3: 0 28px 64px rgba(0, 0, 0, .6); } /* ---------- 4. Theme-independent tokens ---------- */ :root { /* typography — one family. Arabic and Latin digits share the same face. */ --ds-font: 'Cairo', system-ui, sans-serif; --ds-fw-regular: 400; --ds-fw-medium: 500; --ds-fw-semibold: 600; --ds-fw-bold: 700; /* type scale — rem, 1.2-ish steps, dense-UI tuned */ --ds-fs-xs: .75rem; /* 12px badges, captions */ --ds-fs-sm: .8125rem; /* 13px labels, table head */ --ds-fs-base: .875rem; /* 14px tables, dense controls */ --ds-fs-md: .9375rem; /* 15px body */ --ds-fs-lg: 1.0625rem; /* 17px section titles */ --ds-fs-xl: 1.25rem; /* 20px page title */ --ds-fs-2xl: 1.625rem; /* 26px hero title */ --ds-fs-kpi: 2rem; /* 32px KPI numerals */ /* Arabic needs more leading than Latin */ --ds-lh-body: 1.7; --ds-lh-table: 1.5; --ds-lh-tight: 1.3; /* spacing — 4px base */ --ds-space-1: .25rem; /* 4 */ --ds-space-2: .5rem; /* 8 */ --ds-space-3: .75rem; /* 12 */ --ds-space-4: 1rem; /* 16 */ --ds-space-5: 1.25rem; /* 20 */ --ds-space-6: 1.5rem; /* 24 */ --ds-space-8: 2rem; /* 32 */ --ds-space-10: 2.5rem; /* 40 */ --ds-space-12: 3rem; /* 48 */ --ds-space-16: 4rem; /* 64 */ /* radius — 4 steps only, pill reserved for status */ --ds-r-xs: 4px; /* chips inside controls */ --ds-r-sm: 6px; /* buttons, inputs */ --ds-r-md: 10px; /* cards, dropdowns, table wrap */ --ds-r-lg: 14px; /* modals */ --ds-r-pill: 999px; /* status badges only */ /* control sizes — 48px for scanner / touch */ --ds-control-h-sm: 32px; --ds-control-h: 40px; --ds-control-h-lg: 48px; /* layout */ --ds-sidebar-w: 248px; --ds-topbar-h: 60px; --ds-content-max: 1440px; --ds-gutter: var(--ds-space-6); /* 24px desktop, 16px on phones */ /* motion */ --ds-dur-fast: 120ms; --ds-dur-base: 200ms; --ds-ease: cubic-bezier(.2, 0, 0, 1); /* z-index scale */ --ds-z-sticky: 1020; --ds-z-topbar: 1030; --ds-z-sidebar: 1040; --ds-z-dropdown: 1050; --ds-z-modal: 1060; --ds-z-toast: 1080; } /* Breakpoints (CSS vars cannot appear inside @media): 576 phone · 768 small tablet · 992 tablet/sidebar collapses · 1200 desktop · 1400 wide */ @media (max-width: 575.98px) { :root { --ds-gutter: var(--ds-space-4); } } /* ---------- 14. Sidebar (always dark, both themes) ---------- */ :root { --ds-sidebar-bg: var(--ds-navy-900); --ds-sidebar-text: var(--ds-navy-200); --ds-sidebar-muted: #8AA0BA; --ds-sidebar-hover: rgba(255, 255, 255, .06); --ds-sidebar-active: var(--ds-navy-600); --ds-sidebar-danger: #F08A97; } :root { --ds-accent-soft: var(--ds-accent-bg); }