/* ───────────────────────────────────────────────────────────────────────── Design tokens — the one place colours, type, radii and shadows are defined. Layout from the Horizon UI admin template (Figma "Admin Template Dashboard"): a light ground, white 20px cards, one accent colour. The colours are the GUESTPOSTLINKS brand, read from the logo. Light theme only, by decision — there is no dark variant to keep in step. Every page and component reads these variables. Nothing below this file should contain a raw hex value that a token already names. ───────────────────────────────────────────────────────────────────────── */ @import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700;9..40,800&display=swap'); :root { color-scheme: light; /* ── Palette ── Brand colours are read from the GUESTPOSTLINKS logo (public/assets/logo.png): #F67449 the orange of the link mark → --c-brand-500 #222E3A the slate of the wordmark → --c-slate-800 The rest of each ramp is stepped from those two. */ --c-brand-50: #FFF4EF; --c-brand-100: #FFE4D9; --c-brand-300: #FBA98B; --c-brand-400: #F8875F; --c-brand-500: #F67449; /* logo orange */ --c-brand-600: #E2572B; /* icons and marks only (white text on it is 3.7:1: too faint) */ --c-brand-700: #C2441C; /* buttons (white text 5.1:1) and orange TEXT on white */ --c-brand-800: #A3381A; /* button hover */ --c-slate-900: #1A242E; --c-slate-800: #222E3A; /* logo slate */ --c-slate-700: #2E3C4A; --c-slate-600: #5B6875; /* body copy: 5.7:1 */ --c-slate-500: #66727F; /* labels & meta: 4.9:1 on white, 4.6:1 on the page (was #8A96A3, 3.0:1) */ --c-slate-300: #DDE2E8; --c-slate-200: #EBEEF2; --c-slate-100: #F5F6F8; --c-white: #FFFFFF; --c-green-500: #01A66A; /* fills and illustrations */ --c-green-700: #047A50; /* green TEXT: 5.3:1 on white (500 is 3.1:1) */ --c-green-50: #E6F7F0; /* Warning is amber, not orange, so a held order never reads as "brand". */ --c-amber-700: #9A6200; --c-amber-400: #F5B400; --c-amber-50: #FFF7DB; --c-red-500: #D92D20; --c-red-600: #B42318; /* red TEXT: 5.6:1 on its soft background (500 is 4.3:1) */ --c-red-400: #EF5A4C; --c-red-50: #FDEEEC; --c-blue-500: #2A78D6; --c-blue-50: #EBF3FD; /* ── Semantic roles (what components use) ── */ --page-bg: var(--c-slate-100); --surface: var(--c-white); --surface-2: #FBFBFC; /* row hover / inset panels */ --surface-sunken: var(--c-slate-100); --border: var(--c-slate-200); --border-strong: var(--c-slate-300); --text: var(--c-slate-800); /* headings, values */ --text-strong: var(--c-slate-900); --muted: var(--c-slate-600); /* body copy on cards */ --text-3: var(--c-slate-500); /* labels, meta */ --brand: var(--c-brand-500); /* the logo orange: marks, icons, indicators */ --accent: var(--c-brand-700); /* filled controls: white text stays readable */ --accent-hover:var(--c-brand-800); --accent-text: var(--c-brand-700); /* orange words on white */ --accent-soft: var(--c-brand-50); --accent-tint: var(--c-brand-100); --brand-gradient: linear-gradient(135deg, var(--c-brand-400) 0%, var(--c-brand-600) 100%); --dark-gradient: linear-gradient(135deg, var(--c-slate-700) 0%, var(--c-slate-900) 100%); --good: var(--c-green-700); --good-soft: var(--c-green-50); --warn: var(--c-amber-700); --warn-soft: var(--c-amber-50); --warn-dot: var(--c-amber-400); --bad: var(--c-red-600); --bad-soft: var(--c-red-50); --bad-dot: var(--c-red-400); --info: var(--c-blue-500); --info-soft: var(--c-blue-50); /* Sidebar */ --c-slate-650: #46525F; /* menu text: 7.9:1 on white */ --side-bg: var(--c-white); --side-border: var(--c-slate-200); --side-text: var(--c-slate-650); /* resting menu text */ --side-icon: var(--c-slate-600); /* resting menu icons: 5.7:1 on white */ --side-icon-active: var(--c-brand-600); /* current page icon: 3.5:1 on its orange pill */ --side-caption: var(--c-slate-500); /* "Main", "Modules" */ --side-text-active: var(--c-slate-800); --side-muted: var(--c-slate-500); --side-hover-bg: var(--c-slate-100); --side-active-bg: var(--c-brand-50); /* the current page's pill */ --side-width: 290px; --content-width: 75vw; /* main content column, centred */ /* Dark surfaces (bulk action bar, tooltips) — the logo slate. */ --inverse-bg: var(--c-slate-800); --inverse-text: #D9DFE6; --inverse-line: rgba(255,255,255,.14); --overlay: rgba(26,36,46,.42); /* On filled colour and on the slate surfaces */ --on-fill: var(--c-white); /* text & icons on orange or slate */ --on-dark-2: rgba(255,255,255,.80); /* secondary text on slate */ --on-dark-line: rgba(255,255,255,.40); --on-dark-hover: rgba(255,255,255,.08); --on-dark-ring: rgba(255,255,255,.90); --bad-on-dark: #FF8A80; /* a failure count on slate */ --brand-haze: rgba(246,116,73,.35); --tint-dark: rgba(26,36,46,.05); --topbar-glass: rgba(245,246,248,.78); /* ── Typography ── */ --font-sans: 'DM Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --fs-xs: 11px; --fs-sm: 12.5px; --fs-md: 14px; --fs-lg: 16px; --fs-xl: 22px; --fs-2xl: 34px; --fw-regular: 400; --fw-medium: 500; --fw-bold: 700; --fw-black: 800; /* ── Shape ── */ --radius-xs: 8px; --radius-sm: 12px; --radius: 20px; /* cards */ --radius-lg: 30px; --radius-pill: 999px; /* ── Elevation ── */ --shadow: 14px 17px 40px 4px rgba(34,46,58,.06); --shadow-md: 14px 17px 40px 4px rgba(34,46,58,.12); --shadow-lg: 0 24px 60px -12px rgba(26,36,46,.30); --shadow-brand: 0 18px 40px -14px rgba(226,87,43,.55); --shadow-dark: 0 18px 40px -14px rgba(26,36,46,.55); --shadow-side: 14px 17px 40px 4px rgba(34,46,58,.05); --shadow-knob: 0 2px 4px rgba(26,36,46,.22); --glow-brand: 0 8px 20px -8px rgba(246,116,73,.70); --glow-brand-lg: 0 20px 50px -16px rgba(246,116,73,.75); --focus-ring: 0 0 0 3px var(--accent-tint); /* ── Spacing ── */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; /* ── Data visualisation ── Categorical series in FIXED order (never cycled), led by the brand orange. Validated with the dataviz palette checker against #FFFFFF: lightness band, chroma, CVD and normal-vision separation all pass. Slots 3 and 5 are under 3:1 contrast, so every chart ships a legend, tooltips and a table view. */ --series-1: #E2572B; /* brand orange */ --series-2: #2A78D6; /* blue */ --series-3: #1BAF7A; /* aqua */ --series-4: #7551FF; /* violet */ --series-5: #EDA100; /* amber */ --series-other: #8A96A3; --grid: #EEF0F3; /* Legacy aliases — names the pages' rendering code already refers to. */ --bg: var(--page-bg); }