/* ============================================================
   Closer design tokens — vendored for the static blog.

   Source: mockups/.../Closer Design System/tokens/*.css, concatenated
   in styles.css order: fonts -> colors -> typography -> spacing ->
   effects -> base. Don't reorder; don't hand-edit rules — edit the
   design system and re-vendor.

   Unscoped on :root, and base.css's global reset applies. That is
   correct here: blog pages are standalone documents with no React
   app. (src/landing/landing.css scopes the same tokens under
   .closer-landing because it shares a document with the app.)
   ============================================================ */

/* ---------- tokens/fonts.css ---------- */
/* Self-hosted, latin subset — same files the landing page uses.
   Not the upstream Google Fonts @import: that is render-blocking,
   leaks reader IPs to Google, and breaks behind content blockers. */
@font-face {
  font-family: 'VT323';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/vt323-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/space-mono-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/space-mono-700.woff2') format('woff2');
}

/* ---------- tokens/colors.css ---------- */
/* ============================================================
   COLORS
   Terminal / retro-computer palette. Dark surfaces, single
   high-voltage orange accent, cool grey text. Sharp, no tints.
   ============================================================ */
:root {
  /* --- Base ramp (surfaces, darkest → lightest) --- */
  --black: #000000;          /* footer, deep wells */
  --bg-void: #090a0c;        /* horizontal-scroll section */
  --bg-dark: #0d0f12;        /* page background */
  --bg-panel: #111317;       /* cards, panels, inputs backdrop */
  --bg-elevated: #1a1d24;    /* raised tiles in grids */
  --bg-hi: #22262d;          /* highest neutral surface */

  /* --- Ink --- */
  --text-light: #f0f0f0;     /* primary text */
  --text-muted: #8b949e;     /* secondary / captions */
  --text-faint: #555555;     /* legal, footnotes */

  /* --- Accent (the one brand color) --- */
  --accent-orange: #FF6600;         /* signal orange */
  --accent-orange-soft: rgba(255,102,0,0.10);  /* wash behind active states */
  --accent-orange-glow: rgba(255,102,0,0.30);  /* shadow / text-shadow */

  /* --- Lines --- */
  --border-color: #2d333b;   /* default hairline */
  --border-dashed: #2d333b;  /* dashed dividers (same color) */

  /* --- Buttons (solid CTA) --- */
  --btn-bg: #e6e6e6;
  --btn-text: #0d0f12;

  /* ---------------- Semantic aliases ---------------- */
  --surface-page: var(--bg-dark);
  --surface-card: var(--bg-panel);
  --surface-sunken: var(--bg-void);
  --surface-raised: var(--bg-elevated);

  --text-primary: var(--text-light);
  --text-secondary: var(--text-muted);
  --text-legal: var(--text-faint);
  --text-accent: var(--accent-orange);

  --border-default: var(--border-color);
  --focus-ring: var(--accent-orange);
}

/* ---------- tokens/typography.css ---------- */
/* ============================================================
   TYPOGRAPHY
   Two families only:
   • VT323      — pixel/terminal display. Headings, numerals,
                  prices, step numbers. ALWAYS uppercase.
   • Space Mono — everything else: body, labels, buttons, UI.
   ============================================================ */
:root {
  /* --- Families --- */
  --font-display: 'VT323', 'Courier New', monospace;   /* pixel headings */
  --font-body: 'Space Mono', 'Courier New', monospace; /* body + UI */
  --font-mono: 'Space Mono', 'Courier New', monospace; /* code / meta */

  /* --- Display scale (VT323) --- */
  --display-hero: 64px;   /* hero H1 */
  --display-xxl: 100px;   /* giant step numerals */
  --display-xl: 48px;     /* section H3 / prices */
  --display-lg: 42px;     /* section titles */
  --display-md: 32px;     /* card headings */
  --display-sm: 24px;     /* wordmark / marquee */

  /* --- Body scale (Space Mono) --- */
  --text-lg: 15px;
  --text-base: 14px;      /* default paragraph */
  --text-sm: 13px;
  --text-xs: 12px;        /* labels, list items, buttons */
  --text-2xs: 10px;       /* meta tags, legal */

  /* --- Weights --- */
  --weight-regular: 400;
  --weight-bold: 700;

  /* --- Line heights --- */
  --leading-tight: 1.1;
  --leading-snug: 1.3;
  --leading-body: 1.6;

  /* --- Tracking --- */
  --tracking-display: 2px;   /* VT323 headings */
  --tracking-wordmark: 4px;  /* wordmark */
  --tracking-normal: 0;

  /* ---------------- Semantic aliases ---------------- */
  --text-heading-font: var(--font-display);
  --text-body-font: var(--font-body);
}

/* ---------- tokens/spacing.css ---------- */
/* ============================================================
   SPACING & SIZING
   Loose, room-to-breathe rhythm. Section padding is generous;
   inside components spacing is tight and mechanical.
   ============================================================ */
:root {
  /* --- Space scale --- */
  --space-1: 5px;
  --space-2: 10px;
  --space-3: 15px;
  --space-4: 20px;
  --space-5: 30px;
  --space-6: 40px;
  --space-7: 60px;
  --space-8: 100px;   /* vertical section padding */

  /* --- Layout --- */
  --content-max: 1000px;   /* section-padding max width */
  --nav-max: 800px;        /* pill navbar max width when docked */
  --nav-height: 80px;      /* navbar at rest */
  --nav-height-docked: 60px;

  /* --- Radii — SHARP by default. Only the pill navbar rounds. --- */
  --radius-none: 0;        /* everything: cards, buttons, inputs */
  --radius-pill: 50px;     /* docked navbar island only */
  --radius-dot: 50%;       /* carousel dots */

  /* --- Grid overlay --- */
  --grid-line: rgba(255,255,255,0.03);
  --grid-gap: 80px;        /* vertical rule spacing on body bg */

  /* ---------------- Semantic aliases ---------------- */
  --pad-section: var(--space-8);
  --pad-card: var(--space-6);
  --gap-card: var(--space-5);
  --radius-card: var(--radius-none);
  --radius-control: var(--radius-none);
}

/* ---------- tokens/effects.css ---------- */
/* ============================================================
   EFFECTS
   Borders, shadows, blur, motion. No soft/floaty aesthetics —
   shadows are hard wells of black; glow is reserved for the
   orange accent only.
   ============================================================ */
:root {
  /* --- Borders --- */
  --border-hairline: 1px solid var(--border-color);
  --border-accent: 1px solid var(--accent-orange);
  --border-dashed-line: 1px dashed var(--border-color);

  /* --- Shadows (hard, black — depth not softness) --- */
  --shadow-card: 0 -10px 30px rgba(0,0,0,0.5);   /* stacking cards lift up */
  --shadow-island: 0 10px 30px rgba(0,0,0,0.5);  /* floating nav pill */
  --shadow-glow: 0 0 30px var(--accent-orange-glow); /* featured pricing */
  --text-shadow-hero: 2px 2px 0px var(--accent-orange-glow); /* offset pixel shadow */

  /* --- Blur (glassmorphism on floating surfaces only) --- */
  --blur-island: blur(10px); /* @kind other */
  --blur-hero: blur(5px); /* @kind other */

  /* --- Motion --- */
  --ease-island: cubic-bezier(0.25, 1, 0.5, 1); /* @kind other */ /* nav dock/undock */
  --ease-reveal: ease;   /* @kind other */ /* scroll reveals */
  --dur-fast: 0.2s;      /* @kind other */ /* hover color shifts */
  --dur-reveal: 0.8s;    /* @kind other */ /* fade-in-up entrance */
  --dur-island: 0.4s;    /* @kind other */ /* navbar morph */
  --dur-accordion: 0.4s; /* @kind other */
  --reveal-offset: 40px; /* translateY start for fade-in-up */

  /* ---------------- Semantic aliases ---------------- */
  --shadow-default: var(--shadow-card);
  --transition-hover: color var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast);
}

/* ---------- tokens/base.css ---------- */
/* ============================================================
   BASE / RESET
   Minimal element defaults so specimen cards and kits inherit
   the brand without repeating boilerplate. Selectors only —
   no new tokens here.
   ============================================================ */
* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background-color: var(--bg-dark);
  color: var(--text-light);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  /* Signature vertical grid rules on the page background */
  background-image: linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: var(--grid-gap) 100%;
  background-position: center;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-tight);
}

p { text-wrap: pretty; }

a {
  color: var(--text-light);
  text-decoration: none;
  transition: var(--transition-hover);
}
a:hover { color: var(--accent-orange); }

::selection { background: var(--accent-orange); color: var(--bg-dark); }

/* Blink used on terminal cursors / prompts */
@keyframes blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

/* ---------- light theme (NOT vendored) ---------- */
/* ============================================================
   LIGHT THEME
   The design system ships no light palette (_ds_manifest.json:
   "themes": []), so unlike everything above this block is local
   design work, not a re-vendored file. Keep it in sync by hand
   with the identical block in src/landing/landing.css, which
   scopes the same values under .closer-landing[data-color-scheme='light'].

   Dark is the default and stays on :root untouched — light is an
   opt-in set by site/theme.js (data-color-scheme="light" on <html>);
   removing the attribute returns to the dark defaults above.
   Only role colors are re-declared; every semantic alias
   (--surface-page, --border-hairline, --shadow-glow, …) is a
   var() reference and follows for free.

   Two notes worth keeping:
   • --accent-orange is #BF4900 here, not the brand #FF6600.
     #FF6600 on white is 2.94:1 and fails WCAG AA for body text;
     #BF4900 is 5.04:1, which also keeps the accent about as loud
     as it is in dark mode (#FF6600 on #0d0f12 is 6.54:1). All
     ratios are WCAG 2.x relative-luminance, computed, not eyeballed.
     The brand orange is unchanged in dark mode.
   • --text-light is a misnomer in light mode (it is the near-black
     primary ink). Renaming it would touch 89 token names shared
     with the landing page, so it stays.

   --black is a literal, not a role, and is deliberately absent.
   ============================================================ */
:root[data-color-scheme='light'] {
  /* --- Base ramp (surfaces) --- */
  --bg-void: #ffffff;
  --bg-dark: #ffffff;
  --bg-panel: #f6f7f9;
  --bg-elevated: #eceef1;
  --bg-hi: #e2e5e9;

  /* --- Ink --- */
  --text-light: #14171c;
  --text-muted: #59606b;
  /* Sized against --bg-panel, not white: .meta sits on a card, and that is the
     worst light surface this token lands on. 5.46:1 on white, 5.10:1 on panel,
     4.70:1 on elevated — all clear AA's 4.5:1. A straight inversion of dark's
     #555555 would be 3.14:1, and even a white-only fit (#6f7681) drops to
     4.27:1 once it is on a card.
     It has to clear the body-text bar because --text-faint carries .note —
     article prose, including the quoted PDPC passages — and the card .meta row.
     Still lighter than --text-muted (5.92:1 on panel), so the faint/muted/body
     hierarchy survives. Dark keeps #555555 unchanged; this fixes light only. */
  --text-faint: #636a74;

  /* --- Accent --- */
  --accent-orange: #BF4900;
  --accent-orange-soft: rgba(191,73,0,0.10);
  --accent-orange-glow: rgba(191,73,0,0.22);

  /* --- Lines — 1.48:1 against white, matching dark mode's 1.51:1 --- */
  --border-color: #d0d5db;
  --border-dashed: #c4cad1;

  /* --- Buttons (solid CTA) — inverted: dark chip on a light page --- */
  --btn-bg: #14171c;
  --btn-text: #ffffff;

  /* --- Grid overlay --- */
  --grid-line: rgba(0,0,0,0.05);

  /* --- Shadows --- */
  --shadow-card: 0 -10px 30px rgba(0,0,0,0.10);
  --shadow-island: 0 10px 30px rgba(0,0,0,0.12);
}