/* ────────────────────────────────────────────────────────────────── SSX.LV — Editorial Design Tokens Bold automotive-magazine system. Dark by default. Override on for light mode. Override on to swap accent. ────────────────────────────────────────────────────────────────── */ :root { /* ── INK (background tiers) ─────────────────────────────────── */ --ink-1000: #050507; --ink-900: #0B0B0E; /* page base */ --ink-800: #111113; /* primary surface (matches manifest) */ --ink-700: #16171B; /* elevated card */ --ink-600: #1F2025; /* hover / inset */ --ink-500: #2A2C32; /* ── PAPER (foreground tiers, warm whites) ──────────────────── */ --paper: #F4F2EC; /* primary text */ --paper-dim: #B9B6AC; /* secondary text */ --steel-1: #8C8F97; /* meta / captions */ --steel-2: #5E6168; /* very subtle */ /* ── LINES ──────────────────────────────────────────────────── */ --line: rgba(244, 242, 236, 0.08); --line-soft: rgba(244, 242, 236, 0.04); --line-strong: rgba(244, 242, 236, 0.18); /* ── ACCENTS ─────────────────────────────────────────────────── */ --acid: #E6FF3D; /* signal yellow-green — primary */ --acid-ink: #0B0B0E; /* text-on-acid */ --rust: #FF5A2C; /* hot orange — secondary */ --electric: #5BFFB1; /* mint EV indicator */ /* alias: --brand is the active accent (swappable) */ --brand: var(--acid); --brand-ink: var(--acid-ink); --brand-soft: color-mix(in oklab, var(--brand) 14%, transparent); --brand-line: color-mix(in oklab, var(--brand) 40%, transparent); /* semantic */ --good: #5BFFB1; --warn: #FFC83D; --bad: #FF5A5A; /* ── TYPE ─────────────────────────────────────────────────────── */ --font-display: "Roboto", "Roboto Fallback", system-ui, sans-serif; --font-body: "Roboto", "Roboto Fallback", system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: "Roboto Mono", ui-monospace, "SF Mono", Consolas, monospace; /* fluid display scale */ --t-hero: clamp(3rem, 7.5vw, 7.5rem); /* article hero */ --t-jumbo: clamp(2.5rem, 5.5vw, 5rem); --t-h1: clamp(2rem, 3.6vw, 3.25rem); --t-h2: clamp(1.5rem, 2.4vw, 2.125rem); --t-h3: 1.375rem; --t-h4: 1.125rem; --t-body: 1.0625rem; /* 17px */ --t-body-lg:1.1875rem; /* 19px reading width on article */ --t-small: 0.875rem; --t-micro: 0.75rem; /* line-heights */ --lh-tight: 0.92; --lh-snug: 1.08; --lh-mid: 1.3; --lh-body: 1.55; /* tracking */ --track-eyebrow: 0.16em; --track-tight: -0.02em; --track-x-tight: -0.035em; /* ── SPACE ───────────────────────────────────────────────────── */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px; /* ── RADII ───────────────────────────────────────────────────── */ --r-1: 4px; --r-2: 8px; --r-3: 12px; --r-4: 18px; --r-pill: 999px; /* ── SHADOWS ─────────────────────────────────────────────────── */ --sh-1: 0 1px 0 0 var(--line); --sh-2: 0 8px 24px -8px rgba(0,0,0,0.4); --sh-3: 0 24px 60px -20px rgba(0,0,0,0.6); /* ── LAYOUT ──────────────────────────────────────────────────── */ --col-narrow: 64ch; /* reading column */ --col-medium: 880px; --col-wide: 1200px; --col-full: 1440px; --gutter: clamp(20px, 4vw, 48px); } /* ── LIGHT MODE OVERRIDE ─────────────────────────────────────── */ :root[data-theme="light"] { --ink-1000: #FBFAF6; --ink-900: #F4F2EC; --ink-800: #ECEAE2; --ink-700: #E0DDD3; --ink-600: #D2CFC4; --ink-500: #BAB7AB; --paper: #14141A; --paper-dim: #3A3C44; --steel-1: #5E6168; --steel-2: #8C8F97; --line: rgba(20,20,26,0.10); --line-soft: rgba(20,20,26,0.05); --line-strong: rgba(20,20,26,0.22); --acid-ink: #0B0B0E; } /* ── ACCENT SWAPS ─────────────────────────────────────────────── */ :root[data-accent="rust"] { --brand: var(--rust); --brand-ink: #fff; } :root[data-accent="electric"]{ --brand: var(--electric); --brand-ink: #0B0B0E; } :root[data-accent="cyan"] { --brand: #7DF3FF; --brand-ink: #0B0B0E; } :root[data-accent="paper"] { --brand: var(--paper); --brand-ink: var(--ink-900); } /* ── DENSITY ──────────────────────────────────────────────────── */ :root[data-density="cozy"] { --rhythm: 1.15; } :root[data-density="standard"]{ --rhythm: 1; } :root[data-density="compact"] { --rhythm: 0.85; } :root { --rhythm: 1; } /* ── BASE RESET ───────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--ink-900); color: var(--paper); font-family: var(--font-body); font-size: var(--t-body); line-height: var(--lh-body); font-feature-settings: "ss01", "ss02", "cv11"; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-synthesis: none; } ::selection { background: var(--brand); color: var(--brand-ink); } img, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } a.link { color: var(--brand); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; } a.link:hover { text-decoration-thickness: 2px; } hr { border: 0; height: 1px; background: var(--line); margin: var(--s-6) 0; }