/* anyconcept design tokens
   single source of truth for colors, type, tracking, spacing, borders.
   no decisions are made here — every value is defined in the brand guidelines. */

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&family=IBM+Plex+Mono:wght@400&display=swap');

:root {
  /* ---------- color: dark palette (primary) ---------- */
  --bg-page: #080808;
  --bg-surface: #111318;
  --bg-elevated: #191B22;
  --bg-card: #22242D;

  --text-primary: #FFFFFF;
  --text-secondary: #B0B4C1;
  --text-tertiary: #6B7080;

  --red: #FA5746;
  --red-dark: #C73D2E;
  --red-tint: #3D1410;

  --border: rgba(255, 255, 255, 0.08);
  --border-hover: rgba(255, 255, 255, 0.18);

  /* notation color: // section labels on dark */
  --notation: rgba(255, 255, 255, 0.4);

  /* ---------- color: light palette (co-branded / print only) ---------- */
  --bg-page-light: #F2F0EB;
  --bg-surface-light: #ECEAE4;
  --bg-elevated-light: #E6E4DE;

  --text-primary-light: #0D0D0D;
  --text-secondary-light: #5A5A58;
  --text-tertiary-light: #9A9994;

  --border-light: rgba(0, 0, 0, 0.08);
  --notation-light: #9A9994;

  /* ---------- typography: families ---------- */
  --font-family-sans: 'Inter', sans-serif;
  --font-family-mono: 'IBM Plex Mono', monospace;

  /* ---------- typography: shorthand (weight size/leading family) ----------
     letter-spacing is not part of the font shorthand — see tracking tokens below. */
  --font-display: 300 clamp(36px, 3.6vw, 64px)/1.08 'Inter', sans-serif;
  --font-h1: 600 clamp(22px, 1.9vw, 34px)/1.2 'Inter', sans-serif;
  --font-h2: 500 clamp(17px, 1.35vw, 24px)/1.3 'Inter', sans-serif;
  --font-h3: 500 clamp(14px, 1vw, 18px)/1.4 'Inter', sans-serif;
  --font-body: 400 clamp(14px, 1vw, 17px)/1.75 'Inter', sans-serif;
  --font-body-small: 400 clamp(12px, 0.88vw, 15px)/1.65 'Inter', sans-serif;
  --font-label: 500 clamp(10px, 0.74vw, 13px)/1 'Inter', sans-serif;
  --font-mono: 400 clamp(10px, 0.75vw, 13px)/1 'IBM Plex Mono', monospace;
  --font-size-mono: clamp(10px, 0.75vw, 13px);

  /* ---------- typography: tracking (letter-spacing) ---------- */
  --tracking-display: -0.03em;
  --tracking-h1: -0.02em;
  --tracking-h2: -0.01em;
  --tracking-h3: 0;
  --tracking-body: 0;
  --tracking-label: 0.1em;
  --tracking-mono: 0.1em;
  --tracking-button: 0.02em;

  /* ---------- borders ---------- */
  --border-width: 0.5px;

  /* ---------- spacing ----------
     derived from values referenced in the build brief (hero padding 120/100,
     section-label margin 40, lockup gap 12, button padding 10/22, etc.). */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 40px;
  --space-7: 60px;
  --space-8: 80px;
  --space-9: 100px;
  --space-10: 120px;

  /* ---------- radii ----------
     buttons use 5px per the build brief; everything else stays sharp. */
  --radius-button: 5px;
}