/* ============================================================================= Design tokens. The single source of every value in this application. Traceable to design_handoff_ict_portal/DESIGN_TOKENS.md, which is itself derived from the Tech Data Brand Guide 2.0. NOTHING outside this file may contain a raw colour value. A lint test enforces that. If a value is missing here, add it here. Two things flip in dark: the accent lightens from Signal Blue to #82A3FF, and the primary button inverts. Every other token maps one to one. ========================================================================== */ :root { /* ---------------------------------------------------------------- brand */ /* Order matters, light to dark: Picton, Lapis, Pen. */ --brand-picton: #36B2E6; /* dark grounds only. Never text on white, 2.4:1 */ --brand-lapis: #2A679E; /* passes as text on white, 5.9:1 */ --brand-pen: #1C1B55; /* ------------------------------------------------ interface, light theme */ --color-ink: #0A0D14; /* headlines, body, primary button fill. 19.4:1 */ --color-slate: #555D6C; /* secondary text, table headers. 6.6:1 */ --color-outline: #828A98; /* ICONS AND DISABLED ONLY. Never text, 3.5:1 fails AA */ --color-hairline: #E3E6ED; /* every border, 1px */ --color-mist: #F0F2F6; /* tinted panels, quiet fills, chips */ --color-cloud-deep: #EBEEF3; /* sidebar hover, secondary buttons */ --color-cloud: #F9FAFB; /* table headers, row hover */ --color-white: #FFFFFF; --color-accent: #2157F5; /* Signal Blue. Screen only, never print. 5.6:1 */ --color-on-accent: #FFFFFF; /* Accent at fixed opacities, so no component invents its own. */ --accent-tint-07: rgba(33, 87, 245, 0.07); --accent-tint-16: rgba(33, 87, 245, 0.16); --accent-tint-20: rgba(33, 87, 245, 0.20); --accent-tint-35: rgba(33, 87, 245, 0.35); /* Semantic surfaces. Components use these, not the raw names above. */ --surface-page: var(--color-white); --surface-sunken: var(--color-cloud); --surface-raised: var(--color-white); --surface-hover: var(--color-cloud); --surface-quiet: var(--color-mist); --border-default: var(--color-hairline); --text-primary: var(--color-ink); --text-secondary: var(--color-slate); --icon-quiet: var(--color-outline); /* --------------------------------------------------------------- status */ /* Every pill carries a dot as well as a fill, so status survives greyscale printing and colour blindness. Text sits on a tint at a darkened variant so each pill clears 4.5:1. */ --status-neutral-text: #555D6C; --status-neutral-bg: #EBEEF3; --status-neutral-dot: #828A98; --status-progress-text: #3B4BA7; --status-progress-bg: #EAECF8; --status-progress-dot: #3B4BA7; --status-waiting-text: #8A5A12; --status-waiting-bg: #FBF0DC; --status-waiting-dot: #C98A1E; --status-error-text: #B3261E; --status-error-bg: #F9DEDC; --status-error-dot: #B3261E; --status-success-text: #2F6B17; --status-success-bg: #E9F7E1; --status-success-dot: #5FC232; /* Destructive control borders, the one place a red hairline is sanctioned. */ --color-destructive: #B3261E; --color-destructive-border: #F0C9C6; --color-destructive-fill: #F9DEDC; /* ----------------------------------------------------------- typography */ --font-display: 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif; --font-body: 'Inter', 'Helvetica Neue', Arial, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* role size / line weight tracking */ --type-display: 600 40px/48px var(--font-display); --track-display: -0.025em; --type-headline: 600 32px/40px var(--font-display); --track-headline: -0.02em; --type-headline-sm: 600 23px/31px var(--font-display); --track-headline-sm: -0.01em; --type-title: 600 20px/28px var(--font-display); --track-title: -0.015em; --type-body-lg: 400 18px/29px var(--font-body); --type-body: 400 16px/26px var(--font-body); --type-data: 400 14px/20px var(--font-body); /* new: tables, forms, rows */ --type-mono: 500 14px/20px var(--font-mono); /* new: IPs, serials, currency */ --type-label: 500 14px/20px var(--font-body); --track-label: 0.01em; --type-label-sm: 600 12px/16px var(--font-body); --track-label-sm: 0.05em; --type-kicker: 600 12px/16px var(--font-body); --track-kicker: 0.16em; --type-eyebrow: 600 12px/16px var(--font-body); --track-eyebrow: 0.16em; /* -------------------------------------------------------------- spacing */ /* Multiples of 8. Nothing between these. */ --space-1: 8px; /* base, icon to label */ --space-2: 12px; /* small stack, inside a chip */ --space-3: 16px; /* gutter, grid gap */ --space-4: 24px; /* container padding */ --space-5: 32px; /* medium stack, between cards */ --space-6: 72px; /* large stack, between sections */ /* --------------------------------------------------------------- radius */ --radius-control: 6px; --radius-card: 8px; --radius-panel: 12px; --radius-hero: 16px; --radius-pill: 999px; /* ------------------------------------------------------------ elevation */ /* Never stack a border, a shadow and a fill on one element. */ --elevation-lift: 0 1px 2px rgba(10, 13, 20, 0.06); --elevation-overlay: 0 12px 28px rgba(10, 13, 20, 0.12); --elevation-node: 0 4px 12px rgba(20, 22, 26, 0.07); /* -------------------------------------------------------------- controls */ --button-primary-bg: linear-gradient(180deg, #20242E 0%, #0A0D14 100%); --button-primary-text: #FFFFFF; --button-primary-shadow: 0 1px 2px rgba(10, 13, 20, 0.12); --focus-ring: 0 0 0 3px var(--accent-tint-16); /* ---------------------------------------------------------------- motion */ --ease-entrance: cubic-bezier(0.22, 1, 0.36, 1); --ease-colour: ease; --duration-interactive: 250ms; --duration-panel: 350ms; --duration-ceiling: 600ms; /* --------------------------------------------------------------- canvas */ --canvas-bg: #FDFDFC; --canvas-dot: #E6E4DD; --cable-default: #B3B8C0; } /* ============================================================== dark theme Pen Blue anchored, not black. */ [data-theme="dark"] { --color-ink: #EDF0F6; /* on surface, 13.8:1 on Pen Blue */ --color-slate: #ACB3C8; /* on surface var, 7.5:1 */ --color-outline: #8088B2; /* icons only, never text */ --color-hairline: #363A60; --color-mist: #333765; --color-cloud-deep: #4C5280; --color-cloud: #222152; --color-white: #1C1B55; --color-accent: #82A3FF; /* the accent lightens. 6.5:1 */ --color-on-accent: #121130; --accent-tint-07: rgba(130, 163, 255, 0.10); --accent-tint-16: rgba(130, 163, 255, 0.22); --accent-tint-20: rgba(130, 163, 255, 0.26); --accent-tint-35: rgba(130, 163, 255, 0.40); --surface-page: #1C1B55; /* base */ --surface-sunken: #121130; /* lowest, sidebar */ --surface-raised: #282A5C; /* container, cards */ --surface-hover: #4C5280; /* bright */ --surface-quiet: #333765; /* high */ --border-default: #363A60; --text-primary: #EDF0F6; --text-secondary: #ACB3C8; --icon-quiet: #8088B2; /* The primary button inverts. */ --button-primary-bg: #EDF0F6; --button-primary-text: #121130; --button-primary-shadow: none; /* Only the two documented status flips. */ --status-error-text: #FFB4AB; --status-error-bg: #5C1F1A; --status-error-dot: #FFB4AB; --status-progress-text: #B9C4FF; --status-progress-bg: #2C3272; --status-progress-dot: #B9C4FF; }