/**
* Fin Fanfa Design System
* colors_and_type.css
*
* Core design tokens: color + typography CSS custom properties.
* Import this file into any HTML or CSS file to use the Fin Fanfa brand.
*
* Fonts: Geist (via Google Fonts CDN — substitute until official files provided)
* Load with:
*
*
*/
/* ─── BRAND FONTS — LOCAL @font-face ────────────────────────────── */
/* Geist Variable — full weight axis 100–900 from uploaded TTF */
@font-face {
font-family: 'Geist';
src: url('fonts/Geist-VariableFont_wght.ttf') format('truetype');
font-weight: 100 900;
font-style: normal;
font-display: swap;
}
/* Geist Mono — no local files; load from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Geist+Mono:wght@400;500;600&display=swap');
/* ─── COLOR PALETTE ─────────────────────────────────────────────── */
:root {
/* Base scale — darkest → lightest */
--color-black: #01040A; /* near-absolute black */
--color-void: #020617; /* deepest background */
--color-navy-950: #0E163B; /* deep navy — primary bg */
--color-navy-800: #242F60; /* mid navy */
--color-navy-700: #1C60DA; /* electric blue — primary CTA */
--color-navy-600: #455084; /* slate blue */
--color-navy-400: #707AA9; /* muted blue-grey */
--color-navy-200: #A5ACCD; /* light periwinkle */
--color-navy-100: #CED4F2; /* lavender — primary light text */
/* ─── SEMANTIC COLORS ─────────────────────────────────────────── */
/* Backgrounds — true dark theme rooted at #01040A */
--bg-base: #01040A; /* page root — brand black */
--bg-primary: #04080F; /* main section bg */
--bg-secondary: #070C18; /* cards, panels, elevated */
--bg-surface: #0B1122; /* highest elevation surface */
--bg-overlay: rgba(1, 4, 10, 0.92); /* modal overlays */
--bg-void: #01040A; /* deepest / between-section bg */
/* Foregrounds / Text */
--fg-primary: var(--color-navy-100); /* headings, primary text */
--fg-secondary: var(--color-navy-200); /* body text */
--fg-muted: var(--color-navy-400); /* captions, placeholders */
--fg-inverse: var(--color-navy-950); /* text on light bg */
/* Accents */
--accent-primary: var(--color-navy-700); /* electric blue — CTAs, links */
--accent-hover: #2B6FE8; /* CTA hover state */
--accent-press: #1550B8; /* CTA active/press state */
/* Borders */
--border-subtle: rgba(206, 212, 242, 0.12);
--border-default: rgba(206, 212, 242, 0.22);
--border-strong: rgba(206, 212, 242, 0.45);
/* Gradients */
--gradient-hero: linear-gradient(180deg, var(--color-black) 0%, #060C1A 100%);
--gradient-card: linear-gradient(135deg, #1A2550 0%, var(--color-black) 100%);
--gradient-blue: linear-gradient(180deg, var(--color-black) 0%, var(--color-navy-700) 100%);
--gradient-glow: radial-gradient(ellipse 60% 40% at 50% 0%, rgba(28,96,218,0.28) 0%, transparent 70%);
/* Status */
--color-success: #22C55E;
--color-warning: #F59E0B;
--color-error: #EF4444;
}
/* ─── TYPOGRAPHY SCALE ──────────────────────────────────────────── */
:root {
--font-sans: 'Geist', 'SF Pro Display', -apple-system, sans-serif;
--font-mono: 'Geist Mono', 'SF Mono', 'Fira Code', monospace;
/* Size scale */
--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.25rem; /* 36px */
--text-5xl: 3rem; /* 48px */
--text-6xl: 3.75rem; /* 60px */
--text-7xl: 4.5rem; /* 72px */
--text-8xl: 6rem; /* 96px */
/* Weight scale */
--font-light: 300;
--font-regular: 400;
--font-medium: 500;
--font-semibold:600;
--font-bold: 700;
--font-extrabold:800;
--font-black: 900;
/* Line heights */
--leading-none: 1;
--leading-tight: 1.1;
--leading-snug: 1.3;
--leading-normal: 1.5;
--leading-relaxed:1.625;
/* Letter spacing */
--tracking-tight: -0.04em;
--tracking-normal: 0em;
--tracking-wide: 0.05em;
--tracking-widest: 0.15em;
}
/* ─── SEMANTIC TYPE ROLES ───────────────────────────────────────── */
:root {
/* Display — hero headlines, large brand statements */
--type-display-size: var(--text-7xl);
--type-display-weight: var(--font-extrabold);
--type-display-leading: var(--leading-tight);
--type-display-tracking:var(--tracking-tight);
/* Heading 1 */
--type-h1-size: var(--text-5xl);
--type-h1-weight: var(--font-bold);
--type-h1-leading: var(--leading-tight);
--type-h1-tracking: var(--tracking-tight);
/* Heading 2 */
--type-h2-size: var(--text-3xl);
--type-h2-weight: var(--font-semibold);
--type-h2-leading: var(--leading-snug);
--type-h2-tracking: -0.02em;
/* Heading 3 */
--type-h3-size: var(--text-2xl);
--type-h3-weight: var(--font-semibold);
--type-h3-leading: var(--leading-snug);
--type-h3-tracking: -0.01em;
/* Body */
--type-body-size: var(--text-base);
--type-body-weight: var(--font-regular);
--type-body-leading: var(--leading-relaxed);
--type-body-tracking: var(--tracking-normal);
/* Body small */
--type-body-sm-size: var(--text-sm);
--type-body-sm-weight: var(--font-regular);
--type-body-sm-leading: var(--leading-normal);
/* Caption */
--type-caption-size: var(--text-xs);
--type-caption-weight: var(--font-medium);
--type-caption-tracking:var(--tracking-wide);
/* Label / UI */
--type-label-size: var(--text-sm);
--type-label-weight: var(--font-medium);
--type-label-tracking: var(--tracking-normal);
/* Code / mono */
--type-code-size: var(--text-sm);
--type-code-weight: var(--font-regular);
--type-code-leading: var(--leading-relaxed);
}
/* ─── SPACING SCALE ─────────────────────────────────────────────── */
:root {
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--space-10: 40px;
--space-12: 48px;
--space-16: 64px;
--space-20: 80px;
--space-24: 96px;
--space-32: 128px;
}
/* ─── BORDER RADIUS ─────────────────────────────────────────────── */
:root {
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-xl: 16px;
--radius-2xl: 20px;
--radius-brand:27px; /* App icon radius — from Figma */
--radius-full: 9999px;
}
/* ─── SHADOWS ───────────────────────────────────────────────────── */
:root {
--shadow-sm: 0 1px 3px rgba(1,4,10,0.5);
--shadow-md: 0 4px 16px rgba(1,4,10,0.6), 0 1px 3px rgba(1,4,10,0.4);
--shadow-lg: 0 12px 40px rgba(1,4,10,0.7), 0 4px 12px rgba(1,4,10,0.4);
--shadow-glow: 0 0 40px rgba(28,96,218,0.35), 0 0 80px rgba(28,96,218,0.15);
--shadow-card: 0 2px 12px rgba(1,4,10,0.5), inset 0 1px 0 rgba(206,212,242,0.08);
}
/* ─── TRANSITIONS ───────────────────────────────────────────────── */
:root {
--ease-default: cubic-bezier(0.4, 0, 0.2, 1);
--ease-in: cubic-bezier(0.4, 0, 1, 1);
--ease-out: cubic-bezier(0, 0, 0.2, 1);
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
--duration-fast: 150ms;
--duration-base: 250ms;
--duration-slow: 400ms;
}