/* ============================================================ Octomatica — canonical design tokens (THE single source). Plain-CSS mounting. For a Next/Tailwind app, use app-globals.css (same values, exposed to Tailwind via @theme inline). Load Golos Text + Onest + JetBrains Mono before this file: @import url('https://fonts.googleapis.com/css2?family=Golos+Text:wght@400..900&family=Onest:wght@300..800&family=JetBrains+Mono:wght@400;500;600&display=swap'); ============================================================ */ :root { /* ── Surfaces (warm paper + octopus-ink dark bands) ── */ --paper: #FAFBFA; /* page canvas */ --paper-2: #F1F4F2; /* deeper section bands */ --surface: #FFFFFF; /* cards */ --surface-2: #F7F9F8; /* subtle card */ --ink-surface: oklch(0.21 0.028 168); /* dark band background (octopus ink) */ --ink-surface-2: oklch(0.25 0.034 168); /* raised card on the ink band */ /* ── Ink (text) ── */ --ink: #0F1613; /* primary — green-tinted near-black */ --ink-2: #424D47; /* secondary */ --ink-3: #5E6A63; /* muted (WCAG-AA on paper) */ --ink-on-dark: #ECF3EF; /* primary text on ink */ --ink-on-dark-2: #A6B8AF; /* muted text on ink */ /* ── Lines / hairlines ── */ --line: #E7ECE9; --line-2: #D6DBD8; --line-strong: #0F1613; --ink-line: rgba(236,243,239,.12); /* hairline on ink bands */ /* ── Brand accent — THE ONE GREEN (#0E9F6E) + ramp ── */ --accent: #0E9F6E; /* brand emerald */ --accent-bright: #14B981; /* hover / bright */ --accent-deep: #0A7351; /* accent text on light (AA) */ --accent-on-ink: #3FE0A6; /* emerald that pops on dark ink */ --accent-soft: #DEF3E8; /* tint panels */ --accent-softer: #EDF8F1; /* faintest tint */ --accent-on: #FFFFFF; /* text on accent fill */ --glow: rgba(20,185,129,.22); /* button / orb glow */ --glow-2: rgba(20,185,129,.10); /* ── Category / data hues (data-viz only, fixed order, never decorative) ── */ --c-coral: #F0714F; --c-blue: #4F84E6; --c-amber: #EBA033; --c-purple:#9B7BF0; --c-teal: #1FA8A0; --c-pink: #E867A6; /* ── Radii ── */ --r-xs: 8px; --r-sm: 12px; --r-md: 18px; --r-lg: 26px; --r-xl: 36px; --r-pill: 999px; /* ── Shadows ── */ --sh-sm: 0 1px 2px rgba(16,24,15,.05), 0 2px 8px rgba(16,24,15,.04); --sh-md: 0 4px 14px rgba(16,24,15,.06), 0 14px 36px -10px rgba(16,24,15,.10); --sh-lg: 0 8px 24px rgba(16,24,15,.08), 0 30px 70px -20px rgba(16,24,15,.16); --sh-glow: 0 14px 40px -10px var(--glow); /* ── Spacing (4pt scale) ── */ --space-2xs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px; --space-2xl: 48px; --space-3xl: 64px; --space-4xl: 96px; /* ── Motion ── */ --ease: cubic-bezier(.22,1,.36,1); --ease-spring: cubic-bezier(.16,1,.3,1); /* ── Type ── */ --font-display: 'Golos Text', system-ui, sans-serif; /* hero / brand */ --font-head: 'Golos Text', system-ui, sans-serif; /* section headings */ --font-sans: 'Onest', system-ui, sans-serif; /* body */ --font-mono: 'JetBrains Mono', ui-monospace, monospace; /* labels, metrics, code, URLs */ /* ── Layout ── */ --maxw: 1160px; /* .wrap max-width (use --maxw-wide 1340px for wide) */ --maxw-wide: 1340px; --nav-h: 62px; color-scheme: light; } /* ── Dark theme — one remap. Set data-theme="dark" OR class="dark" on . ── Ink-surface + on-dank inks already read as dark, so they carry over. */ :root[data-theme="dark"], .dark { --paper: #0B0E0C; --paper-2: #0F1311; --surface: #161B18; --surface-2: #1B201D; --ink: #F1F4F2; --ink-2: #AAB4AE; --ink-3: #6E7A73; --line: #262E29; --line-2: #313A34; --accent: #16C586; --accent-bright: #34D9A0; --accent-deep: #3FE0A6; /* brighter for text on dark */ --accent-soft: rgba(22,197,134,.14); --accent-softer: rgba(22,197,134,.08); color-scheme: dark; } /* ── Base setup ── */ html { font-size: 93.75%; } /* ≈15px root */ body { font-family: var(--font-sans); line-height: 1.6; color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; } ::selection { background: var(--accent-soft); color: var(--accent-deep); } h1, h2, h3 { font-family: var(--font-head); font-weight: 700; letter-spacing: -.02em; line-height: 1.04; text-wrap: balance; }