/* EGI brand v2.0 + Constellation Amendment * -------------------------------------------------------------- * Single source of truth for all design tokens across the EGI portal. * Every brand-bearing CSS value in the codebase resolves to a token * defined here. No raw hex outside this file (enforced by QA). * * Authority: EGI-brand-spec-v2.docx (April 29, 2026), reproduced * verbatim in BRAND_SPEC.md. When this file and the spec disagree, * the spec wins and this file is regenerated. * * Layering: * :root → light-theme default values * :root[data-theme="dark"] → dark-theme overrides * * Load order (mandatory, see §11.2): * reset.css → brand.css → components.css → app.css [→ atmosphere.css] * * Theme bootstrap: every HTML page must inline the FOUC-prevention * script (see BRAND_SPEC.md §11.3) BEFORE the first . * -------------------------------------------------------------- */ /* ── Inter Variable, self-hosted ──────────────────────────────── */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/fonts/inter/Inter-Variable.woff2') format('woff2-variations'), url('/fonts/inter/Inter-Variable.woff2') format('woff2'); } /* ── Light theme (default) ────────────────────────────────────── */ :root { /* ---------- Color: Navy (trust, rigor, default ink) ---------- */ --navy-50: #F1F5F8; --navy-100: #E4ECF1; --navy-200: #C4D9E9; --navy-300: #95C4E4; --navy-400: #64A8D8; --navy-500: #338DCC; --navy-600: #2971A3; --navy-700: #1F557A; --navy-800: #163E5A; --navy-900: #0E2739; /* ---------- Color: Teal (brand accent, links, info-leaning) ---------- */ --teal-50: #F1F7F8; --teal-100: #E4F0F1; --teal-200: #C4E4E9; --teal-300: #95DBE5; --teal-400: #64CBD9; --teal-500: #33BACC; --teal-600: #2895A4; --teal-700: #1E707B; --teal-800: #16525A; --teal-900: #0E3439; /* ---------- Color: Purple (secondary accent, info, premium) ---------- */ --purple-50: #F4F3F7; --purple-100: #E9E7EE; --purple-200: #D3CDE0; --purple-300: #B6A8D1; --purple-400: #9480BC; --purple-500: #7258A7; --purple-600: #5B4686; --purple-700: #453564; --purple-800: #32274A; --purple-900: #20192F; /* ---------- Color: Pink (CTA, highlight, error pairing) ---------- */ --pink-50: #F8F2F5; --pink-100: #F1E4EA; --pink-200: #E8C5D5; --pink-300: #E297BA; --pink-400: #D5679A; --pink-500: #C8377A; --pink-600: #A02C62; --pink-700: #782149; --pink-800: #581836; --pink-900: #380F22; /* ---------- Color: Yellow (NEW v2.0 — highlights, dark accent, callouts) ---------- */ --yellow-50: #FEFCE8; --yellow-100: #FEF9C3; --yellow-200: #FDF1A6; --yellow-300: #FBE57A; --yellow-400: #F4D35E; --yellow-500: #E8B923; --yellow-600: #C99A1B; --yellow-700: #9C7714; --yellow-800: #73570F; --yellow-900: #4A380A; /* ---------- Color: Amber (canonical warning, inline annotations) ---------- */ --amber-50: #FFFBEB; --amber-100: #FEF3C7; --amber-200: #FDE3A1; --amber-300: #FBCD6E; --amber-400: #F5B142; --amber-500: #EE911E; --amber-600: #D97706; --amber-700: #B45309; --amber-800: #8A3F08; --amber-900: #5A2A06; /* ---------- Color: Orange (NEW v2.0 — energy, urgency, bridges amber↔pink) ---------- */ --orange-50: #FFF7ED; --orange-100: #FFEDD5; --orange-200: #FED7AA; --orange-300: #FDBA74; --orange-400: #FB923C; --orange-500: #F97316; --orange-600: #EA580C; --orange-700: #C2410C; --orange-800: #9A3412; --orange-900: #5C1F09; /* ---------- Semantic surfaces ---------- */ /* Body bg shifted from spec #FFFFFF to a navy-tinted off-white * (#FAFBFE) per v2.1 amendment — pure white is fatiguing on long- * form pages, cards lose elevation when both surfaces are #FFFFFF, * and the constellation atmosphere reads better against a 2%-tinted * background. Cards / elevated surfaces stay pure #FFFFFF so they * pop visibly above the page. */ --bg: #FAFBFE; --bg-elevated: #FFFFFF; --bg-tint: var(--navy-50); --border: var(--navy-200); --border-strong:var(--navy-300); /* ---------- Semantic ink ---------- */ --ink: var(--navy-800); --ink-strong: var(--navy-900); --ink-muted: var(--navy-700); --ink-disabled: var(--navy-400); /* ---------- Semantic links ---------- */ --link: var(--teal-700); --link-hover: var(--teal-800); /* ---------- Status (canonical, §3.6) ---------- */ --success: #059669; --success-bg: #DCFCE7; --success-fg: #047857; --warning: var(--amber-600); --warning-bg: var(--amber-100); --warning-fg: var(--amber-700); --error: var(--pink-600); --error-bg: var(--pink-100); --error-fg: var(--pink-700); --info: var(--purple-500); --info-bg: var(--purple-100); --info-fg: var(--purple-600); /* NEW v2: highlight (yellow-only, the only legal "highlight" color) */ --highlight: var(--yellow-400); --highlight-bg: var(--yellow-100); --highlight-fg: var(--yellow-700); /* ---------- Logo accent recipes for dark theme (§3.5) ---------- */ /* These are reference values; consumed by inline SVG fills on dark surfaces. */ --logo-default-on-dark: #FFFFFF; --logo-accent-yellow: var(--yellow-400); --logo-accent-amber: var(--amber-400); --logo-accent-pink: var(--pink-300); --logo-accent-teal: var(--teal-400); --logo-accent-purple: var(--purple-300); /* ---------- Typography (§5) ---------- */ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-mono: 'JetBrains Mono', 'SF Mono', Consolas, 'Courier New', monospace; --fs-display: 3rem; --lh-display: 1.1; /* 48 — hero h1, marketing */ --fs-h1: 2.25rem; --lh-h1: 1.2; /* 36 — page titles */ --fs-h2: 1.75rem; --lh-h2: 1.25; /* 28 — section headers */ --fs-h3: 1.375rem; --lh-h3: 1.3; /* 22 — subsection, card titles */ --fs-h4: 1.125rem; --lh-h4: 1.4; /* 18 — inline emphasis headers */ --fs-body: 1rem; --lh-body: 1.55; /* 16 — DEFAULT body */ --fs-sm: 0.875rem; --lh-sm: 1.5; /* 14 — helper text, table cells */ --fs-xs: 0.75rem; --lh-xs: 1.4; /* 12 — captions, overline */ /* Weight conventions per §5.3 */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* ---------- Spacing scale (§6.1, 4px-based) ---------- */ --space-0: 0; --space-1: 0.25rem; /* 4 px — tight icon padding */ --space-2: 0.5rem; /* 8 px — default inline gap */ --space-3: 0.75rem; /* 12 px — form-row vertical rhythm */ --space-4: 1rem; /* 16 px — default card padding edge */ --space-5: 1.5rem; /* 24 px — section internal gap */ --space-6: 2rem; /* 32 px — card padding (comfortable) */ --space-8: 3rem; /* 48 px — section vertical sep (compact) */ --space-10: 4rem; /* 64 px — section vertical sep (default) */ --space-12: 6rem; /* 96 px — hero / page-top breathing room */ /* ---------- Radii (§6.2) ---------- */ --radius-none: 0; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-pill: 999px; /* ---------- Elevation (§6.3) — light theme ---------- */ --shadow-sm: 0 1px 2px 0 rgba(14, 39, 57, 0.06), 0 1px 1px 0 rgba(14, 39, 57, 0.04); --shadow-md: 0 4px 12px -2px rgba(14, 39, 57, 0.10), 0 2px 4px -1px rgba(14, 39, 57, 0.06); /* ---------- Focus ring ---------- */ --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--teal-500); /* ---------- Layout containers (§6.4) ---------- */ --container-md: 720px; --container-lg: 960px; --container-xl: 1200px; --container-2xl: 1320px; /* ---------- Theme transition (§4.3) ---------- */ /* Animate background-color and color only, 200ms ease. Never animate every property. */ --theme-transition: background-color 200ms ease, color 200ms ease; } /* ── Dark theme overrides (§4) ────────────────────────────────── */ :root[data-theme="dark"] { /* Surfaces (§4.1) */ --bg: var(--navy-900); --bg-elevated: var(--navy-800); --bg-tint: var(--navy-700); --border: var(--navy-700); --border-strong:var(--navy-600); /* Ink */ --ink: var(--navy-100); --ink-strong: #FFFFFF; --ink-muted: var(--navy-300); --ink-disabled: var(--navy-400); /* Links lean lighter (§4.2) */ --link: var(--teal-400); --link-hover: var(--teal-300); /* Status — flip to lighter foreground steps for navy-900 contrast */ --success-fg: #34D399; --warning-fg: var(--amber-400); --error-fg: var(--pink-300); --info-fg: var(--purple-300); --highlight-fg: var(--yellow-400); /* Status pill backgrounds flip to brand-900/-800 surfaces (§7.5 dark) */ --success-bg: #064E3B; --warning-bg: var(--amber-900); --error-bg: var(--pink-800); --info-bg: var(--purple-800); --highlight-bg: var(--yellow-900); /* Shadows give way to subtle outline + glow on dark (§6.3) */ --shadow-sm: 0 0 0 1px rgba(255, 255, 255, 0.06); --shadow-md: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 8px 24px -8px rgba(0, 0, 0, 0.50); } /* ── Body defaults (minimum to make tokens immediately useful) ── */ /* No component rules — those live in components.css. Just type + * background + color so a barebones HTML page renders correctly with * only reset.css + brand.css linked. */ html { font-family: var(--font-sans); font-size: 16px; line-height: var(--lh-body); color: var(--ink); background-color: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: var(--theme-transition); } body { color: var(--ink); background-color: var(--bg); transition: var(--theme-transition); }