/* ============================================================ DANEIA — Design System v1.0 Italian SME Loan Comparison Platform Mood: Professional · Trustworthy · Clear · Approachable ============================================================ CONTENTS 1. Typography 2. Brand Colors 3. Semantic Colors 4. Neutrals 5. Spacing Scale (8px base grid) 6. Border Radius 7. Shadows 8. Transitions 9. Layout 10. Z-Index Scale 11. Backwards-compatible aliases ============================================================ */ :root { /* ────────────────────────────────────────────────────────── 1. TYPOGRAPHY Font: Inter — clean, modern, excellent tabular-number rendering (critical for rates, amounts, installments). Load via Google Fonts: Inter wght@400;500;600;700;800 ────────────────────────────────────────────────────────── */ --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* Type scale — minor third (1.25×) base 14px */ --text-2xs: 10px; /* micro — legal fine print */ --text-xs: 11px; /* tags, section labels */ --text-sm: 12px; /* secondary labels, timestamps */ --text-base: 14px; /* body, form inputs (default) */ --text-md: 15px; /* slightly elevated body */ --text-lg: 17px; /* card titles, sidebar links */ --text-xl: 20px; /* section headings h2 */ --text-2xl: 24px; /* page headings h1 */ --text-3xl: 28px; /* hero headline */ --text-4xl: 36px; /* display KPI values */ --text-5xl: 48px; /* hero numbers (future) */ /* Line heights */ --leading-none: 1.0; --leading-tight: 1.25; --leading-snug: 1.35; --leading-normal: 1.55; --leading-relaxed: 1.70; --leading-loose: 2.0; /* Font weights */ --weight-normal: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-extrabold: 800; /* Letter spacing */ --tracking-tight: -0.01em; --tracking-normal: 0; --tracking-wide: 0.04em; --tracking-wider: 0.07em; --tracking-widest: 0.10em; /* ────────────────────────────────────────────────────────── 2. BRAND COLORS Primary: Deep Navy → trust, authority, financial clarity Accent: Lime Green → growth, positive action, progress Rose: Coral Pink → hover states, secondary CTAs ────────────────────────────────────────────────────────── */ /* Navy (Primary) */ --color-primary-50: #eff3ff; --color-primary-100: #dbe4ff; --color-primary-200: #bac8ff; --color-primary-300: #91a7ff; --color-primary-400: #5c7cfa; --color-primary-500: #4263eb; --color-primary-600: #364fc7; --color-primary-700: #2b3e9e; --color-primary-800: #1e3a8a; /* ← main brand color */ --color-primary-900: #162d6b; /* ← dark variant */ --color-primary-950: #0f1f52; --color-primary-bg: rgba(30, 58, 138, 0.05); --color-primary-ring: rgba(30, 58, 138, 0.20); /* Lime Green (Accent) */ --color-accent-100: #ecfccb; --color-accent-200: #d9f99d; --color-accent-300: #bef264; --color-accent-400: #a3e635; --color-accent-500: #84cc16; /* ← main accent color */ --color-accent-600: #65a30d; /* ← dark accent */ --color-accent-700: #4d7c0f; --color-accent-bg: rgba(132, 204, 22, 0.10); --color-accent-ring: rgba(132, 204, 22, 0.22); /* Rose (Secondary Accent) */ --color-rose-400: #fb7185; /* ← hover/highlight */ --color-rose-600: #e11d48; /* ────────────────────────────────────────────────────────── 3. SEMANTIC COLORS Used for status messages, alerts, validation states. Never use raw brand colors for status — use these. ────────────────────────────────────────────────────────── */ --color-success: #16a34a; --color-success-light: #dcfce7; --color-success-border: #bbf7d0; --color-warning: #d97706; --color-warning-light: #fef9c3; --color-warning-border: #fde68a; --color-error: #dc2626; --color-error-light: #fff1f2; --color-error-border: #fecdd3; --color-info: #0369a1; --color-info-light: #e0f2fe; --color-info-border: #bae6fd; /* ────────────────────────────────────────────────────────── 4. NEUTRALS Slate-based gray scale. Cool, reads well on white. ────────────────────────────────────────────────────────── */ --color-white: #ffffff; --color-page: #f8fafc; /* page background */ --color-panel: #ffffff; /* card / panel backgrounds */ --color-sidebar: #ffffff; /* sidebar background */ --color-border: #e2e8f0; /* standard border */ --color-border-subtle: #f1f5f9; /* dividers, bg fills */ --color-text: #334155; /* body text */ --color-text-strong: #0f172a; /* headings, KPI values */ --color-text-muted: #64748b; /* labels, helper text */ --color-text-faint: #94a3b8; /* placeholders, disabled */ /* ────────────────────────────────────────────────────────── 5. SPACING SCALE (base: 8px) Use these vars everywhere — never hardcode pixel values. Multiplier → px: 0.5 → 4 1 → 8 1.5 → 12 2 → 16 2.5 → 20 3 → 24 3.5 → 28 4 → 32 5 → 40 6 → 48 8 → 64 10 → 80 ────────────────────────────────────────────────────────── */ --space-px: 1px; --space-0: 0px; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 28px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; /* ────────────────────────────────────────────────────────── 6. BORDER RADIUS ────────────────────────────────────────────────────────── */ --radius-none: 0px; --radius-sm: 5px; /* small elements: tags, badges */ --radius: 8px; /* inputs, buttons, cards */ --radius-lg: 12px; /* content card, modals */ --radius-xl: 16px; /* large modals, hero sections */ --radius-2xl: 24px; /* extra-large components (future) */ --radius-full: 9999px; /* pills, avatar, toggle */ /* ────────────────────────────────────────────────────────── 7. SHADOWS Elevation scale — higher number = more prominent. ────────────────────────────────────────────────────────── */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04); --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05); --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.07), 0 4px 6px -4px rgba(0, 0, 0, 0.04); --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.04); /* Colored focus rings */ --shadow-focus-primary: 0 0 0 3px var(--color-primary-ring); --shadow-focus-accent: 0 0 0 3px var(--color-accent-ring); /* Colored card glows (used on offer cards) */ --shadow-accent-glow: 0 8px 24px rgba(132, 204, 22, 0.12); /* ────────────────────────────────────────────────────────── 8. TRANSITIONS ────────────────────────────────────────────────────────── */ --transition-fast: 150ms ease; --transition-base: 220ms ease; --transition-slow: 350ms ease; --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-out: cubic-bezier(0.0, 0.0, 0.2, 1); --ease-in-out: cubic-bezier(0.4, 0.0, 0.2, 1); /* ────────────────────────────────────────────────────────── 9. LAYOUT ────────────────────────────────────────────────────────── */ --topbar-height: 58px; --sidebar-width: 240px; --content-max: 880px; /* max width of main card */ --shell-padding: 28px; /* horizontal shell padding */ /* ────────────────────────────────────────────────────────── 10. Z-INDEX SCALE Always use these — never hardcode z-index values. ────────────────────────────────────────────────────────── */ --z-base: 0; --z-raised: 10; --z-dropdown: 100; --z-sticky: 200; --z-sidebar: 999; --z-topbar: 1000; --z-modal: 2000; --z-toast: 3000; --z-tooltip: 4000; /* ────────────────────────────────────────────────────────── 11. BACKWARDS-COMPATIBLE ALIASES These map the old token names used in styles.css to the new design-system tokens. Remove when styles.css is fully migrated to the new naming convention. ────────────────────────────────────────────────────────── */ --primary: var(--color-primary-800); --primary-2: var(--color-primary-900); --accent: var(--color-accent-500); --accent-2: var(--color-rose-400); --page: var(--color-page); --panel: var(--color-panel); --sidebar: var(--color-sidebar); --border: var(--color-border); --border-2: var(--color-border-subtle); --text: var(--color-text); --text-strong: var(--color-text-strong); --muted: var(--color-text-muted); --radius: 8px; --radius-sm: 5px; --radius-lg: 12px; --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04); --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05); --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.07), 0 4px 6px -4px rgba(0, 0, 0, 0.04); --topbar-h: var(--topbar-height); --sidebar-w: var(--sidebar-width); }