/* * ============================================================================ * MFKA Design Tokens — Sustainable Governance Hub * ============================================================================ * * Design philosophy: "Refined European civic" * - Trust-building, official but warm * - Hungarian and European, not American techstartup * - Cyclical motif from logo, transparency, openness * * Use these tokens via CSS custom properties everywhere. * Do not hardcode hex colors or pixel values in components. * * ============================================================================ */ :root { /* ======================================================================== * COLOR — PRIMARY (MFKA Green) * The dominant brand color, used for headings, primary CTAs, links. * ====================================================================== */ --mfka-green-50: #EEF7F1; --mfka-green-100: #D5EAD9; --mfka-green-200: #A8D5B3; --mfka-green-300: #75BB89; --mfka-green-400: #44A164; --mfka-green-500: #2A8B4F; /* lighter accent variant of brand green */ --mfka-green-600: #1B6B3E; /* THE brand green — logo color, primary text */ --mfka-green-700: #155632; --mfka-green-800: #104026; --mfka-green-900: #0A2D1A; /* ======================================================================== * COLOR — ACCENT (MFKA Gold) * Secondary highlight, used sparingly for emphasis and decoration. * ====================================================================== */ --mfka-gold-50: #FAF5E8; --mfka-gold-100: #F2E5C3; --mfka-gold-200: #E5CC8C; --mfka-gold-300: #D6B66A; /* lighter variant */ --mfka-gold-400: #C9A965; /* THE brand gold — logo color */ --mfka-gold-500: #B0904E; --mfka-gold-600: #8E7339; --mfka-gold-700: #6B562B; /* ======================================================================== * COLOR — NEUTRAL * Warm-leaning grays, not cold steel. Anchored to a cream background. * ====================================================================== */ --mfka-cream: #FBF9F3; /* the warm-white background — NOT pure white */ --mfka-paper: #F7F4EB; /* slightly more textured surface (cards) */ --mfka-bone: #ECE7D9; /* dividers, subtle surfaces */ --mfka-ink-100: #F5F5F4; --mfka-ink-200: #E7E5E0; --mfka-ink-300: #C8C5BD; --mfka-ink-400: #9C9890; --mfka-ink-500: #6F6C66; --mfka-ink-600: #4A4843; --mfka-ink-700: #2D2C2A; /* body text — NOT pure black */ --mfka-ink-900: #1A1918; /* headings */ /* ======================================================================== * COLOR — SEMANTIC (status, feedback) * Used for alerts, badges, status indicators * ====================================================================== */ --mfka-success: var(--mfka-green-600); --mfka-success-bg: var(--mfka-green-50); --mfka-warning: #B07A18; --mfka-warning-bg: #FBF1D8; --mfka-error: #B23A2E; --mfka-error-bg: #FBEEEC; --mfka-info: #2C6E7E; --mfka-info-bg: #E5F1F4; /* ======================================================================== * TYPOGRAPHY * Display: Fraunces — modern serif, characterful, Hungarian-friendly * Body: Manrope — geometric sans, refined, highly readable * Mono: JetBrains Mono — for case numbers, technical IDs * * Fallback chain ensures graceful degradation if web fonts fail. * ====================================================================== */ --font-display: 'Fraunces', 'Source Serif Pro', 'Times New Roman', Georgia, serif; --font-body: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Liberation Sans', sans-serif; --font-mono: 'JetBrains Mono', 'Cascadia Code', 'Liberation Mono', Consolas, monospace; /* Font sizes — modular scale with 1.25 ratio (major third) */ --text-xs: 0.75rem; /* 12px */ --text-sm: 0.875rem; /* 14px */ --text-base: 1rem; /* 16px */ --text-lg: 1.125rem; /* 18px */ --text-xl: 1.25rem; /* 20px */ --text-2xl: 1.5rem; /* 24px */ --text-3xl: 1.875rem; /* 30px */ --text-4xl: 2.5rem; /* 40px */ --text-5xl: 3.5rem; /* 56px */ --text-6xl: 4.5rem; /* 72px */ /* Line heights */ --leading-tight: 1.15; --leading-snug: 1.3; --leading-normal: 1.55; --leading-relaxed: 1.7; /* Letter spacing */ --tracking-tighter: -0.03em; --tracking-tight: -0.015em; --tracking-normal: 0; --tracking-wide: 0.02em; --tracking-wider: 0.05em; --tracking-widest: 0.1em; /* ======================================================================== * SPACING — generous, on an 8px baseline grid * ====================================================================== */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.5rem; /* 24px */ --space-6: 2rem; /* 32px */ --space-7: 3rem; /* 48px */ --space-8: 4rem; /* 64px */ --space-9: 6rem; /* 96px */ --space-10: 8rem; /* 128px */ /* ======================================================================== * LAYOUT * ====================================================================== */ --content-width-prose: 65ch; /* readable text columns */ --content-width-narrow: 720px; /* form columns */ --content-width-default: 1140px; /* general content */ --content-width-wide: 1440px; /* dashboards */ /* ======================================================================== * BORDER RADIUS — subtle, never bubbly * ====================================================================== */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 20px; --radius-full: 9999px; /* ======================================================================== * SHADOWS — soft and warm * ====================================================================== */ --shadow-xs: 0 1px 2px rgba(26, 25, 24, 0.04); --shadow-sm: 0 2px 4px rgba(26, 25, 24, 0.05), 0 1px 2px rgba(26, 25, 24, 0.04); --shadow-md: 0 4px 8px rgba(26, 25, 24, 0.06), 0 2px 4px rgba(26, 25, 24, 0.05); --shadow-lg: 0 12px 24px rgba(26, 25, 24, 0.07), 0 4px 8px rgba(26, 25, 24, 0.05); --shadow-xl: 0 24px 48px rgba(26, 25, 24, 0.10), 0 8px 16px rgba(26, 25, 24, 0.06); /* Focus ring — uses brand gold for high visibility */ --shadow-focus: 0 0 0 3px rgba(201, 169, 101, 0.4); /* ======================================================================== * MOTION * ====================================================================== */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --duration-fast: 150ms; --duration-base: 220ms; --duration-slow: 400ms; --duration-slower: 700ms; /* ======================================================================== * Z-INDEX SCALE * ====================================================================== */ --z-dropdown: 100; --z-sticky: 200; --z-overlay: 300; --z-modal: 400; --z-toast: 500; } /* ============================================================================ * REDUCED MOTION — respect user preference * ========================================================================== */ @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; } }