/* ============================================================= ODIN design tokens — single source of truth ------------------------------------------------------------- Every color, size, space, radius, shadow, and type step the UI uses is defined HERE and only here. Components (base.css) read these via var(--token) and never hardcode a value. Two skins, ONE set of token names: :root -> light (warm editorial — the default) [data-theme="dark"] -> dark (neon sci-fi — the CARLs feel) Because both skins define the same names, the same component CSS works in either skin with no overrides and no !important. Set the skin on or : . ============================================================= */ @import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300..700;1,9..40,300..700&family=DM+Mono:wght@400;500&family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap"); :root { /* ---- Type families ------------------------------------- */ --font: "DM Sans", system-ui, sans-serif; --font-display: "DM Sans", system-ui, sans-serif; /* dark skin swaps to Space Grotesk */ --mono: "DM Mono", "SF Mono", ui-monospace, monospace; --font-data: "JetBrains Mono", "DM Mono", ui-monospace, monospace; /* terminal labels + numerics */ /* ---- Type scale (rem on a 16px root) ------------------- Floor is 12px. 11px (--text-2xs) is for TRUE micro labels only (badges, table column heads). Body/UI default = 15px. Prose/reading copy = 16px (--text-md). */ --text-2xs: 0.6875rem; /* 11px — micro labels only */ --text-xs: 0.75rem; /* 12px — meta, captions */ --text-sm: 0.8125rem; /* 13px — dense UI */ --text-base: 0.9375rem; /* 15px — default UI text */ --text-md: 1rem; /* 16px — comfortable reading / prose */ --text-lg: 1.0625rem; /* 17px — subheads */ --text-xl: 1.25rem; /* 20px — card / panel titles */ --text-2xl: 1.5rem; /* 24px — page titles */ --text-3xl: 1.875rem; /* 30px — hero */ /* ---- Line heights -------------------------------------- */ --leading-tight: 1.25; --leading-snug: 1.4; --leading-normal: 1.55; --leading-relaxed: 1.7; /* ---- Weights (DM Sans is variable) --------------------- */ --weight-normal: 400; --weight-medium: 500; --weight-semi: 550; --weight-bold: 600; /* ---- Tracking ------------------------------------------ */ --track-tight: -0.015em; --track-normal: 0; --track-label: 0.06em; /* uppercase eyebrows / nav */ --track-wide: 0.18em; /* mono data labels */ --track-wider: 0.24em; /* section eyebrows / crumbs */ /* ---- Spacing scale (4px base) -------------------------- */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.5rem; /* 24px */ --space-6: 2rem; /* 32px */ --space-8: 3rem; /* 48px */ /* ---- Radius -------------------------------------------- */ --radius-sm: 5px; --radius: 8px; --radius-lg: 14px; /* ---- Motion -------------------------------------------- */ --transition: 0.15s ease; /* ===== LIGHT SKIN ======================================= */ /* surfaces */ --bg: #f5f4f0; --bg-warm: #eceae4; --surface: #fff; --surface-raised: #fff; --panel: #fff; /* text */ --text-color: #2a2a28; --text-secondary: #74736e; --text-tertiary: #a09f9a; --text-faint: #b8b6b0; /* dimmest — mono meta, hints, timestamps */ /* borders */ --border: #dfddd8; --border-light: #eceae6; --border-strong: #cfccc4; /* brand + accent */ --brand: #a6be38; --brand-dark: #8da02e; --brand-subtle: #eef3d6; --brand-contrast: #1d2106; /* dark ink — readable on the lime --brand (white failed WCAG) */ --accent: #4a6fa5; /* ODIN blue */ --accent-dark: #3a5a8a; --accent-subtle: #e8eef6; /* neon accent trio (CARL class colors) — usable in both skins */ --accent-pink: #d6457f; --accent-cyan: #2898b8; --accent-violet: #7d56c4; /* status */ --ok: #5a8a2e; --ok-subtle: #eef3d6; --warn: #d97706; --warn-subtle: #fef9ee; --danger: #dc2626; --danger-subtle: #fef2f2; --info: #2563eb; --info-subtle: #eff5ff; /* focus ring */ --ring: var(--brand-subtle); /* elevation */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04); /* header (kept dark in both skins — ODIN's signature top bar) */ --header-bg: #2a2a28; --header-text: #a09f9a; --header-text-hover: #e0dfda; --header-brand: var(--brand); /* ---- Character (the projects-page signature, generalized) ---- Light keeps these restrained; the dark skin turns them up. The same components read these names, so the personality travels. */ --gradient-display: linear-gradient(100deg, var(--text-color) 30%, var(--accent) 130%); --display-glow: none; --panel-glass: var(--surface); --panel-glass-blur: none; --panel-glass-shadow: var(--shadow-sm); --rule-fade: linear-gradient(90deg, var(--border-strong), transparent); --fx-glow: none; /* component glow; currentColor-tinted in dark */ --fx-glow-strong: none; } /* ===== DARK SKIN ========================================== Same token NAMES, neon sci-fi VALUES. This is the CARLs palette from carls-v2.css, generalized so every component inherits it automatically. */ [data-theme="dark"] { --font-display: "Space Grotesk", "DM Sans", system-ui, sans-serif; /* surfaces */ --bg: #07071a; --bg-warm: #0d0d26; --surface: rgba(22, 22, 54, 0.55); --surface-raised: rgba(30, 30, 68, 0.7); --panel: rgba(22, 22, 54, 0.55); /* text */ --text-color: #f4f2ff; --text-secondary: #cfccf0; --text-tertiary: #8e8bbf; --text-faint: #5a588a; /* dimmest — mono meta, hints, timestamps */ /* borders */ --border: rgba(255, 255, 255, 0.06); --border-light: rgba(255, 255, 255, 0.06); --border-strong: rgba(255, 255, 255, 0.14); /* brand + accent — green holds the identity; cyan carries links/focus */ --brand: #b6d23f; --brand-dark: #a6be38; --brand-subtle: rgba(182, 210, 63, 0.14); --brand-contrast: #07071a; --accent: #38d8ff; --accent-dark: #2898b8; --accent-subtle: rgba(56, 216, 255, 0.14); /* neon accent trio at full strength in the dark */ --accent-pink: #ff4dc9; --accent-cyan: #38d8ff; --accent-violet: #a97bff; /* status (brighter to read on deep bg) */ --ok: #6ff3b0; --ok-subtle: rgba(111, 243, 176, 0.12); --warn: #ffd166; --warn-subtle: rgba(255, 209, 102, 0.12); --danger: #ff6b8a; --danger-subtle: rgba(255, 107, 138, 0.12); --info: #38d8ff; --info-subtle: rgba(56, 216, 255, 0.12); --ring: rgba(56, 216, 255, 0.35); /* elevation — subtle depth + a faint accent glow on raised things */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow: 0 2px 8px rgba(0, 0, 0, 0.45); --shadow-md: 0 8px 28px rgba(0, 0, 0, 0.5), 0 0 24px rgba(56, 216, 255, 0.08); /* header */ --header-bg: rgba(7, 7, 26, 0.75); --header-text: #8e8bbf; --header-text-hover: #f4f2ff; --header-brand: #b6d23f; /* ---- Character, full strength ---- */ --gradient-display: linear-gradient( 100deg, #ffffff 0%, var(--accent-cyan) 45%, var(--accent-violet) 100% ); --display-glow: drop-shadow(0 0 30px rgba(56, 216, 255, 0.16)); --panel-glass: linear-gradient(180deg, rgba(30, 30, 70, 0.5), rgba(18, 18, 48, 0.62)); --panel-glass-blur: blur(6px); --panel-glass-shadow: 0 6px 24px rgba(0, 0, 0, 0.25); --rule-fade: linear-gradient(90deg, var(--border-strong), transparent); --fx-glow: 0 0 8px color-mix(in srgb, currentColor 55%, transparent); --fx-glow-strong: 0 0 14px color-mix(in srgb, currentColor 80%, transparent); }