/* ============================================================ AI Model Radar — Design Tokens (CSS Custom Properties) aimodelradar.app Source of truth for colour, type, spacing, radius, motion. Light theme is default (data-rich surfaces). Dark = "radar" hero. Toggle dark via: or .dark ============================================================ */ :root { /* ---- Brand: Signal (radar phosphor) -------------------- */ --signal-50: #E7FCF4; --signal-100: #C5F7E3; --signal-200: #93EFCB; --signal-300: #5BE3B0; --signal-400: #2BD79A; --signal-500: #12C488; /* core brand accent */ --signal-600: #0AA372; /* interactive on light surfaces (icons/UI) */ --signal-700: #0A8460; /* deep teal — large/bold link text on light */ --signal-800: #0B6A4E; /* link text on light (AA on white) */ --signal-900: #0A5340; /* ---- Neutrals: cool, instrument-panel ------------------ */ --neutral-50: #F6F8FB; --neutral-100: #ECEFF4; --neutral-200: #DCE2EB; --neutral-300: #C2CBD9; --neutral-400: #94A1B5; --neutral-500: #677488; --neutral-600: #4B5668; --neutral-700: #353E4D; --neutral-800: #232B37; --neutral-900: #161C26; --neutral-950: #0A0F1C; /* Radar Ink — the screen */ --ring-line: #3A4658; /* radar ring / hairline on dark */ /* ---- Semantic (status pills, model lifecycle) ---------- */ --success: #1FB573; /* GA / available */ --info: #3B9EF0; /* preview / beta */ --warning: #F5A524; /* rate-limited / changed */ --danger: #F0455E; /* deprecated / removed */ /* ---- Radius -------------------------------------------- */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 24px; --radius-full: 9999px; /* ---- Spacing (4px base) -------------------------------- */ --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; /* ---- Typography ---------------------------------------- */ --font-display: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif; --font-body: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; --text-xs: 0.75rem; /* 12 */ --text-sm: 0.875rem; /* 14 */ --text-base: 1rem; /* 16 */ --text-lg: 1.125rem; /* 18 */ --text-xl: 1.25rem; /* 20 */ --text-2xl: 1.5rem; /* 24 */ --text-3xl: 1.875rem; /* 30 */ --text-4xl: 2.375rem; /* 38 */ --text-5xl: 3rem; /* 48 */ --text-6xl: 3.75rem; /* 60 */ --leading-tight: 1.15; --leading-snug: 1.3; --leading-normal: 1.5; --leading-relaxed:1.65; --tracking-tight: -0.02em; /* display headings */ --tracking-normal: 0; --tracking-wide: 0.04em; /* eyebrows / labels (uppercase) */ --weight-regular: 400; --weight-medium: 500; --weight-semibold:600; --weight-bold: 700; /* ---- Motion -------------------------------------------- */ --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1); --ease-out: cubic-bezier(0, 0, 0.2, 1); --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 320ms; --sweep-period: 4s; /* radar live-indicator rotation period */ /* ---- Shadows (cool-tinted) ----------------------------- */ --shadow-sm: 0 1px 2px rgba(10,15,28,0.06); --shadow-md: 0 4px 12px rgba(10,15,28,0.08); --shadow-lg: 0 12px 32px rgba(10,15,28,0.12); --shadow-glow:0 0 0 1px rgba(18,196,136,0.25), 0 0 16px rgba(18,196,136,0.30); /* ============ Semantic surface tokens — LIGHT =========== */ --bg: var(--neutral-50); --surface: #FFFFFF; --surface-2: var(--neutral-50); --surface-inset: var(--neutral-100); --border: var(--neutral-200); --border-strong: var(--neutral-300); --text-primary: var(--neutral-900); --text-secondary: var(--neutral-600); --text-muted: var(--neutral-500); --text-on-accent: #04231A; --accent: var(--signal-600); /* icons, active UI */ --accent-text: var(--signal-800); /* link text (AA on white) */ --accent-bg: var(--signal-50); /* tint fill */ --focus-ring: var(--signal-500); } /* ============ Semantic surface tokens — DARK ============== */ [data-theme="dark"], .dark { --bg: var(--neutral-950); --surface: #0F1623; --surface-2: #131C2B; --surface-inset: #0B121F; --border: var(--neutral-800); --border-strong: var(--neutral-700); --text-primary: var(--neutral-100); --text-secondary: var(--neutral-400); --text-muted: var(--neutral-500); --text-on-accent: #04231A; --accent: var(--signal-500); --accent-text: var(--signal-400); --accent-bg: rgba(18,196,136,0.10); --focus-ring: var(--signal-400); --shadow-sm: 0 1px 2px rgba(0,0,0,0.4); --shadow-md: 0 4px 12px rgba(0,0,0,0.5); --shadow-lg: 0 16px 40px rgba(0,0,0,0.6); } /* respect reduced motion: stop the radar sweep */ @media (prefers-reduced-motion: reduce) { :root { --sweep-period: 0s; } }