/* ========================================================================== Design tokens Single source of truth. Nothing downstream hard-codes a colour, size or easing curve — it references a token from here. Mirrored into theme.json so the block editor offers the same palette. ========================================================================== */ :root { /* ---- Colour ------------------------------------------------------------- Deep teal-navy and warm gold, carried over from the design this rebuild is based on. Navy carries the authority, gold supplies the "expensive" signal, and warm cream keeps it from going corporate-cold. Gold discipline: #D4AF37 on cream measures about 1.9:1 contrast, so it is never used for text on a light ground — only as fills, rules and icons, or as a button background carrying navy text. Gold *text* uses --accent-ink, which is dark enough to pass AA. Getting this wrong is what makes gold look cheap instead of luxurious. */ --ink: #0B2B3C; /* primary text, dark sections */ --ink-soft: #16425B; /* secondary headings, hover grounds */ --ink-muted: #556773; /* body copy at rest, captions */ --ink-faint: #8B9BA5; /* metadata, disabled */ --paper: #FAF8F3; /* page background */ --paper-warm: #F3EFE7; /* alternating section bands */ --paper-deep: #EAE4D8; /* pull-quotes, inset panels */ --white: #FFFFFF; --rule: #DED8CC; /* hairlines on cream */ --rule-ink: rgba(250, 248, 243, 0.15); /* hairlines on navy */ --accent: #D4AF37; /* gold — fills, rules, icons, accents on navy */ --accent-hover: #C5A017; --accent-ink: #7A5F14; /* accessible gold for TEXT on cream (AA) */ --accent-wash: rgba(212, 175, 55, 0.12); --whatsapp: #25D366; /* brand green, carried from the old design */ /* Semantic aliases — components reference these, not raw colours, so recolouring a state never means hunting through component files. */ --text: var(--ink); --text-secondary: var(--ink-muted); --surface: var(--paper); --surface-raised: var(--white); --border: var(--rule); --focus-ring: var(--ink-soft); /* Navy overlay for text-over-image heroes. Two stops, matching the density of the original design — enough to guarantee AA on white headline text. */ --overlay-top: rgba(11, 43, 60, 0.82); --overlay-bottom: rgba(11, 43, 60, 0.94); /* Data-viz ramp for stipend bars and sector comparisons. Sequential, tested for contrast against both cream and navy grounds. */ --data-1: #0B2B3C; --data-2: #1D5069; --data-3: #3C7A97; --data-4: #7FA9BC; --data-5: #D4AF37; /* ---- Type --------------------------------------------------------------- Instrument Serif for display only — it has real stroke contrast at large sizes and falls apart under 24px, so it never touches body copy. Plus Jakarta Sans carries everything readable. JetBrains Mono is reserved for data labels, timeline markers and eyebrow tags. */ --font-display: 'Instrument Serif', 'Iowan Old Style', Georgia, serif; --font-body: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* Fluid scale, 1.25 ratio at the small end opening to 1.333 at the top. Every step is clamped so nothing needs a media query to resize. */ --text-2xs: 0.6875rem; /* 11px — eyebrows */ --text-xs: 0.75rem; /* 12px — metadata */ --text-sm: 0.875rem; /* 14px — captions */ --text-base: clamp(0.9375rem, 0.91rem + 0.14vw, 1rem); /* 15→16px body */ --text-lg: clamp(1.0625rem, 1.03rem + 0.17vw, 1.125rem); /* lede */ --text-xl: clamp(1.1875rem, 1.13rem + 0.28vw, 1.375rem); --text-2xl: clamp(1.5rem, 1.38rem + 0.6vw, 1.875rem); --text-3xl: clamp(1.75rem, 1.56rem + 0.94vw, 2.375rem); --text-4xl: clamp(2rem, 1.68rem + 1.6vw, 3rem); --text-5xl: clamp(2.25rem, 1.75rem + 2.5vw, 3.75rem); /* hero only */ --leading-tight: 1.04; /* display — tight enough to read as a mass */ --leading-snug: 1.22; --leading-normal: 1.5; --leading-relaxed: 1.68; /* long-form article body */ --tracking-tight: -0.022em; /* large display sizes need negative tracking */ --tracking-snug: -0.012em; --tracking-normal: 0; --tracking-wide: 0.02em; --tracking-eyebrow: 0.18em; /* uppercase mono labels */ --measure: 68ch; /* general prose */ --measure-tight: 58ch; /* article body — shorter lines, better rhythm */ /* ---- Space -------------------------------------------------------------- Base-4 scale. Section padding starts at --space-20 because the design depends on breathing room; anything tighter reads as a template. */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; --space-32: 8rem; --space-40: 10rem; /* Fluid section rhythm — 56px on a phone, 112px on a wide desktop. Deliberately tighter than the earlier draft: at 11rem the page ran past 7000px tall and no section had a visible neighbour, which reads as emptiness rather than as breathing room. */ --section-y: clamp(3.5rem, 2.6rem + 3.2vw, 7rem); --section-y-tight: clamp(2.5rem, 2rem + 2vw, 4.5rem); /* ---- Layout ------------------------------------------------------------- */ --container: 75rem; /* 1200px — main content width */ --container-wide: 87.5rem; /* 1400px — full-bleed data sections */ --container-text: 44rem; /* 704px — article column */ --gutter: clamp(1.25rem, 0.9rem + 1.7vw, 2.5rem); /* ---- Radii -------------------------------------------------------------- Generous squircles. The -inner values keep nested corners concentric inside the double-bezel shells (outer radius minus shell padding). */ --radius-sm: 0.5rem; --radius-md: 0.875rem; --radius-lg: 1.25rem; --radius-xl: 2rem; --radius-inner: 1.625rem; /* = xl minus 0.375rem shell padding */ --radius-full: 9999px; /* ---- Elevation ---------------------------------------------------------- Ambient and diffuse, tinted with the navy rather than black — black shadows on cream read as dirt. */ --shadow-sm: 0 1px 2px rgba(11, 43, 60, 0.04), 0 2px 6px rgba(11, 43, 60, 0.03); --shadow-md: 0 2px 4px rgba(11, 43, 60, 0.03), 0 8px 20px rgba(11, 43, 60, 0.05); --shadow-lg: 0 4px 8px rgba(11, 43, 60, 0.03), 0 18px 44px rgba(11, 43, 60, 0.07); --shadow-xl: 0 8px 16px rgba(11, 43, 60, 0.04), 0 32px 72px rgba(11, 43, 60, 0.09); /* Inner top highlight — makes a surface read as physical, catching light. */ --highlight-inset: inset 0 1px 0 rgba(255, 255, 255, 0.7); --highlight-inset-ink: inset 0 1px 0 rgba(255, 255, 255, 0.08); /* ---- Motion ------------------------------------------------------------- One primary curve used everywhere so the whole interface decelerates with the same weight. Never linear, never ease-in-out. */ --ease: cubic-bezier(0.32, 0.72, 0, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1); --duration-fast: 180ms; --duration-base: 320ms; --duration-slow: 620ms; --duration-reveal: 820ms; /* ---- Layers ------------------------------------------------------------- Named systemic layers only. No arbitrary z-index anywhere else. */ --z-base: 1; --z-sticky: 100; --z-nav: 200; --z-overlay: 300; --z-modal: 400; --z-grain: 500; /* film grain sits above everything, pointer-events:none */ --z-float: 600; /* WhatsApp / call buttons */ } /* Honour the OS reduced-motion preference by collapsing every duration. Kept in tokens so it applies before any component can opt out. */ @media (prefers-reduced-motion: reduce) { :root { --duration-fast: 1ms; --duration-base: 1ms; --duration-slow: 1ms; --duration-reveal: 1ms; } }