/* ============================================================================= PARCEL ROCKET — DESIGN TOKENS ============================================================================= Two layers: 1. Raw palette ramps. These exist ONLY in this file and must never be used directly by a component. 2. Semantic tokens. Everything else in the app styles against these. Theming rule: light is the base palette on :root. Dark is ONE override block at the foot of this file, keyed on :root[data-theme="dark"]. There is deliberately no `@media (prefers-color-scheme: dark)` copy of that block. A pre-paint script in fragments/layout.html resolves "follow the OS" into an explicit data-theme attribute before the first paint (and keeps it in step with the OS while the page is open), so one selector covers every case. That leaves exactly one definition per token, which is what stops the two palettes drifting apart the way duplicated blocks always do. Dark is designed, not inverted: surfaces get LIGHTER as they come forward, and elevation is carried by borders plus a soft glow rather than by drop shadows, which are invisible on a dark ground. Contrast: every text token is >= 4.5:1 (WCAG AA) against every surface it is allowed to sit on, in BOTH schemes - including --text-subtle, the quietest tier. A solid fill pairs with an ink token that passes ON that fill, which is why --danger is the 600 rather than the 500: white on #ef4444 is 3.76:1. ========================================================================== */ :root { color-scheme: light; /* ---------- Raw ramps (private) ---------- */ /* Petrol - the brand accent. Chosen to sit apart from the blues and purples every other security product uses, and from the greens and reds the status colours need for themselves. */ --_petrol-50: #eef6f7; --_petrol-100: #dcebec; --_petrol-200: #bbd9dc; --_petrol-300: #7fd0d9; --_petrol-350: #6cc4cf; --_petrol-400: #56b6c2; --_petrol-500: #2b8f9c; --_petrol-600: #0f5560; --_petrol-700: #0b434c; --_petrol-800: #08343b; --_petrol-900: #062a30; --_petrol-950: #041d21; /* Slate - neutrals, leaning very slightly toward the petrol so a grey reads as chosen rather than inherited. */ --_slate-0: #ffffff; --_slate-25: #fafbfb; --_slate-50: #f2f4f3; --_slate-100: #e7ebea; --_slate-200: #d5dbda; --_slate-300: #b9c2c1; --_slate-400: #8a9695; --_slate-450: #74807f; --_slate-500: #5f6b6a; --_slate-600: #465352; --_slate-700: #36413f; --_slate-800: #263334; --_slate-850: #1c2627; --_slate-900: #151d1e; --_slate-950: #0f1516; --_slate-1000: #0a0f10; /* Neutrals for dark-mode text, which needs a lighter range than the light-mode ramp provides. */ --_mist-100: #e8eeed; --_mist-400: #9fadac; --_mist-500: #869594; /* Status hues */ --_blue-100: #dbeafe; --_blue-300: #93c5fd; --_blue-500: #3b82f6; --_blue-700: #1d4ed8; --_blue-950: #10254d; --_amber-100: #fef3c7; --_amber-300: #fcd34d; --_amber-400: #e2a23b; --_amber-500: #f59e0b; --_amber-700: #b45309; --_amber-800: #7a4a00; --_amber-950: #40250a; --_emerald-100: #d1fae5; --_emerald-300: #6ee7b7; --_emerald-500: #10b981; --_emerald-700: #047857; --_emerald-950: #05301f; --_violet-100: #ede9fe; --_violet-300: #c4b5fd; --_violet-500: #8b5cf6; --_violet-700: #6d28d9; --_violet-950: #2b1a55; --_red-100: #fee2e2; --_red-300: #fca5a5; --_red-500: #ef4444; --_red-600: #dc2626; --_red-700: #b91c1c; --_red-950: #451616; /* ========================================================================= SEMANTIC TOKENS — LIGHT (the base palette) ====================================================================== */ /* ---------- Surfaces, furthest back to closest to the reader ---------- */ --canvas: var(--_slate-50); --surface: var(--_slate-0); --surface-raised: var(--_slate-0); --surface-sunken: var(--_slate-100); --surface-hover: var(--_slate-50); --surface-active: var(--_slate-100); --surface-inverse: var(--_slate-900); /* ---------- Sidebar reads as a distinct plane from the content ---------- */ --sidebar-bg: var(--_slate-0); --sidebar-border: var(--_slate-200); --sidebar-item: var(--_slate-600); --sidebar-item-hover-bg: var(--_slate-100); --sidebar-item-active-bg: var(--_petrol-100); --sidebar-item-active: var(--_petrol-600); --topbar-bg: rgba(255, 255, 255, 0.82); --topbar-border: var(--_slate-200); /* ---------- Borders ---------- */ --border: var(--_slate-200); --border-strong: var(--_slate-300); --border-subtle: var(--_slate-100); /* ---------- Text ---------- --text-subtle is the quietest tier, and it still carries meaning (ids, relative dates, group labels), so it holds AA like the two above it. */ --text: var(--_slate-900); --text-muted: var(--_slate-600); --text-subtle: var(--_slate-500); --text-inverse: var(--_slate-0); /* ---------- Accent ---------- --accent is a FILL. --accent-text is the same idea as inline text, and in dark it has to lift well clear of the ground (the light fill would vanish into it), where the fill itself lightens and takes a dark ink - see --accent-fg there. */ --accent: var(--_petrol-600); --accent-hover: var(--_petrol-700); --accent-active: var(--_petrol-800); --accent-fg: #ffffff; --accent-text: var(--_petrol-600); --accent-text-hover: var(--_petrol-700); --accent-soft: var(--_petrol-100); --accent-soft-fg: var(--_petrol-600); --accent-border: var(--_petrol-200); /* ---------- Time ---------- The one secondary accent, and it means exactly one thing: a deadline, a countdown, a reminder. Never decoration. --time is a FILL that takes --time-fg; --time-soft/-soft-fg is the tinted chip. */ --time: var(--_amber-400); --time-fg: var(--_slate-900); --time-soft: #f8eacb; --time-soft-fg: var(--_amber-800); /* ---------- Focus ---------- */ --focus-ring: var(--_petrol-500); --focus-ring-shadow: 0 0 0 3px rgba(43, 143, 156, 0.3); /* ---------- Feedback ---------- -fg = ink that sits ON the solid fill. -text = the colour as inline text on a normal surface. -soft/-soft-fg = the tinted pill treatment. */ --danger: var(--_red-600); --danger-hover: var(--_red-700); --danger-fg: #ffffff; --danger-text: var(--_red-700); --danger-soft: var(--_red-100); --danger-soft-fg: var(--_red-700); --danger-ring-shadow: 0 0 0 3px rgba(220, 38, 38, 0.16); --danger-ring-shadow-strong: 0 0 0 3px rgba(220, 38, 38, 0.24); --success: var(--_emerald-500); --success-text: var(--_emerald-700); --success-soft: var(--_emerald-100); --success-soft-fg: var(--_emerald-700); --warning: var(--_amber-500); --warning-soft: var(--_amber-100); --warning-soft-fg: var(--_amber-700); --info-soft: var(--_blue-100); --info-soft-fg: var(--_blue-700); /* ---------- Parcel status ---------- Progression: waiting -> sent -> received -> viewed (done). */ --status-waiting-bg: var(--_blue-100); --status-waiting-fg: var(--_blue-700); --status-waiting-dot: var(--_blue-500); --status-sent-bg: var(--_amber-100); --status-sent-fg: var(--_amber-700); --status-sent-dot: var(--_amber-500); --status-received-bg: var(--_violet-100); --status-received-fg: var(--_violet-700); --status-received-dot: var(--_violet-500); --status-viewed-bg: var(--_emerald-100); --status-viewed-fg: var(--_emerald-700); --status-viewed-dot: var(--_emerald-500); --status-expired-bg: var(--_slate-100); --status-expired-fg: var(--_slate-600); --status-expired-dot: var(--_slate-450); /* ---------- Elevation ---------- Light: real shadows. Dark: the same geometry with a much deeper, more opaque ink, since a soft shadow does not read on a dark ground. */ --shadow-xs: 0 1px 2px rgba(16, 20, 30, 0.05); --shadow-sm: 0 1px 3px rgba(16, 20, 30, 0.08), 0 1px 2px rgba(16, 20, 30, 0.04); --shadow-md: 0 4px 12px rgba(16, 20, 30, 0.08), 0 2px 4px rgba(16, 20, 30, 0.04); --shadow-lg: 0 12px 32px rgba(16, 20, 30, 0.12), 0 4px 8px rgba(16, 20, 30, 0.05); --shadow-xl: 0 24px 56px rgba(16, 20, 30, 0.16); /* Overlay behind modals and drawers */ --overlay: rgba(16, 20, 30, 0.45); /* Floating hint */ --tooltip-bg: var(--_slate-900); --tooltip-fg: var(--_slate-0); --tooltip-border: var(--_slate-900); /* Selection */ --selection-bg: var(--_petrol-200); /* ========================================================================= NON-COLOUR TOKENS (scheme independent) ====================================================================== */ --radius-xs: 4px; --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 24px; --radius-pill: 999px; --space-0: 0; --space-1: 2px; --space-2: 4px; --space-3: 8px; --space-4: 12px; --space-5: 16px; --space-6: 20px; --space-7: 24px; --space-8: 32px; --space-9: 40px; --space-10: 48px; --space-12: 64px; --space-16: 96px; /* Vertical rhythm. Used by .stack / .panel-stack so pages do not each invent their own margins - see base.css. The two largest steps are viewport-aware. Vertical space is the scarce resource on a laptop, not a desktop: the same 32px gap that looks right on a 27" monitor is 3% of a 16" laptop's height, and a form with five of them spends a sixth of the screen on air before the first field. These shrink on a short viewport and open back up on a tall one, so nothing is pinned to a single screen size. */ --gap-tight: var(--space-3); /* 8px - label -> control */ --gap-field: clamp(12px, 1.5vh, 16px); /* form field -> next field */ --gap-block: clamp(14px, 1.9vh, 20px); /* block -> block inside a panel*/ --gap-section: clamp(20px, 2.6vh, 32px); /* panel -> panel down a page */ /* Page gutters. The bottom one was a flat 64px, which on a laptop is a whole field's worth of nothing under the last control. */ --content-pad-y: clamp(20px, 2.4vh, 32px); --content-pad-b: clamp(28px, 4.5vh, 64px); /* Panel chrome. A panel's header and footer are fixed overhead on every step of the wizard, so they compress with the viewport too. */ --panel-pad-y: clamp(14px, 1.8vh, 24px); --panel-pad-x: var(--space-7); /* Control geometry. Every button, input, select and native control snaps to one of these three heights so nothing is a pixel or two off its neighbour. */ --control-h-sm: 34px; --control-h: 40px; --control-h-lg: 48px; --control-pad-x: var(--space-5); --control-pad-x-sm: var(--space-4); --control-pad-x-lg: var(--space-6); /* Minimum comfortable touch target, applied at the mobile breakpoint. */ --tap-min: 44px; --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; /* Type scale. Tuned for a 15-16" laptop, which is what this application is actually used on. The previous scale started at 14px and stepped in 1-2px increments, so six of its nine sizes sat between 11px and 17px: everything was legible but nothing was clearly more important than anything else. This one keeps the small end only slightly larger and opens up the gaps higher up, so the hierarchy comes from the intervals rather than from making every element bigger. --text-md is the body size. */ --text-2xs: 0.75rem; /* 12px - dot labels, the smallest thing we ship */ --text-xs: 0.8125rem; /* 13px - column headers, hints, chips */ --text-sm: 0.875rem; /* 14px - secondary text, dense controls */ --text-md: 0.9375rem; /* 15px - BODY: form controls, table cells, nav */ --text-base:1rem; /* 16px - emphasised body, primary list values */ --text-lg: 1.1875rem; /* 19px - card and panel titles */ --text-xl: 1.4375rem; /* 23px - section titles */ --text-2xl: 1.875rem; /* 30px - page titles */ --text-3xl: 2.25rem; /* 36px - document titles */ --text-4xl: 2.75rem; /* 44px - landing section headings */ --text-5xl: 3.5rem; /* 56px - landing hero */ --leading-tight: 1.25; --leading-snug: 1.4; --leading-normal: 1.55; --leading-relaxed: 1.7; --weight-normal: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --ease: cubic-bezier(0.4, 0, 0.2, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --duration-fast: 120ms; --duration-normal: 200ms; --duration-slow: 320ms; --sidebar-width: 248px; --sidebar-width-collapsed: 64px; --topbar-height: 60px; /* Content column widths, by what the page is for. The default is wide enough that a list fills a 16" laptop with the sidebar either expanded or collapsed - collapsing the sidebar has to give the table the space back, not just widen the margins around it. It still caps before a 27" monitor stretches a row to an unreadable length. */ --content-max: 1680px; /* lists, dashboards */ --content-max-wizard: 1180px; /* the new-parcel wizard */ --content-max-narrow: 960px; /* settings and other single-column pages */ --content-pad: var(--space-8); /* page gutter, see below */ --z-sticky: 100; --z-topbar: 200; --z-sidebar: 300; --z-overlay: 400; --z-drawer: 500; --z-modal: 600; --z-toast: 700; } /* The page gutter is a token, not a per-component media query, so the topbar, the content column and anything else that spans the page stay flush with each other at every width. */ @media (max-width: 991.98px) { :root { --content-pad: var(--space-6); } } /* 20px */ @media (max-width: 575.98px) { :root { --content-pad: var(--space-5); } } /* 16px */ /* The display sizes are set for a laptop. On a phone they would take four lines for a page title, so the top of the scale steps back down. The body sizes do not change - 15px is the comfortable minimum on any screen, and a form control below 16px makes iOS Safari zoom the page when it is focused. */ @media (max-width: 767.98px) { :root { --text-lg: 1.125rem; /* 18px */ --text-xl: 1.3125rem; /* 21px */ --text-2xl: 1.5rem; /* 24px */ --text-3xl: 1.75rem; /* 28px */ --text-4xl: 2rem; /* 32px */ --text-5xl: 2.5rem; /* 40px */ } } /* ============================================================================= SEMANTIC TOKENS — DARK ============================================================================= Declared once. The pre-paint script in fragments/layout.html always resolves the theme to an explicit data-theme, so there is no prefers-color-scheme copy of this block to keep in sync — and no chance of the two drifting apart. ========================================================================== */ :root[data-theme="dark"] { color-scheme: dark; --canvas: var(--_slate-950); --surface: var(--_slate-900); --surface-raised: var(--_slate-850); --surface-sunken: var(--_slate-1000); --surface-hover: var(--_slate-850); --surface-active: var(--_slate-800); --surface-inverse: var(--_slate-100); --sidebar-bg: var(--_slate-900); --sidebar-border: #212c2d; --sidebar-item: var(--_mist-400); --sidebar-item-hover-bg: var(--_slate-850); --sidebar-item-active-bg: rgba(86, 182, 194, 0.16); --sidebar-item-active: var(--_petrol-300); --topbar-bg: rgba(21, 29, 30, 0.86); --topbar-border: #212c2d; --border: #263334; --border-strong: #364647; --border-subtle: #1d2829; --text: var(--_mist-100); --text-muted: var(--_mist-400); --text-subtle: var(--_mist-500); --text-inverse: var(--_slate-950); --accent: var(--_petrol-400); --accent-hover: var(--_petrol-350); --accent-active: var(--_petrol-300); --accent-fg: #06181b; --accent-text: var(--_petrol-300); --accent-text-hover: var(--_petrol-200); --accent-soft: rgba(86, 182, 194, 0.16); --accent-soft-fg: var(--_petrol-200); --accent-border: rgba(86, 182, 194, 0.4); --time: #e8b55a; --time-fg: #1c1503; --time-soft: #2b2311; --time-soft-fg: #e8b55a; --focus-ring: var(--_petrol-400); --focus-ring-shadow: 0 0 0 3px rgba(86, 182, 194, 0.36); --danger-hover: var(--_red-500); --danger-text: var(--_red-300); --danger-soft: var(--_red-950); --danger-soft-fg: var(--_red-300); --danger-ring-shadow: 0 0 0 3px rgba(220, 38, 38, 0.32); --danger-ring-shadow-strong: 0 0 0 3px rgba(220, 38, 38, 0.46); --success-text: var(--_emerald-300); --success-soft: var(--_emerald-950); --success-soft-fg: var(--_emerald-300); --warning-soft: var(--_amber-950); --warning-soft-fg: var(--_amber-300); --info-soft: var(--_blue-950); --info-soft-fg: var(--_blue-300); --status-waiting-bg: var(--_blue-950); --status-waiting-fg: var(--_blue-300); --status-sent-bg: var(--_amber-950); --status-sent-fg: var(--_amber-300); --status-received-bg: var(--_violet-950); --status-received-fg: var(--_violet-300); --status-viewed-bg: var(--_emerald-950); --status-viewed-fg: var(--_emerald-300); --status-expired-bg: var(--_slate-800); --status-expired-fg: var(--_mist-400); --status-expired-dot: var(--_slate-500); --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.55), 0 2px 4px rgba(0, 0, 0, 0.3); --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.6), 0 4px 8px rgba(0, 0, 0, 0.35); --shadow-xl: 0 24px 56px rgba(0, 0, 0, 0.7); --overlay: rgba(0, 0, 0, 0.65); --tooltip-bg: var(--_slate-800); --tooltip-fg: var(--_mist-100); --tooltip-border: var(--border-strong); --selection-bg: rgba(86, 182, 194, 0.32); }