/* ───────────────────────────────────────────────────────────────────────── * tokens.css — Nosso.Top Design System v1 * * How to use: * 1. Import this file first in your stylesheet or it before * any other CSS. Every var(--*) reference resolves from here. * 2. Apply dark mode by setting the `data-theme="dark"` attribute on * . The override block below does the rest. * 3. Do NOT write raw hex values outside this file. If you need a * one-off tint, derive it with color-mix(): * color-mix(in oklab, var(--accent), transparent 80%) * * Fonts are NOT bundled here. Load via Google Fonts or self-host: * Plus Jakarta Sans — weights 400 500 600 700 800 * Inter — weights 400 500 600 * ─────────────────────────────────────────────────────────────────────── */ /* ══════════════════════════════════════════════════════════════════════════ LIGHT MODE (default) ══════════════════════════════════════════════════════════════════════════ */ :root { /* ── Brand anchor ─────────────────────────────────────────────────────── * Navy is the brand's dark foundation. It does NOT flip in dark mode — * it is used for the hero background, nav, and the logo mark itself. * Use --fg for body text so it adapts to theme. */ --brand-navy: #0A1628; /* ── Surface (3 levels) ─────────────────────────────────────────────── */ --bg: #F5F7FC; /* page background — cool off-white */ --surface: #FFFFFF; /* cards, inputs, modals */ --surface-subtle: #EEF2F9; /* table zebra, secondary panel bg */ /* ── Foreground ramp (3 levels) ─────────────────────────────────────── */ --fg: #0A1628; /* primary text — same as brand-navy */ --muted: #64748B; /* captions, helper text */ --placeholder: #A0ADBF; /* input placeholders */ /* ── Border (2 levels) ──────────────────────────────────────────────── */ --border: #E2E8F0; /* card edges, dividers */ --border-soft: #EEF2F9; /* table row separators, inner sections */ /* ── Accent — Amber / #D97757 ───────────────────────────────────────── */ --accent: #D97757; /* CTAs, highlights, logo node */ --accent-hover: #C4633E; /* button hover / active state */ --accent-active: #B3572F; /* pressed state */ --accent-light: #FDF0EA; /* tinted badge bg, eyebrow chip bg */ --accent-on: #FFFFFF; /* foreground ON an accent-bg element */ /* ── Semantic (status) ──────────────────────────────────────────────── */ --success: #16A34A; --success-light: #DCFCE7; --warn: #D97706; --warn-light: #FEF3C7; --danger: #DC2626; --danger-light: #FEE2E2; /* ── Typography ─────────────────────────────────────────────────────── */ --font-display: 'Plus Jakarta Sans', -apple-system, system-ui, sans-serif; --font-body: 'Inter', -apple-system, system-ui, sans-serif; --font-mono: ui-monospace, 'JetBrains Mono', monospace; /* Type scale — px values, use with clamp() for fluid sizing */ --text-xs: 11px; --text-sm: 13px; --text-base: 15px; --text-md: 16px; --text-lg: 18px; --text-xl: 20px; --text-2xl: 24px; --text-3xl: 30px; --text-4xl: 38px; --text-5xl: 48px; --text-6xl: 64px; --leading-body: 1.6; --leading-heading: 1.2; --leading-tight: 1.1; --tracking-display: -0.02em; /* apply to ≥ 30px headlines */ --tracking-caps: 0.06em; /* apply to uppercase labels / eyebrows */ /* ── Spacing — 4px base unit ────────────────────────────────────────── */ --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; /* Section vertical rhythm */ --section-y-desktop: 80px; --section-y-tablet: 56px; --section-y-phone: 40px; /* ── Radius ──────────────────────────────────────────────────────────── */ --radius-xs: 4px; --radius-sm: 6px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 24px; --radius-pill: 9999px; /* ── Elevation ───────────────────────────────────────────────────────── */ --elev-flat: none; --elev-ring: 0 0 0 1px var(--border); --elev-card: 0 1px 3px rgba(10,22,40,0.06), 0 4px 12px rgba(10,22,40,0.04); --elev-raised: 0 4px 16px rgba(10,22,40,0.10), 0 1px 4px rgba(10,22,40,0.06); --elev-modal: 0 16px 48px rgba(10,22,40,0.18), 0 4px 16px rgba(10,22,40,0.10); /* ── Focus ring ──────────────────────────────────────────────────────── */ --focus-ring: 0 0 0 3px color-mix(in oklab, var(--accent), transparent 68%); /* ── Motion ──────────────────────────────────────────────────────────── */ --motion-fast: 150ms; --motion-base: 220ms; --motion-slow: 400ms; --ease-std: cubic-bezier(0.2, 0, 0, 1); --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); /* ── Layout ──────────────────────────────────────────────────────────── */ --container-max: 1200px; --container-gutter-desktop: 48px; --container-gutter-tablet: 32px; --container-gutter-phone: 20px; } /* ══════════════════════════════════════════════════════════════════════════ DARK MODE — apply [data-theme="dark"] to ══════════════════════════════════════════════════════════════════════════ */ [data-theme="dark"] { --bg: #0C1524; --surface: #111E35; --surface-subtle: #162035; --fg: #E8F0FA; --muted: #8496AE; --placeholder: #4F6278; --border: #1C2C45; --border-soft: #162035; /* accent stays the same — amber reads well on dark navy */ --accent-light: rgba(217, 119, 87, 0.14); --success-light: rgba(22, 163, 74, 0.18); --warn-light: rgba(217, 119, 6, 0.18); --danger-light: rgba(220, 38, 38, 0.18); --elev-card: 0 1px 3px rgba(0,0,0,0.24), 0 4px 12px rgba(0,0,0,0.20); --elev-raised: 0 4px 16px rgba(0,0,0,0.36), 0 1px 4px rgba(0,0,0,0.24); --elev-modal: 0 16px 48px rgba(0,0,0,0.48), 0 4px 16px rgba(0,0,0,0.30); }