/* ================================
   SIGGI — DESIGN TOKENS
================================ */

:root {
  /* FONTS */
  --font-display: 'Inter Tight', 'Helvetica Neue', sans-serif;
  --font-body:    'Inter Tight', 'Helvetica Neue', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* TYPE SCALE */
  --text-xs:    11px;
  --text-sm:    13px;
  --text-base:  16px;
  --text-lg:    18px;
  --text-xl:    28px;
  --text-2xl:   44px;
  --text-3xl:   84px;
  --text-4xl:   136px;

  /* COLORS — paper / ink */
  --color-bg:     #fafaf8;
  --color-bg-2:   #f2f2ee;
  --color-ink:    #111110;
  --color-mute:   #6b6b6b;
  --color-quiet:  #a8a8a4;
  --color-line:   rgba(17, 17, 16, 0.08);
  --color-grid:   rgba(17, 17, 16, 0.045);
  --color-accent: #dd2f20;

  /* Backward-compat aliases (used by case-study.css, components.css) */
  --color-text-1:    var(--color-ink);
  --color-text-2:    var(--color-mute);
  --color-text-3:    var(--color-quiet);
  --color-border:    var(--color-line);
  --color-btn-hover: var(--color-bg-2);

  /* SPACING */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  32px;
  --space-xl:  64px;
  --space-2xl: 128px;
  --space-3xl: 192px;

  /* RADIUS */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 999px;

  /* LAYOUT */
  --gutter:            clamp(20px, 4vw, 56px);
  --max-width:         1280px;
  --max-width-content: 800px;

  /* CARD (homepage) — fluid height */
  --card-height: clamp(340px, 52vw, 620px);
  --card-bg:     var(--color-accent);

  /* MOTION */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

/* ── Dark mode ── */
body.dark {
  --color-bg:     #0e0e0d;
  --color-bg-2:   #181816;
  --color-ink:    #f3f1ec;
  --color-mute:   #8a8985;
  --color-quiet:  #4a4a47;
  --color-line:   rgba(243, 241, 236, 0.10);
  --color-grid:   rgba(243, 241, 236, 0.05);
  --color-btn-hover: #222220;
}