/** * Innovation Awards — canonical design tokens v1 * * SINGLE SOURCE OF TRUTH for the entire platform (public + admin + faction + * jury + media). All other CSS files reference these tokens via var(); * never hard-code a hex/px value in component CSS. * * Anchored at the Zürich cantonal blue (#1a4f96) at the 700 step, with the * surrounding 50-900 ramp constructed for even perceptual lightness steps. * Civic bronze (#a8782e) is the single non-blue brand accent, reserved for * "Nominiert / Shortlist / Gewinner / Neu" moments. * * Loaded at wp_enqueue_scripts priority 5 (unconditional, every page) — see * innovation-awards-core.php. All other stylesheets list ia-tokens as a * dependency so they cascade correctly. * * SEC-H10: this file references zero external assets (no @import, no url() * to a CDN). Self-contained for Swiss data residency. */ :root { /* ======================================================== BRAND — Zürich cantonal blue scale (anchored at 700) ======================================================== */ --ia-primary-50: #eef4fb; /* selected row, info banner background */ --ia-primary-100: #d8e6f4; /* hover surface for primary chips */ --ia-primary-200: #b3cde9; /* disabled primary fill, decorative dividers */ --ia-primary-300: #7fa9d4; /* inactive nav indicator */ --ia-primary-400: #4f82bd; /* secondary illustrative use */ --ia-primary-500: #2c66a8; /* mid-tone — links on dark surfaces */ --ia-primary-600: #205790; /* primary button hover */ --ia-primary-700: #1a4f96; /* BASE — Zürich cantonal blue */ --ia-primary-800: #133e78; /* primary button active/pressed */ --ia-primary-900: #0c2c5a; /* nav background, footer, max contrast */ /* RGB triples for use inside rgba()/color-mix() fallbacks. */ --ia-primary-700-rgb: 26, 79, 150; /* Semantic aliases — components reference these, not the numeric scale. */ --ia-primary: var(--ia-primary-700); --ia-primary-hover: var(--ia-primary-800); --ia-primary-active: var(--ia-primary-900); --ia-primary-soft: var(--ia-primary-50); /* ======================================================== ACCENT — civic bronze (used sparingly, awards only) ======================================================== Allowed: "Nominiert / Shortlist / Gewinner / Neu" badges. Forbidden: buttons, nav, links, body text, default badges. */ --ia-accent-50: #fbf6ec; --ia-accent-100: #f4e6c4; --ia-accent-300: #d8ad6a; --ia-accent-500: #a8782e; /* BASE — civic bronze */ --ia-accent-600: #8c6322; --ia-accent-700: #6d4c18; --ia-accent: var(--ia-accent-500); --ia-accent-hover: var(--ia-accent-600); --ia-accent-soft: var(--ia-accent-50); /* ======================================================== NEUTRALS — cool-warm gray (hue ~225°, low chroma) ======================================================== Slightly warmer than slate, slightly cooler than zinc. Tuned to harmonize with the primary blue. */ --ia-gray-50: #f7f8fa; /* page sunken background */ --ia-gray-100: #eef0f4; /* subtle row striping, disabled bg */ --ia-gray-200: #dde1e8; /* default border */ --ia-gray-300: #c2c8d2; /* strong border, divider */ --ia-gray-400: #9aa1ad; /* placeholder text, disabled icon */ --ia-gray-500: #707783; /* muted UI text (timestamps, captions) */ --ia-gray-600: #545a66; /* secondary body text */ --ia-gray-700: #3a3f49; /* body text on light surface */ --ia-gray-800: #21252d; /* headings */ --ia-gray-900: #0f1218; /* maximum contrast (dense data only) */ /* ======================================================== SEMANTIC COLORS — calibrated, not Tailwind defaults ======================================================== */ --ia-success-50: #ecf6ee; --ia-success-500: #2e7d3a; /* desaturated forest, civic */ --ia-success-700: #1f5527; /* WCAG AA on success-50 */ --ia-success: var(--ia-success-500); --ia-success-bg: var(--ia-success-50); --ia-warning-50: #fbf3e3; --ia-warning-500: #b07614; /* muted ochre, not parking-ticket yellow */ --ia-warning-700: #7a5009; --ia-warning: var(--ia-warning-500); --ia-warning-bg: var(--ia-warning-50); --ia-error-50: #fbecec; --ia-error-500: #b3261e; /* Material 3 error — restrained crimson */ --ia-error-700: #821612; --ia-error: var(--ia-error-500); --ia-error-bg: var(--ia-error-50); /* Info aliases primary — kills the rogue #0EA5E9 sky-blue */ --ia-info: var(--ia-primary-700); --ia-info-bg: var(--ia-primary-50); /* ======================================================== SURFACES ======================================================== */ --ia-surface-page: var(--ia-gray-50); --ia-surface-card: #ffffff; --ia-surface-sunken: var(--ia-gray-100); --ia-surface-overlay: rgba(15, 18, 24, 0.55); /* modal backdrop */ --ia-surface-inverse: var(--ia-primary-900); /* dark header / footer */ /* Backwards-compatible aliases for existing app.css consumers. */ --ia-bg: var(--ia-surface-page); --ia-surface: var(--ia-surface-card); /* ======================================================== TEXT ======================================================== */ --ia-text: var(--ia-gray-700); --ia-text-strong: var(--ia-gray-800); --ia-text-muted: var(--ia-gray-600); --ia-text-meta: var(--ia-gray-500); --ia-text-light: var(--ia-gray-600); /* alias for legacy */ --ia-text-inverse: #ffffff; /* Legacy alias — secondary remains for older app.css references */ --ia-secondary: var(--ia-gray-500); /* ======================================================== BORDERS ======================================================== */ --ia-border-subtle: var(--ia-gray-200); --ia-border-medium: var(--ia-gray-300); --ia-border-strong: var(--ia-gray-400); --ia-border-focus: var(--ia-primary-700); /* Legacy alias */ --ia-border: var(--ia-border-subtle); /* ======================================================== ROLE ACCENTS (reserved — see Phase 2) ======================================================== Most roles inherit --ia-primary. Media role uses cyan deliberately as a role-coding accent. */ --ia-role-admin: var(--ia-primary); --ia-role-faction: var(--ia-primary); --ia-role-jury: var(--ia-primary); --ia-role-media: #0891b2; /* cyan-600 — reserved for /medien/* */ --ia-role-media-dark: #0e7490; /* ======================================================== TYPOGRAPHY ======================================================== Inter Variable is self-hosted (theme assets/fonts/inter/inter.css). No Google Fonts CDN — Swiss data residency requirement. */ --ia-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; --ia-font-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace; /* Type scale (rem). Base = 15px to tolerate German compound words. */ --ia-text-xs: 0.75rem; /* 12px — micro labels, chip text */ --ia-text-sm: 0.8125rem; /* 13px — secondary UI text */ --ia-text-base: 0.9375rem; /* 15px — body text */ --ia-text-lg: 1.0625rem; /* 17px — emphasized body, lead */ --ia-text-xl: 1.25rem; /* 20px — card title, H4 */ --ia-text-2xl: 1.5rem; /* 24px — section heading H3 */ --ia-text-3xl: 1.875rem; /* 30px — page heading H2 */ --ia-text-4xl: 2.375rem; /* 38px — major page heading H1 */ --ia-text-5xl: 3rem; /* 48px — hero / landing H1 */ --ia-text-6xl: 3.75rem; /* 60px — feature hero, sparingly */ --ia-leading-tight: 1.15; /* display 4xl–6xl */ --ia-leading-snug: 1.25; /* display 2xl–3xl */ --ia-leading-normal: 1.5; /* base / lg */ --ia-leading-relaxed: 1.7; /* long-form prose */ --ia-leading-ui: 1.4; /* dense UI rows, button labels */ /* Letter-spacing — negative on display sizes is the Swiss-modern signature. */ --ia-tracking-tight: -0.025em; /* display 4xl–6xl */ --ia-tracking-snug: -0.015em; /* display 2xl–3xl */ --ia-tracking-normal: 0; --ia-tracking-wide: 0.04em; /* small caps, ALL CAPS table headers */ --ia-tracking-wider: 0.08em; /* logo wordmark only */ --ia-weight-light: 300; /* reserved for ≥4xl display */ --ia-weight-regular: 400; /* body */ --ia-weight-medium: 500; /* UI labels */ --ia-weight-semibold: 600; /* button text, H */ --ia-weight-bold: 700; /* page H, KPI numbers */ /* ======================================================== SPACING — 4px base grid ======================================================== */ --ia-space-0: 0; --ia-space-1: 0.25rem; /* 4px */ --ia-space-2: 0.5rem; /* 8px */ --ia-space-3: 0.75rem; /* 12px */ --ia-space-4: 1rem; /* 16px (most common) */ --ia-space-5: 1.25rem; /* 20px */ --ia-space-6: 1.5rem; /* 24px */ --ia-space-8: 2rem; /* 32px */ --ia-space-10: 2.5rem; /* 40px */ --ia-space-12: 3rem; /* 48px */ --ia-space-16: 4rem; /* 64px */ --ia-space-20: 5rem; /* 80px */ --ia-space-24: 6rem; /* 96px — landing hero only */ --ia-gap-xs: var(--ia-space-2); --ia-gap-sm: var(--ia-space-3); --ia-gap-md: var(--ia-space-4); --ia-gap-lg: var(--ia-space-6); --ia-gap-xl: var(--ia-space-12); /* ======================================================== RADIUS — restrained, Swiss-modern ======================================================== Buttons use sm (4px). Cards use md (6px). NEVER pill on buttons. */ --ia-radius-none: 0; --ia-radius-xs: 2px; --ia-radius-sm: 4px; /* buttons, badges, inputs */ --ia-radius-md: 6px; /* cards, panels (default) */ --ia-radius-lg: 10px; /* large feature cards */ --ia-radius-xl: 16px; /* modal */ --ia-radius-full: 9999px; /* pills (badges + avatars only) */ /* ======================================================== SHADOWS — flat, primary-tinted ======================================================== */ --ia-shadow-xs: 0 1px 1px 0 rgba(12, 28, 50, 0.04); --ia-shadow-sm: 0 1px 2px 0 rgba(12, 28, 50, 0.06), 0 1px 1px 0 rgba(12, 28, 50, 0.04); --ia-shadow-md: 0 2px 4px -1px rgba(12, 28, 50, 0.07), 0 1px 2px -1px rgba(12, 28, 50, 0.05); --ia-shadow-lg: 0 4px 8px -2px rgba(12, 28, 50, 0.08), 0 2px 4px -2px rgba(12, 28, 50, 0.05); --ia-shadow-xl: 0 12px 24px -6px rgba(12, 28, 50, 0.10), 0 4px 8px -4px rgba(12, 28, 50, 0.06); --ia-shadow-inset: inset 0 1px 2px 0 rgba(12, 28, 50, 0.06); --ia-shadow-focus: 0 0 0 3px rgba(26, 79, 150, 0.25); /* ======================================================== MOTION ======================================================== */ --ia-duration-instant: 80ms; --ia-duration-fast: 140ms; --ia-duration-default: 220ms; --ia-duration-slow: 320ms; --ia-ease-standard: cubic-bezier(0.32, 0.08, 0.24, 1); --ia-ease-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1); --ia-ease-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15); --ia-ease-emphasized: cubic-bezier(0.2, 0, 0, 1); } /* * color-mix() refinement for the focus ring. * Supported: Safari 16.2+, Chrome 111+, Firefox 113+ (mid-2023). * Older browsers fall through to the rgba() declaration above. */ @supports (background: color-mix(in srgb, red 50%, white)) { :root { --ia-shadow-focus: 0 0 0 3px color-mix(in srgb, var(--ia-primary-700) 25%, transparent); } }