/* ───────────────────────────────────────────────────────────────────────────
   base.css — shared design tokens + base reset for arwrench.com self-hosted
   pages (privacy.html, and any future legal/static page that opts into the
   token system). Dark theme, brand orange. RESTORED 2026-06-12 (ARW-675).

   Why this file exists again: privacy.html links `css/base.css`, but the file
   was missing from the repo. Because vercel.json rewrites unmatched paths to
   /index.html, the browser received the SPA HTML in place of the stylesheet,
   so every `var(--…)` token resolved to nothing and the page rendered BLANK.
   Vercel serves real static files before applying rewrites, so simply shipping
   this file makes /css/base.css resolve correctly — no rewrite change needed.

   Palette matches delete-account.html's :root (the working sibling legal page):
   orange #FF782A, dark #0A0A0B. Fonts match privacy.html's Google Fonts link
   (DM Serif Display for display, Plus Jakarta Sans for body).
   ─────────────────────────────────────────────────────────────────────────── */

:root {
  /* Brand accent */
  --color-accent: #FF782A;
  --color-accent-light: #FF9556;

  /* Surfaces (dark) */
  --color-bg: #0A0A0B;
  --color-bg-secondary: #111114;
  --color-border: rgba(255, 255, 255, 0.08);

  /* Text on dark */
  --color-text: rgba(255, 255, 255, 0.92);
  --color-text-secondary: rgba(255, 255, 255, 0.72);
  --color-text-muted: rgba(255, 255, 255, 0.55);

  /* Typography */
  --font-display: 'DM Serif Display', Georgia, 'Times New Roman', serif;
  --font-body: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* Type scale */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-xl: 1.25rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;
  --text-5xl: 3rem;

  --leading-normal: 1.5;
  --leading-relaxed: 1.7;
  --tracking-wide: 0.05em;

  /* Spacing (4px base) */
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;

  /* Layout */
  --container-max: 48rem;
  --container-pad: 1.25rem;

  /* Motion */
  --duration-fast: 150ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* Elevation */
  --z-sticky: 50;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: var(--color-accent);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}
a:hover { color: var(--color-accent-light); text-decoration: underline; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  line-height: 1.2;
}