/* ============================================================ EBPC — Design Tokens (v2.2) Palette: dusty blue / warm navy / neutral greys. No accent hue. Type: Manrope (display) + Inter (body). Shape: squircle (soft generous corners) for UI surfaces. Pills only for semantic labels. ============================================================ */ :root { /* --------------------------------------------------------- COLOUR — Dusty blue family Lower chroma than v2.1. Softer, calmer, less "electric". --------------------------------------------------------- */ --navy-950: #0D1524; --navy-900: #15202F; --navy-800: #1E2E43; --blue-700: #2A4A6E; --blue-600: #35577A; --blue-500: #4B7099; --blue-400: #6E8FB0; --blue-300: #9AAEC6; --blue-200: #C2CEDA; --blue-100: #DEE4EB; --blue-050: #EEF1F4; /* --------------------------------------------------------- COLOUR — Neutrals (very slightly warmed) --------------------------------------------------------- */ --ink-900: #181A1E; --ink-700: #2E3238; --ink-600: #454A52; --ink-500: #5C6470; --ink-400: #7C8492; --ink-300: #A3A9B4; --line-300: #CFD4DA; --line-200: #E1E4E8; --line-100: #EEF0F3; --white: #FFFFFF; --ice-050: #F5F7F9; --ice-100: #EDF0F3; /* --------------------------------------------------------- SEMANTIC ROLES --------------------------------------------------------- */ --bg: var(--white); --bg-ice: var(--ice-050); --bg-tint: var(--blue-050); --bg-invert: var(--navy-900); --bg-deep: var(--navy-950); --fg: var(--ink-900); --fg-muted: var(--ink-500); --fg-subtle: var(--ink-400); --fg-invert: #FFFFFF; --fg-invert-muted: rgba(255, 255, 255, 0.76); --fg-invert-soft: rgba(255, 255, 255, 0.55); --border: var(--line-200); --border-strong: var(--line-300); --border-soft: var(--line-100); --brand: var(--navy-900); --action: var(--blue-600); --action-hover: var(--blue-700); --action-bright: var(--blue-500); --focus-ring: var(--blue-500); /* --------------------------------------------------------- TYPOGRAPHY --------------------------------------------------------- */ --font-display: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, Consolas, monospace; --fs-xs: 0.8125rem; --fs-sm: 0.9375rem; --fs-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem); --fs-lg: clamp(1.125rem, 1.05rem + 0.35vw, 1.25rem); --fs-xl: clamp(1.375rem, 1.2rem + 0.75vw, 1.625rem); --fs-2xl: clamp(1.75rem, 1.4rem + 1.4vw, 2.25rem); --fs-3xl: clamp(2.125rem, 1.55rem + 2.4vw, 3rem); --fs-4xl: clamp(2.5rem, 1.6rem + 3.6vw, 3.75rem); --fs-5xl: clamp(2.75rem, 1.5rem + 4.5vw, 4.5rem); --lh-tight: 1.1; --lh-snug: 1.28; --lh-body: 1.65; --tracking-tight: -0.025em; --tracking-snug: -0.015em; --tracking-wide: 0.08em; --tracking-wider: 0.14em; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-extrabold: 800; /* --------------------------------------------------------- SPACING --------------------------------------------------------- */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.25rem; --sp-6: 1.5rem; --sp-7: 1.75rem; --sp-8: 2rem; --sp-10: 2.5rem; --sp-12: 3rem; --sp-14: 3.5rem; --sp-16: 4rem; --sp-20: 5rem; --sp-24: 6rem; --sp-32: 8rem; --section-y: clamp(3.5rem, 2.5rem + 4vw, 6.5rem); --section-y-tight: clamp(2.5rem, 2rem + 2vw, 4rem); /* --------------------------------------------------------- LAYOUT --------------------------------------------------------- */ --container-max: 72rem; --container-narrow: 44rem; --container-wide: 80rem; --container-pad: clamp(1.25rem, 0.75rem + 2.5vw, 2.5rem); /* --------------------------------------------------------- SHAPE — Squircle scale (v2.2) Generous soft corners for UI surfaces. Pills only for small semantic labels. Circles only where the shape is inherently round (icons). Full-bleed sections keep straight edges. --------------------------------------------------------- */ --radius-pill: 999px; --radius-xs: 8px; /* small chips, inline elements */ --radius-sm: 12px; /* desktop nav, small controls */ --radius-md: 14px; /* buttons, close, small tiles */ --radius-lg: 16px; /* menu toggle */ --radius-xl: 18px; /* schedule rows, contact items */ --radius-2xl: 20px; /* cards, info cards */ --radius-3xl: 24px; /* portrait */ --radius-4xl: 28px; /* CTA band, drawer panel */ /* Legacy aliases — mapped to squircle scale so any remaining reference resolves cleanly */ --shape-ebpc-sm: var(--radius-pill); --shape-ebpc: var(--radius-2xl); --shape-ebpc-lg: var(--radius-4xl); --shape-ebpc-rev: var(--radius-2xl); /* --------------------------------------------------------- ELEVATION — softened for the dustier palette --------------------------------------------------------- */ --shadow-xs: 0 1px 2px rgba(21, 32, 47, 0.05); --shadow-sm: 0 1px 3px rgba(21, 32, 47, 0.06), 0 1px 2px rgba(21, 32, 47, 0.04); --shadow-md: 0 6px 18px rgba(21, 32, 47, 0.08), 0 2px 4px rgba(21, 32, 47, 0.05); --shadow-lg: 0 14px 34px rgba(21, 32, 47, 0.10), 0 4px 8px rgba(21, 32, 47, 0.05); /* --------------------------------------------------------- GLOW — reduced intensity to match dusty palette --------------------------------------------------------- */ --glow-brand: radial-gradient( 900px 480px at 82% -10%, rgba(75, 112, 153, 0.32), rgba(75, 112, 153, 0) 62% ), radial-gradient( 700px 400px at 0% 110%, rgba(42, 74, 110, 0.28), rgba(42, 74, 110, 0) 62% ); /* --------------------------------------------------------- MOTION --------------------------------------------------------- */ --ease: cubic-bezier(0.2, 0.65, 0.2, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --dur-fast: 120ms; --dur: 200ms; --dur-slow: 320ms; --dur-reveal: 620ms; /* --------------------------------------------------------- Z-INDEX --------------------------------------------------------- */ --z-header: 100; --z-overlay: 190; --z-drawer: 200; } @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 0ms; --dur: 0ms; --dur-slow: 0ms; --dur-reveal: 0ms; } }