/* * variables.css — Firmeza Design System v1.0 * * Complete design token system. * Every value that appears anywhere in the codebase is defined here first. * No raw values outside this file. * * ┌─────────────────────────────────────────────────────────────────────┐ * │ Sections │ * │ 1. Brand Color Palette │ * │ 2. Neutral Scale (Zinc) │ * │ 3. Semantic Colors │ * │ 4. State Colors (success, warning, error, info) │ * │ 5. Glassmorphism │ * │ 6. Gradient System │ * │ 7. Typography — Font Families │ * │ 8. Typography — Font Sizes │ * │ 9. Typography — Font Weights │ * │ 10. Typography — Line Heights │ * │ 11. Typography — Letter Spacing │ * │ 12. Spacing Scale (8px grid) │ * │ 13. Layout & Grid │ * │ 14. Border & Radius │ * │ 15. Shadow System │ * │ 16. Motion System │ * │ 17. Z-Index Scale │ * └─────────────────────────────────────────────────────────────────────┘ */ :root { /* ══════════════════════════════════════════════════════════════════════ 1. BRAND COLOR PALETTE ────────────────────────────────────────────────────────────────────── Firmeza Navy + Gold — taken directly from the logo. Deep navy is the primary (trust, stability); warm gold is the sparing accent (premium, distinctive). Far less generic in software than the usual indigo/violet. NOTE: the gold ramp lives under the legacy --color-violet-* names so the whole codebase re-skinned to gold without editing hundreds of call sites. ══════════════════════════════════════════════════════════════════════ */ /* Firmeza Blue — primary brand. The signature (brand-500) is #154378, the client's actual brand blue; the ramp is a single-hue tonal scale built around it (lighter tints above, deeper shades below). */ --color-brand-50: #EAF0F7; --color-brand-100: #CBD9EC; --color-brand-200: #A1BAD8; --color-brand-300: #6E93BE; --color-brand-400: #3D6BA0; --color-brand-500: #154378; /* SIGNATURE — the actual brand blue */ --color-brand-600: #123C6C; /* CTA fills / active — a touch deeper */ --color-brand-700: #0F3159; /* Hover states, pressed states */ --color-brand-800: #0B2543; /* Dark fills, accessible text on light BG */ --color-brand-900: #081B31; /* Deep brand, dark section accents */ --color-brand-950: #05101F; /* Near-black navy */ /* Firmeza Gold — secondary accent (matches the logo mark), used sparingly. Kept under the historical --color-violet-* names so every existing reference re-skins to gold without touching hundreds of call sites. */ /* Brand accent — Firmeza blue #154378 (same hue as the primary; a clean single-colour brand). Kept under the legacy --color-violet-* names so every existing reference picks it up with no call-site changes. */ --color-violet-50: #EAF0F7; --color-violet-100: #CBD9EC; --color-violet-200: #A1BAD8; --color-violet-300: #6E93BE; /* Light blue — pops on dark surfaces */ --color-violet-400: #3D6BA0; --color-violet-500: #154378; /* Brand blue — the accent (#154378) */ --color-violet-600: #123C6C; /* Deeper blue — accessible on light bg */ --color-violet-700: #0F3159; --color-violet-800: #0B2543; --color-violet-900: #081B31; --color-violet-950: #05101F; /* ══════════════════════════════════════════════════════════════════════ 2. NEUTRAL SCALE — Zinc ────────────────────────────────────────────────────────────────────── Zinc is chosen over pure grey because its cool blue-grey undertone harmonises with the cobalt brand colour. Warmer greys (stone, sand) create tension with a cool-blue brand; pure neutral greys feel flat. Zinc reads as "engineered" — ideal for a software company. ══════════════════════════════════════════════════════════════════════ */ --color-zinc-50: #FAFAFA; --color-zinc-100: #F4F4F5; --color-zinc-200: #E4E4E7; --color-zinc-300: #D1D1D6; --color-zinc-400: #A1A1AA; --color-zinc-500: #71717A; --color-zinc-600: #52525B; --color-zinc-700: #3F3F46; --color-zinc-800: #27272A; --color-zinc-900: #18181B; --color-zinc-950: #09090B; --color-white: #FFFFFF; --color-black: #000000; /* ══════════════════════════════════════════════════════════════════════ 3. SEMANTIC COLORS ────────────────────────────────────────────────────────────────────── Light-mode defaults. Overridden in the [data-theme="dark"] block below. ══════════════════════════════════════════════════════════════════════ */ /* Backgrounds */ --color-bg: #FFFFFF; /* Primary page background */ --color-bg-subtle: #FAFAFA; /* Alternating sections, inset surfaces */ --color-bg-muted: #F4F4F5; /* Disabled, skeleton, code blocks */ --color-bg-overlay: rgba(9,9,11,0.6); /* Modal scrim */ /* Surfaces (cards, panels, navbar) */ --color-surface: #FFFFFF; --color-surface-raised: #FFFFFF; --color-surface-overlay: #FFFFFF; /* Text */ --color-text-primary: #09090B; /* Headings, key copy */ --color-text-secondary: #3F3F46; /* Body copy */ --color-text-tertiary: #71717A; /* Supporting / muted */ --color-text-disabled: #A1A1AA; /* Disabled state */ --color-text-inverse: #FFFFFF; /* Text on dark fills */ --color-text-brand: #154378; /* Brand-coloured links/labels */ --color-text-accent: #154378; /* Solid BLUE emphasis (brand accent) */ /* Border */ --color-border: #E4E4E7; /* Default border */ --color-border-strong: #D1D1D6; /* Stronger dividers */ --color-border-brand: #4C74A2; /* Focused inputs, selected states */ /* Brand semantic — primary keys off the signature #154378 */ --color-primary: var(--color-brand-500); --color-primary-hover: var(--color-brand-600); --color-primary-light: var(--color-brand-50); /* ══════════════════════════════════════════════════════════════════════ 4. STATE COLORS ══════════════════════════════════════════════════════════════════════ */ --color-success-light: #F0FDF4; --color-success: #22C55E; --color-success-dark: #15803D; --color-warning-light: #FFFBEB; --color-warning: #F59E0B; --color-warning-dark: #B45309; --color-error-light: #FEF2F2; --color-error: #EF4444; --color-error-dark: #B91C1C; --color-info-light: #EFF6FF; --color-info: #3B82F6; --color-info-dark: #1D4ED8; /* ══════════════════════════════════════════════════════════════════════ 5. GLASSMORPHISM ────────────────────────────────────────────────────────────────────── Used for the navbar on scroll, floating cards, and hero overlays. Light-mode and dark-mode variants defined separately. ══════════════════════════════════════════════════════════════════════ */ --glass-bg: rgba(255, 255, 255, 0.72); --glass-bg-strong: rgba(255, 255, 255, 0.88); --glass-bg-dark: rgba(9, 9, 11, 0.72); --glass-bg-brand: rgba(21, 67, 120, 0.08); --glass-border: rgba(255, 255, 255, 0.5); --glass-border-dark: rgba(255, 255, 255, 0.08); --glass-blur: 20px; --glass-blur-strong: 40px; --glass-saturate: 180%; /* ══════════════════════════════════════════════════════════════════════ 6. GRADIENT SYSTEM ────────────────────────────────────────────────────────────────────── All gradients reference brand colours to stay on-system. ══════════════════════════════════════════════════════════════════════ */ /* Brand gradients — navy depth (kept monochrome so UI fills stay clean) */ --gradient-brand: linear-gradient(135deg, var(--color-brand-500) 0%, var(--color-brand-700) 100%); --gradient-brand-soft: linear-gradient(135deg, var(--color-brand-300) 0%, var(--color-brand-500) 100%); --gradient-brand-reverse: linear-gradient(135deg, var(--color-brand-700) 0%, var(--color-brand-500) 100%); /* Dark section backgrounds — navy */ --gradient-dark: linear-gradient(160deg, #060B14 0%, #0A1626 60%, #0C1F35 100%); --gradient-dark-soft: linear-gradient(160deg, #0A1424 0%, #0C1F35 100%); /* Hero mesh — layered radials for ambient glow (navy + gold) */ --gradient-mesh: radial-gradient(ellipse 60% 50% at 20% 40%, rgba(21, 67, 120,0.14) 0%, transparent 70%), radial-gradient(ellipse 40% 60% at 80% 20%, rgba(21, 67, 120,0.10) 0%, transparent 70%), radial-gradient(ellipse 70% 40% at 50% 90%, rgba(21, 67, 120,0.07) 0%, transparent 70%); /* Light noise-free surface gradient */ --gradient-surface: linear-gradient(180deg, var(--color-white) 0%, var(--color-zinc-50) 100%); /* Text gradient — for display headlines: navy → gold metallic sweep (the signature) */ --gradient-text: linear-gradient(120deg, var(--color-brand-600) 0%, var(--color-brand-500) 42%, var(--color-violet-500) 100%); /* ══════════════════════════════════════════════════════════════════════ 7. TYPOGRAPHY — FONT FAMILIES ────────────────────────────────────────────────────────────────────── Pairing: Plus Jakarta Sans (headings) + Inter (body) Plus Jakarta Sans — Geometric grotesque with humanist warmth. Wide character set, confident at large sizes, elegant at small. Used by premium agencies worldwide. Distinctly modern without being trendy. Strong personality at display sizes, readable at UI sizes. Inter — The industry gold standard for software product typography. Optimised for screens at every size from 11px to 96px. Designed specifically for computer interfaces by Rasmus Andersson (Figma). Neutral enough to never fight the brand colour. ══════════════════════════════════════════════════════════════════════ */ --font-display: 'Plus Jakarta Sans', 'Helvetica Neue', Arial, sans-serif; --font-heading: 'Plus Jakarta Sans', 'Helvetica Neue', Arial, sans-serif; --font-body: 'Inter', 'Helvetica Neue', Arial, sans-serif; --font-ui: 'Inter', 'Helvetica Neue', Arial, sans-serif; --font-mono: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace; /* ══════════════════════════════════════════════════════════════════════ 8. TYPOGRAPHY — FONT SIZES ────────────────────────────────────────────────────────────────────── Type scale: 1.25 Major Third (ratio ≈ 1.25). Mobile-first values; fluid overrides in responsive.css. ══════════════════════════════════════════════════════════════════════ */ /* Display — hero headlines, section statements */ --text-display-3xl: clamp(2.75rem, 6.2vw, 5rem); /* 44–80px — oversized hero */ --text-display-2xl: clamp(2.5rem, 5.4vw, 4.5rem); /* 40–72px */ --text-display-xl: clamp(2rem, 4.2vw, 3.25rem); /* 32–52px */ --text-display-lg: clamp(1.875rem, 3.6vw, 2.75rem); /* 30–44px */ /* Heading scale */ --text-h1: clamp(1.875rem, 3.2vw, 3rem); /* 30–48px */ --text-h2: clamp(1.625rem, 2.8vw, 2.375rem); /* 26–38px */ --text-h3: clamp(1.375rem, 2.2vw, 1.875rem); /* 22–30px */ --text-h4: clamp(1.25rem,2vw, 1.75rem); /* 20–28px */ --text-h5: clamp(1.125rem,1.5vw,1.375rem); /* 18–22px */ --text-h6: 1.125rem; /* 18px */ /* Body scale */ --text-body-lg: 1.125rem; /* 18px — intro paragraphs */ --text-body: 1rem; /* 16px — standard body */ --text-body-sm: 0.9375rem; /* 15px — secondary copy */ --text-sm: 0.875rem; /* 14px — meta, captions */ --text-xs: 0.8125rem; /* 13px — labels, fine print */ --text-2xs: 0.75rem; /* 12px — badges, chips */ /* UI scale */ --text-button-lg: 0.9375rem; /* 15px */ --text-button: 0.875rem; /* 14px */ --text-button-sm: 0.8125rem; /* 13px */ --text-label: 0.75rem; /* 12px — form labels, tags */ --text-caption: 0.6875rem; /* 11px — image captions */ /* ══════════════════════════════════════════════════════════════════════ 9. TYPOGRAPHY — FONT WEIGHTS ══════════════════════════════════════════════════════════════════════ */ --weight-thin: 100; --weight-light: 300; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-extrabold: 800; --weight-black: 900; /* ══════════════════════════════════════════════════════════════════════ 10. TYPOGRAPHY — LINE HEIGHTS ══════════════════════════════════════════════════════════════════════ */ --leading-none: 1; --leading-tightest: 1.05; --leading-tight: 1.15; --leading-snug: 1.3; --leading-normal: 1.5; --leading-relaxed: 1.625; --leading-loose: 1.8; --leading-prose: 1.75; /* ══════════════════════════════════════════════════════════════════════ 11. TYPOGRAPHY — LETTER SPACING ══════════════════════════════════════════════════════════════════════ */ --tracking-tightest: -0.04em; --tracking-tighter: -0.03em; --tracking-tight: -0.02em; --tracking-snug: -0.01em; --tracking-normal: 0em; --tracking-wide: 0.02em; --tracking-wider: 0.05em; --tracking-widest: 0.12em; --tracking-ultra: 0.2em; /* Eyebrow/label caps */ /* ══════════════════════════════════════════════════════════════════════ 12. SPACING SCALE — 8px grid ────────────────────────────────────────────────────────────────────── Every spacing value is a multiple of 4 or 8px. This creates predictable, harmonious rhythm across the layout. ══════════════════════════════════════════════════════════════════════ */ --space-px: 1px; --space-0: 0; --space-0-5: 0.125rem; /* 2px */ --space-1: 0.25rem; /* 4px */ --space-1-5: 0.375rem; /* 6px */ --space-2: 0.5rem; /* 8px */ --space-2-5: 0.625rem; /* 10px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-7: 1.75rem; /* 28px */ --space-8: 2rem; /* 32px */ --space-9: 2.25rem; /* 36px */ --space-10: 2.5rem; /* 40px */ --space-11: 2.75rem; /* 44px */ --space-12: 3rem; /* 48px */ --space-14: 3.5rem; /* 56px */ --space-16: 4rem; /* 64px */ --space-18: 4.5rem; /* 72px */ --space-20: 5rem; /* 80px */ --space-24: 6rem; /* 96px */ --space-28: 7rem; /* 112px */ --space-32: 8rem; /* 128px */ --space-36: 9rem; /* 144px */ --space-40: 10rem; /* 160px */ --space-48: 12rem; /* 192px */ --space-56: 14rem; /* 224px */ --space-64: 16rem; /* 256px */ /* Section vertical rhythm */ --section-gap-sm: var(--space-20); /* Compact sections */ --section-gap: var(--space-28); /* Standard sections — airier, hexcode feel */ --section-gap-lg: var(--space-36); /* Hero / statement sections */ --section-gap-xl: var(--space-48); /* Full-page hero */ /* Component inner spacing */ --component-gap-sm: var(--space-4); --component-gap: var(--space-6); --component-gap-lg: var(--space-8); /* ══════════════════════════════════════════════════════════════════════ 13. LAYOUT & GRID ══════════════════════════════════════════════════════════════════════ */ /* Container widths */ --container-xs: 480px; --container-sm: 640px; --container-md: 768px; --container-lg: 1024px; --container-xl: 1200px; /* Default content max-width */ --container-2xl: 1400px; /* Wide layouts */ --container-full: 1600px; /* Near-full bleed */ /* Container horizontal padding */ --container-px-mobile: 1rem; /* 16px */ --container-px-tablet: 2rem; /* 32px */ --container-px-desktop: 3rem; /* 48px */ --container-px: var(--container-px-mobile); /* Grid */ --grid-cols: 12; --grid-gap-sm: var(--space-4); --grid-gap: var(--space-6); --grid-gap-lg: var(--space-8); /* Navbar */ --navbar-height: 72px; --navbar-height-scroll: 60px; /* Compresses on scroll */ /* ══════════════════════════════════════════════════════════════════════ 14. BORDER & RADIUS ────────────────────────────────────────────────────────────────────── Radius scale is intentionally generous — soft corners signal approachability and modernity while still feeling structured. ══════════════════════════════════════════════════════════════════════ */ --border-width: 1px; --border-width-2: 2px; --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 20px; --radius-2xl: 24px; --radius-3xl: 32px; --radius-full: 9999px; /* ══════════════════════════════════════════════════════════════════════ 15. SHADOW SYSTEM ────────────────────────────────────────────────────────────────────── Shadows use a blue-tinted base colour instead of pure black. This creates a more "lifted" effect that harmonises with the brand. Named for their use case, not their visual intensity. ══════════════════════════════════════════════════════════════════════ */ --shadow-xs: 0 1px 2px rgba(9, 9, 11, 0.04); --shadow-sm: 0 1px 3px rgba(9, 9, 11, 0.06), 0 1px 2px rgba(9, 9, 11, 0.04); --shadow-md: 0 4px 6px rgba(9, 9, 11, 0.05), 0 2px 4px rgba(9, 9, 11, 0.04); --shadow-lg: 0 10px 15px rgba(9, 9, 11, 0.08), 0 4px 6px rgba(9, 9, 11, 0.04); --shadow-xl: 0 20px 25px rgba(9, 9, 11, 0.10), 0 8px 10px rgba(9, 9, 11, 0.04); --shadow-2xl: 0 25px 50px rgba(9, 9, 11, 0.20); /* Use-case shadows */ --shadow-card: 0 1px 3px rgba(9, 9, 11, 0.06), 0 4px 12px rgba(9, 9, 11, 0.04); --shadow-card-hover: 0 8px 24px rgba(9, 9, 11, 0.10), 0 2px 6px rgba(9, 9, 11, 0.04); --shadow-modal: 0 24px 64px rgba(9, 9, 11, 0.24), 0 8px 24px rgba(9, 9, 11, 0.08); --shadow-navbar: 0 1px 0 rgba(9, 9, 11, 0.06), 0 2px 8px rgba(9, 9, 11, 0.04); --shadow-dropdown: 0 4px 16px rgba(9, 9, 11, 0.10), 0 1px 4px rgba(9, 9, 11, 0.06); --shadow-button: 0 1px 2px rgba(9, 9, 11, 0.06); --shadow-button-primary: 0 1px 2px rgba(21, 67, 120, 0.20), 0 4px 12px rgba(21, 67, 120, 0.16); --shadow-button-primary-hover: 0 2px 4px rgba(21, 67, 120, 0.24), 0 8px 20px rgba(21, 67, 120, 0.24); --shadow-float: 0 8px 32px rgba(9, 9, 11, 0.12), 0 2px 8px rgba(9, 9, 11, 0.06); /* Glow — used for interactive highlights, brand emphasis */ --glow-brand: 0 0 0 3px rgba(21, 67, 120, 0.20); --glow-brand-strong: 0 0 40px rgba(21, 67, 120, 0.30); --glow-focus: 0 0 0 3px rgba(21, 67, 120, 0.30); /* ══════════════════════════════════════════════════════════════════════ 16. MOTION SYSTEM ────────────────────────────────────────────────────────────────────── Motion philosophy: animations should communicate, not decorate. – Fast enough to feel responsive (≤150ms for micro-interactions) – Slow enough to feel deliberate for significant state changes – Spring easing creates personality; ease-out reads as natural physics ══════════════════════════════════════════════════════════════════════ */ /* Durations */ --duration-instant: 50ms; --duration-fast: 120ms; /* Hover colour changes, icon swaps */ --duration-base: 200ms; /* Most transitions — toggle, show/hide */ --duration-moderate: 300ms; /* Navbar, drawer open */ --duration-slow: 500ms; /* Page entrances, hero reveals */ --duration-slower: 700ms; /* Section scroll-in animations */ --duration-slowest: 1000ms; /* Complex choreographed sequences */ --duration-gentle: 1400ms; /* Ambient / looping (float, pulse) */ /* Easing curves */ --ease-linear: linear; --ease-in: cubic-bezier(0.4, 0, 1, 1); --ease-out: cubic-bezier(0, 0, 0.2, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --ease-standard: cubic-bezier(0.2, 0, 0, 1); /* Material You standard */ --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* Overshoot + settle */ --ease-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94); --ease-snappy: cubic-bezier(0.68, -0.55, 0.27, 1.55); /* Hover lift — micro-elevation on hover */ --hover-lift-sm: translateY(-2px); --hover-lift: translateY(-4px); --hover-lift-lg: translateY(-8px); /* ══════════════════════════════════════════════════════════════════════ 17. Z-INDEX SCALE ══════════════════════════════════════════════════════════════════════ */ --z-below: -1; --z-base: 0; --z-raised: 10; --z-dropdown: 100; --z-sticky: 200; --z-navbar: 300; --z-overlay: 400; --z-modal: 500; --z-toast: 600; --z-tooltip: 700; --z-cursor: 9999; } /* ══════════════════════════════════════════════════════════════════════ DARK THEME ────────────────────────────────────────────────────────────────────── Applied via [data-theme="dark"] on . Only semantic tokens are overridden — primitives are unchanged. ══════════════════════════════════════════════════════════════════════ */ [data-theme="dark"] { /* Backgrounds */ --color-bg: #09090B; --color-bg-subtle: #111113; --color-bg-muted: #18181B; /* Surfaces */ --color-surface: #18181B; --color-surface-raised: #27272A; --color-surface-overlay: #1C1C1F; --color-bg-overlay: rgba(0, 0, 0, 0.7); /* Text */ --color-text-primary: #FAFAFA; --color-text-secondary: #A1A1AA; --color-text-tertiary: #71717A; --color-text-disabled: #52525B; --color-text-inverse: #09090B; --color-text-brand: #4C74A2; /* Border */ --color-border: #27272A; --color-border-strong: #3F3F46; --color-border-brand: #3D6BA0; /* Brighter gold reads better on dark surfaces */ --color-text-accent: #6E93BE; /* Brand accents — lifted for legibility on near-black surfaces. Navy at brand-500/600 is too dark to read as an accent on #09090B, so we shift the accent-facing brand tokens a couple of steps lighter. This also makes primary button fills read a touch brighter on dark, which is ideal. */ --color-brand-500: #5A85B8; /* signature accent text on dark */ --color-brand-600: #4C74A2; /* CTA fills / brand links on dark */ --color-brand-50: #16283C; /* faint brand tint → dark inset */ --color-primary: var(--color-brand-600); --color-primary-hover: #6A93C4; --color-primary-light: #16283C; --color-text-brand: #7FA1C6; /* Selection */ --glass-bg-brand: rgba(90, 133, 184, 0.14); /* Glass (dark-mode) */ --glass-bg: rgba(18, 18, 20, 0.80); --glass-bg-strong: rgba(18, 18, 20, 0.92); --glass-border: rgba(255, 255, 255, 0.08); /* Shadows deepen slightly on dark mode */ --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.30), 0 4px 12px rgba(0, 0, 0, 0.20); --shadow-card-hover: 0 8px 24px rgba(0, 0, 0, 0.40), 0 2px 6px rgba(0, 0, 0, 0.20); --shadow-modal: 0 24px 64px rgba(0, 0, 0, 0.60), 0 8px 24px rgba(0, 0, 0, 0.30); --shadow-navbar: 0 1px 0 rgba(255, 255, 255, 0.04); }