/* ============================================================ Souk Admin — design tokens. Copied VERBATIM from the approved design (docs/reference/design/Souk Admin.dc.html, [data-mode] blocks). Rule (BUILD-PROMPT §6.3): no hard-coded colours outside this file. Light is the default; switches the palette. Fonts are declared in fonts.css. ============================================================ */ :root, [data-mode='light'] { --bg: #f4f1eb; --surface: #ffffff; --surface-2: #f8f6f2; --surface-3: #efebe3; --border: #e3ddd2; --border-strong: #cfc7b9; --text: #1e1a14; --text-2: #5c554b; --text-3: #8a8377; --primary: #8f651a; --primary-hover: #7a5615; --primary-soft: #f6eedc; --primary-text: #7a5615; --on-primary: #ffffff; --green: #1f8a5b; --green-soft: #e3f4ea; --amber: #b7791f; --amber-soft: #fbf0da; --amber-text: #8f5e14; /* amber for small text: 5.6:1 on white (see design-deviations) */ --green-text: #17734b; /* green for small text: 5.4:1 on the card background */ --red: #c43d2f; --red-soft: #fbe6e3; --grey: #7a7570; --grey-soft: #ece9e3; --blue: #2f6fb5; --blue-soft: #e4eef9; --focus: #c99a3c; --shadow-1: 0 1px 2px rgba(30, 26, 20, 0.06); --shadow-2: 0 4px 16px -4px rgba(30, 26, 20, 0.12); --shadow-3: 0 16px 40px -12px rgba(30, 26, 20, 0.28); --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px; --fs-xs: 12px; --fs-sm: 13px; --fs-md: 14px; --fs-lg: 16px; --fs-xl: 20px; --fs-2xl: 26px; --fs-3xl: 32px; --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; /* Additions agreed with the design's type roles (not in the prototype's token block). */ --font-sans: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-arabic: 'Noto Kufi Arabic', 'Hanken Grotesk', system-ui, sans-serif; --font-brand: Georgia, 'Times New Roman', serif; --gold-gradient: linear-gradient(135deg, #efd083 0%, #d2a646 46%, #b07f28 100%); --scrim: rgba(30, 26, 20, 0.5); --toast-bg: #1e1a14; --toast-text: #f1ece2; --r-pill: 999px; --control-h: 40px; --control-h-sm: 38px; --control-h-lg: 46px; --sidebar-w: 248px; --topbar-h: 60px; --narrow: 960px; } [data-mode='dark'] { --bg: #15130f; --surface: #1e1b16; --surface-2: #24211b; --surface-3: #2c2822; --border: #343029; --border-strong: #4a443a; --text: #f1ece2; --text-2: #b5ac9e; --text-3: #7e766a; --primary: #d9ae52; --primary-hover: #e6be68; --primary-soft: #2e271a; --primary-text: #e1b85f; --on-primary: #1e1a14; --green: #4bc28a; --green-soft: #1b3328; --amber: #e0a94a; --amber-soft: #3a2d14; --amber-text: #e0a94a; --green-text: #4bc28a; --red: #f07c6e; --red-soft: #3d1f1b; --grey: #9a938a; --grey-soft: #2c2822; --blue: #7fb0ea; --blue-soft: #1b2a3d; --focus: #e1b85f; --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-2: 0 4px 16px -4px rgba(0, 0, 0, 0.5); --shadow-3: 0 16px 40px -12px rgba(0, 0, 0, 0.7); --scrim: rgba(0, 0, 0, 0.6); --toast-bg: #2c2822; --toast-text: #f1ece2; }