/* ========================================================================== tokens.css — Design tokens for the EBU Annual Report 2025-26 -------------------------------------------------------------------------- SINGLE SOURCE OF TRUTH. Every colour, size, space, radius, width and breakpoint used anywhere in the project is declared here as a CSS custom property and pulled directly from the Figma file (bKNnhS3RvLJTPPxUyplj7C). No other stylesheet should contain a raw "magic number" — reference these variables instead. Values were read from Figma's variable/style definitions. Original sub-pixel values (e.g. 15.2px) are rounded to the nearest rem where it does not affect the visual result; the source value is noted in a comment. ========================================================================== */ :root { /* ---------------------------------------------------------------------- 1. BRAND PALETTE (raw colours) The named colours from the Figma palette. Prefer the SEMANTIC roles in section 2 for component styling; use these only when a literal brand colour is required. ---------------------------------------------------------------------- */ /* Accents */ --brand-cyan: #0AD4FC; /* Picton Blue — primary accent */ --brand-blue: #6ea8ff; /* secondary accent / links */ --brand-rose: #FF3BA0; /* magenta — "A record" / eyebrows */ --brand-gold: #FFC30F; /* Fire Bush — finance / Eurofan accent */ --brand-green: #72f2c0; /* spring green — sustainability glow */ --brand-violet: #632c9b; /* violet — Content pillar */ --brand-violet-deep: #3c1053; /* deep violet gradient stop */ --brand-violet-soft: #a78bfa; /* light violet glow */ --brand-cyan-deep: #43bccd; /* Shakespeare — alt cyan */ --brand-teal: #016570; /* Advocacy accent (Figma) */ --brand-gold-bright: #ffbd00; /* Finance headline gold (Figma) */ /* Dark navy neutral scale (light → dark) */ --navy-50: #f7f8fa; /* Athens Gray */ --navy-100: #eef6ff; /* Zumthor */ --navy-150: #e2e8f0; /* Mystic */ --navy-200: #d3e0ed; /* Botticelli */ --navy-250: #d9e8f7; /* Link Water */ --navy-300: #cbd5e1; /* Geyser */ --navy-350: #99afc4; /* Nepal */ --navy-400: #94a3b8; /* Gull Gray */ --navy-450: #8296a8; /* Bali Hai */ --navy-500: #64748b; /* Slate Gray */ --navy-520: #64798c; /* Lynch — member names / legal links */ --navy-550: #475569; /* Fiord */ --navy-600: #3d5266; /* Fiord (dk) */ --navy-650: #353a4d; /* Bright Gray */ --navy-700: #2c3f50; /* Pickled Bluewood */ --navy-750: #33394f; /* Oxford Blue — page background */ --navy-800: #1e293b; /* Mirage */ --navy-850: #16222d; /* Mirage (dk) */ --navy-900: #111a22; /* Bunker */ --navy-925: #111827; /* Ebony */ --navy-950: #0b1f3a; /* Blue Zodiac */ --navy-975: #08131e; /* near-black */ --navy-1000:#07111a; /* darkest */ --white: #ffffff; /* White / black alphas (overlays, borders, glass surfaces) */ --white-a02: rgba(255, 255, 255, 0.02); --white-a035: rgba(255, 255, 255, 0.035); --white-a05: rgba(255, 255, 255, 0.05); --white-a08: rgba(255, 255, 255, 0.08); --white-a10: rgba(255, 255, 255, 0.10); --white-a16: rgba(255, 255, 255, 0.16); --white-a20: rgba(255, 255, 255, 0.20); --white-a70: rgba(255, 255, 255, 0.70); --white-a90: rgba(255, 255, 255, 0.90); --white-a95: rgba(255, 255, 255, 0.95); --black-a20: rgba(0, 0, 0, 0.20); /* ---------------------------------------------------------------------- 2. SEMANTIC COLOUR ROLES These map Figma's named semantic variables to usage roles. Components reference THESE, so the palette can be re-themed in one place. ---------------------------------------------------------------------- */ --color-bg: var(--navy-750); /* page background #33394f */ --color-bg-deep: var(--navy-975); /* dark feature sections */ --color-bg-deepest: var(--navy-1000); --color-bg-light: var(--white); /* light sections (welcome, members, strategy, advocacy) */ --color-footer-bg: var(--navy-850); /* footer #16222d */ --color-card-light: var(--white); /* light cards on dark sections */ --color-chip: var(--navy-600); /* social chips / newsletter card #3d5266 */ --color-surface: var(--white-a05); /* glass card fill (#ffffff0d) */ --color-surface-strong:var(--white-a10); /* stronger card (#ffffff1a) */ --color-border: var(--white-a10); --color-border-strong: var(--white-a20); --color-text: var(--navy-100); /* primary text #eef6ff */ --color-text-muted: var(--navy-350); /* secondary text #99afc4 */ --color-text-subtle: var(--navy-400); /* tertiary text #94a3b8 */ --color-text-on-light: var(--navy-925); /* text on white cards */ --color-text-on-navy: var(--navy-950); /* dark text on accent (#0b1f3a) */ /* Light-section text roles (dark text on white) */ --color-ink: var(--navy-750); /* body text on light #33394f */ --color-ink-strong: var(--navy-800); /* headings on light #1e293b */ --color-ink-muted: var(--navy-550); /* muted text on light #475569 */ --color-ink-subtle: var(--navy-500); /* subtle text on light#64748b */ --color-footer-text: var(--navy-450); /* footer links #8296a8 */ --color-accent: var(--brand-cyan); /* #37c5ee */ --color-accent-2: var(--brand-blue); /* #6ea8ff */ --color-link: var(--brand-blue); --color-focus: var(--brand-cyan); /* focus ring colour */ /* Per-section theme accents (each feature/pillar has its own glow hue) */ --theme-news: var(--brand-rose); /* highlight-news-exchange */ --theme-sport: var(--brand-cyan); /* highlight-sport-subs */ --theme-eurofan: var(--brand-gold); /* highlight-eurofans */ --theme-awards: var(--brand-blue); /* highlight-awards */ --theme-finance: var(--brand-gold); /* pillar-finance */ --theme-content: var(--brand-violet); /* pillar-content */ /* ---------------------------------------------------------------------- 3. TYPOGRAPHY All type is Poppins (self-hosted), Regular 400 + SemiBold 600, per the project decision. See @font-face in base.css. ---------------------------------------------------------------------- */ --font-sans: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --fw-regular: 400; --fw-semibold: 600; /* Type scale (px → rem @ 16px root). Source px noted in comments. */ --fs-2xs: 0.625rem; /* 10px */ --fs-xs: 0.6875rem; /* 11px — small uppercase eyebrows */ --fs-sm: 0.75rem; /* 12px */ --fs-md: 0.875rem; /* 14px — labels / nav */ --fs-base: 0.95rem; /* 15.2px — body copy (Figma Poppins/Regular) */ --fs-lg: 1.125rem; /* 18px — lead / intro */ --fs-xl: 1.5rem; /* 24px */ --fs-2xl: 1.875rem; /* 30px */ --fs-3xl: 2.25rem; /* 36px — card / sub headings */ --fs-4xl: 3rem; /* 48px */ --fs-5xl: 4.5rem; /* 72px — pillar headlines */ --fs-6xl: 6rem; /* 96px — section headlines (Welcome) */ --fs-display: 11.25rem; /* 180px — hero headline (desktop max) */ /* Fluid headline sizes — mobile-first, clamp()-scaled between breakpoints. min (≈mobile) preferred (viewport) max (≈Figma desktop) */ --fs-fluid-display: clamp(2.75rem, 0.23rem + 10.33vw, 12.625rem); /* hero — Figma 202px @1920 */ --fs-fluid-section: clamp(2.75rem, 1.1rem + 6.9vw, 7.5rem); /* 120 big section heads */ --fs-fluid-h1: clamp(2.75rem, 1.5rem + 5vw, 6rem); /* 96 section */ --fs-fluid-h2: clamp(2.25rem, 1.4rem + 3.4vw, 4.5rem); /* 72 pillar */ --fs-fluid-stat: clamp(3.5rem, 0.9rem + 9vw, 11.25rem); /* big number — Figma 180px */ --fs-fluid-h3: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem); /* 36 card */ --fs-fluid-quote: clamp(1.75rem, 1.1rem + 2vw, 2.75rem); /* 44 pull-quote */ --fs-fluid-card: clamp(1.5rem, 1.2rem + 1.2vw, 1.75rem); /* 28 priority-card title */ /* Line heights (unitless ratios) */ --lh-display: 0.9; /* tight hero / big numbers (Figma 153/180 ≈ 0.85) */ --lh-heading: 1.05; /* headlines */ --lh-snug: 1.2; --lh-base: 1.5; /* body (Figma 22.8/15.2) */ --lh-relaxed: 1.6; --lh-loose: 1.7; /* lead paragraphs (Figma 27.2/16) */ /* Letter spacing */ --ls-display: -0.05em; /* hero / large headlines (Figma -9px@180) */ --ls-tight: -0.03em; /* medium headlines */ --ls-normal: 0; --ls-eyebrow: 0.16em; /* uppercase eyebrows/labels (Figma 2.4px@14) */ --ls-label: 0.08em; /* nav / small caps */ --ls-button: 0.05em; /* uppercase buttons (Figma 0.7px@14) */ --ls-wide: 0.22em; /* extra-wide tracked labels ("OUR PRIORITIES") */ /* Component-specific type values read from Figma */ --lh-hero: 0.72; /* hero headline (Figma 146/202) */ --ls-hero: -0.107em; /* hero headline tracking (Figma -22px@202) */ --shadow-hero-text: 24px 24px 54px rgba(0, 0, 0, 0.25); /* hero headline */ /* ---------------------------------------------------------------------- 4. SPACING SCALE (Figma "item spacing" tokens) ---------------------------------------------------------------------- */ --space-3xs: 0.25rem; /* 4px */ --space-2xs: 0.5rem; /* 8px */ --space-xs: 0.75rem; /* 12px */ --space-sm: 1rem; /* 16px */ --space-md: 1.25rem; /* 20px */ --space-lg: 1.5rem; /* 24px */ --space-xl: 2rem; /* 32px */ --space-2xl: 2.5rem; /* 40px */ --space-3xl: 4rem; /* 64px */ --space-4xl: 5rem; /* 80px */ --space-5xl: 7.5rem; /* 120px — between major sections */ /* Section vertical rhythm (fluid) */ --section-pad-y: clamp(4rem, 2rem + 8vw, 8rem); --section-gap: clamp(3rem, 1.5rem + 6vw, 7.5rem); /* ---------------------------------------------------------------------- 5. LAYOUT / CONTAINER WIDTHS (Figma "width" tokens) ---------------------------------------------------------------------- */ --container-max: 1536px; /* primary content container */ --container-wide: 1440px; --container-narrow: 1152px; --container-text: 672px; /* readable prose measure */ --container-prose: 576px; /* intro paragraph measure */ --gutter: clamp(1.25rem, 0.5rem + 3vw, 6rem); /* page side padding */ /* ---------------------------------------------------------------------- 6. RADII (Figma radius/sm = 16) ---------------------------------------------------------------------- */ --radius-xs: 12px; --radius-sm: 16px; --radius-md: 20px; --radius-lg: 24px; --radius-xl: 32px; --radius-surface: 28px; /* modal + large light surfaces */ --radius-pill: 999px; /* fully rounded buttons/toggles */ /* ---------------------------------------------------------------------- 7. BORDERS / STROKES (Figma "stroke weight" tokens) ---------------------------------------------------------------------- */ --border-thin: 1px; --border-medium: 2px; --border-thick: 4px; /* ---------------------------------------------------------------------- 8. ELEVATION / GLOW ---------------------------------------------------------------------- */ --shadow-card: 0 10px 30px rgba(0, 0, 0, 0.25); /* 2-step elevation rhythm (item 4 of visual cleanup) */ --elev-rest: 0 10px 30px rgba(0, 0, 0, 0.18); --elev-hover: 0 22px 48px rgba(0, 0, 0, 0.28); --shadow-float: 0 24px 60px rgba(0, 0, 0, 0.35); --glow-accent: 0 0 80px rgba(55, 197, 238, 0.35); --blur-glass: blur(12px); /* ---------------------------------------------------------------------- 9. MOTION Durations/easings are referenced by every transition so that the prefers-reduced-motion rule (base.css) can neutralise them globally. ---------------------------------------------------------------------- */ --transition-fast: 150ms; --transition-base: 250ms; --transition-slow: 450ms; --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --ease-out: cubic-bezier(0, 0, 0.2, 1); --ease-reveal: cubic-bezier(0.16, 1, 0.3, 1); /* expressive entrances */ --transition-reveal: 600ms; /* ---------------------------------------------------------------------- 10. Z-INDEX SCALE ---------------------------------------------------------------------- */ --z-base: 0; --z-raised: 10; --z-scrollbar: 50; --z-header: 100; --z-modal: 1000; /* ---------------------------------------------------------------------- 11. BREAKPOINTS (reference only) CSS variables cannot be used inside @media conditions, so media queries use these literal px values. Keep them in sync with this table: --bp-mobile : 480px (designer 390 frame) --bp-tablet : 768px --bp-laptop : 1024px (designer 1024 frame) --bp-desktop : 1440px (designer 1440 frame) --bp-wide : 1441px+ (designer 1920 master) ---------------------------------------------------------------------- */ --bp-mobile: 480px; --bp-tablet: 768px; --bp-laptop: 1024px; --bp-desktop: 1440px; /* Fixed-element sizes */ --header-height: 85px; /* Figma nav bar (4:2491) */ --scrollbar-height: 3px; /* top scroll-progress bar */ /* ---------------------------------------------------------------------- 12. MODAL (light dialog over a blurred, darkened page) From the modal design template. ---------------------------------------------------------------------- */ --modal-bg: var(--white); --modal-backdrop: rgba(18, 20, 28, 0.6); /* darken layer */ --modal-backdrop-blur: 8px; /* blur the page behind */ --modal-text: var(--navy-750); /* #33394f */ --modal-text-muted: #5a6070; /* body copy */ --modal-text-dark: #1a1e29; /* strongest */ --modal-border: rgba(51, 57, 79, 0.15); --modal-teal: #1d6874; /* header glow */ --modal-max-width: 960px; --modal-radius: var(--radius-surface); --modal-shadow: 0 24px 64px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(51, 57, 79, 0.05); /* section accent cycle: rose → gold → cyan */ --modal-accent-1: var(--brand-rose); --modal-accent-2: var(--brand-gold); --modal-accent-3: var(--brand-cyan); }