/* ============================================================
   Brutal Blends — design tokens
   Source of truth: DESIGN.md
   ============================================================ */

:root {
  /* Color */
  --ink:           #0d0c0a;  /* near-black, warm — primary bg */
  --ink-elevated:  #161410;  /* card / section bg */
  --bone:          #f4ece0;  /* warm off-white — primary fg */
  --bone-muted:    #a8a094;  /* secondary text */
  --rule:          #2a2620;  /* hairline borders */

  /* Per-flavor accents — rule: accent = flavor signature, not chassis */
  --oxblood:       #6b1620;  /* global CTA + Hibiscus Mint accent */
  --rose-ash:      #8a6b6b;  /* Rose Black accent */
  --sage:          #7a8a6f;  /* Tangerine Green accent */

  /* Local accent — overridable per scope (cards, sections) */
  --accent:        var(--oxblood);

  /* Type families */
  --font-display:  'Newsreader', Georgia, 'Times New Roman', serif;
  --font-body:     'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono:     'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Type scale */
  --text-xs:   0.75rem;     /* 12px */
  --text-sm:   0.875rem;    /* 14px */
  --text-base: 1rem;        /* 16px */
  --text-lg:   1.125rem;    /* 18px */
  --text-xl:   1.5rem;      /* 24px */
  --text-2xl:  2rem;        /* 32px */
  --text-3xl:  3rem;        /* 48px */
  --text-4xl:  clamp(3rem, 8vw, 6.5rem); /* hero display */

  /* Spacing scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2.5rem;
  --space-6: 4rem;
  --space-7: 6.5rem;

  /* Layout */
  --max-width: 1400px;
  --gutter:    1.5rem;

  /* Misc */
  --radius:     2px;
  --rule-width: 1px;
  --transition: 180ms ease-out;
}

@media (min-width: 1024px) {
  :root {
    --gutter: 2rem;
  }
}