/* IWWF Europe — design tokens & base reset */ :root { /* Brand palette — derived from IWWF logo (deep federation blue + accent) */ --c-bg: #F4F6F9; --c-surface: #FFFFFF; --c-surface-2: #ECEFF4; --c-border: #D7DCE4; --c-text: #0E1A2B; --c-text-muted:#4A5468; --c-text-faint:#8A93A3; --c-primary: #1B3F8C; /* IWWF federation blue */ --c-primary-hover:#15326F; --c-accent: #E63946; /* IWWF red swoosh */ --c-success: #2E7D32; --c-warning: #B45309; --c-error: #B3261E; --c-overlay: rgba(14,26,43,.55); /* Discipline illustration theming — mask recolour, silhouette shape unchanged */ --disc-media-bg: linear-gradient(155deg, #eef4fb 0%, #dbe7f6 100%); --disc-ink: #1B3F8C; /* Typography */ --f-display: 'Cabinet Grotesk', 'Switzer', system-ui, -apple-system, 'Segoe UI', sans-serif; --f-body: 'Switzer', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif; /* Type scale (mobile-first) */ --t-xs: 12px; --t-sm: 14px; --t-base: 16px; --t-md: 18px; --t-lg: 22px; --t-xl: 28px; --t-2xl: 36px; --t-3xl: 48px; --t-hero: clamp(40px, 7vw, 88px); --lh-tight: 1.15; --lh-snug: 1.3; --lh-normal: 1.55; /* Spacing */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px; /* Radii */ --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-pill: 999px; /* Shadows */ --sh-sm: 0 1px 2px rgba(14,26,43,.06), 0 1px 1px rgba(14,26,43,.04); --sh-md: 0 4px 12px rgba(14,26,43,.08), 0 2px 4px rgba(14,26,43,.05); --sh-lg: 0 16px 36px rgba(14,26,43,.12), 0 4px 10px rgba(14,26,43,.06); /* Layout */ --container: 1200px; --container-narrow: 880px; /* Motion */ --ease: cubic-bezier(.22,.61,.36,1); --ease-out: cubic-bezier(.16,1,.3,1); --d-1: 160ms; --d-2: 280ms; --d-3: 480ms; } /* Dark theme via [data-theme="dark"] on */ html[data-theme="dark"] { --c-bg: #0B1320; --c-surface: #121C2D; --c-surface-2: #18243A; --c-border: #243349; --c-text: #E6EBF3; --c-text-muted:#9AA6BA; --c-text-faint:#6B7689; --c-primary: #6E94E0; --c-primary-hover:#8AA8E8; --c-accent: #F26B73; --c-success: #6CC179; --c-warning: #E0A04A; --c-error: #E5786F; --c-overlay: rgba(0,0,0,.7); --disc-media-bg: linear-gradient(155deg, #16294a 0%, #0b1524 100%); --disc-ink: #9EE7FB; --sh-sm: 0 1px 2px rgba(0,0,0,.4); --sh-md: 0 4px 14px rgba(0,0,0,.4); --sh-lg: 0 18px 38px rgba(0,0,0,.5); } /* Reset / base */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; tab-size: 4; } html, body { height: 100%; } body { font-family: var(--f-body); font-size: var(--t-base); line-height: var(--lh-normal); color: var(--c-text); background: var(--c-bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-feature-settings: 'kern', 'liga', 'cv11'; } img, picture, video, canvas, svg { display: block; max-width: 100%; } input, button, textarea, select { font: inherit; color: inherit; } button { cursor: pointer; background: none; border: none; } a { color: var(--c-primary); text-decoration: none; transition: color var(--d-1) var(--ease); } a:hover { color: var(--c-primary-hover); } :focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; border-radius: 3px; } h1, h2, h3, h4 { font-family: var(--f-display); font-weight: 700; line-height: var(--lh-tight); color: var(--c-text); letter-spacing: -0.01em; } h1 { font-size: var(--t-3xl); } h2 { font-size: var(--t-2xl); letter-spacing: -0.015em; } h3 { font-size: var(--t-xl); } h4 { font-size: var(--t-lg); font-weight: 600; } p { line-height: var(--lh-normal); } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }