/* ============================================================
   TugaKits — Design Tokens (Editorial Swiss / Stitch v1)
   Source: docs/stitch-export/design-system.md + docs/website-redesign-prd.md
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Inter+Tight:wght@600;700;800;900&display=swap');

:root {
  /* ── Surface / ground ── */
  --bg-page:        #F2EBE3;
  --bg-surface:     #fff8f3;
  --bg-surface-alt: #faf2ea;
  --bg-surface-hi:  #efe7df;
  --bg-inverse:     #0A0A0A;

  /* ── Ink ── */
  --ink:            #1e1b17;
  --ink-strong:     #0A0A0A;
  --ink-muted:      #6B6660;
  --ink-variant:    #5e3f3b;
  --ink-inverse:    #F7EFE8;

  /* ── Accent ── */
  --accent-red:      #E50914;
  --accent-red-dim:  #b8000b;
  --accent-red-text: #b8000b; /* AA-safe on beige (~5.8:1); use for small/normal text */
  --accent-red-ink:  #fff7f6;

  /* ── Hairlines ── */
  --rule:           #1A1A1A;
  --rule-soft:      rgba(10,10,10,0.12);
  --rule-w:         1px;

  /* ── Type ── */
  --font-display:   'Inter Tight', 'Inter Display', Inter, system-ui, sans-serif;
  --font-body:      'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:      ui-monospace, Menlo, 'SF Mono', monospace;

  --step--2: 11px;   /* eyebrow tiny */
  --step--1: 13px;   /* mono label */
  --step-0:  15px;   /* body base */
  --step-1:  18px;   /* body md */
  --step-2:  24px;   /* body lg */
  --step-3:  32px;   /* headline-sm */
  --step-4:  48px;   /* display-md */
  --step-5:  72px;   /* display-lg */
  --step-6:  clamp(96px, 12vw, 200px); /* display-hero */

  /* ── Spacing ── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 40px;
  --space-6: 64px;
  --space-7: 96px;
  --space-8: 160px;

  --margin-page: 48px;

  /* ── Radius (always 0 — Swiss convention) ── */
  --radius-0: 0;

  /* ── Motion ── */
  --motion-fast: 120ms;
  --motion-base: 200ms;
  --easing:      cubic-bezier(0.4, 0, 0.2, 1);
}

@media (max-width: 768px) {
  :root { --margin-page: 20px; }
}