/* =========================================================
   DESIGN TOKENS
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=DM+Serif+Display:ital@0;1&family=Geist+Mono:wght@300;400;500&display=swap');

@font-face {
  font-family: 'PP Gatwick';
  src: url('../assets/fonts/PPGatwick-Ultralight.woff2') format('woff2'),
       url('../assets/fonts/PPGatwick-Ultralight.woff') format('woff');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'PP Gatwick';
  src: url('../assets/fonts/PPGatwick-Regular.woff2') format('woff2'),
       url('../assets/fonts/PPGatwick-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'PP Gatwick';
  src: url('../assets/fonts/PPGatwick-Bold.woff2') format('woff2'),
       url('../assets/fonts/PPGatwick-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'PP Gatwick';
  src: url('../assets/fonts/PPGatwick-Ultrabold.woff2') format('woff2'),
       url('../assets/fonts/PPGatwick-Ultrabold.woff') format('woff');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ── Colors ───────────────────────────────────────────── */
  --color-bg:       #0a0a0a;
  --color-surface:  #141414;
  --color-border:   #222222;
  --color-text:     #f0f0f0;
  --color-text-2:   rgba(240, 240, 240, 0.64);
  --color-muted:    #5a5a5a;
  --color-accent:   #5c5ce0;
  --color-accent-dim: rgba(92, 92, 224, 0.15);

  /* ── Light theme (for data-bg sections) ──────────────── */
  --color-bg-light:     #f2f0ed;
  --color-text-dark:    #1a1a1a;
  --color-text-dark-2:  #666;
  --color-border-light: #ccc;
  --color-danger:       #d93636;

  /* ── Typography ───────────────────────────────────────── */
  --font-display: 'PP Gatwick', sans-serif;
  --font-body:    'Geist', sans-serif;
  --font-serif:   'DM Serif Display', serif;
  --font-mono:    'Geist Mono', monospace;

  /* ── Type scale ───────────────────────────────────────── */
  --text-xs:   clamp(0.625rem,  1vw,   0.75rem);
  --text-sm:   clamp(0.75rem,   1.2vw, 0.875rem);
  --text-base: clamp(0.6875rem, 1vw, 0.75rem);
  --text-md:   clamp(1rem,      1.8vw, 1.25rem);
  --text-lg:   clamp(1.25rem,   2.5vw, 1.75rem);
  --text-xl:   clamp(1.75rem,   4vw,   3rem);
  --text-2xl:  clamp(2.5rem,    6vw,   5rem);
  --text-3xl:  clamp(3.5rem,    9vw,   8rem);

  /* Case-study overview lead text (sans, prominent) */
  --text-case-lead: clamp(1.375rem, 1.8vw, 1.625rem);

  /* Case-study section rhythm — vertical padding between case rows.
     One knob to control breathing room across the whole case. */
  --space-case-section: clamp(5rem, 9vw, 10rem);

  /* ── Motion ───────────────────────────────────────────── */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-snap:  cubic-bezier(0.22, 0.31, 0, 1);
  --dur-fast:   0.2s;
  --dur-base:   0.4s;
  --dur-slow:   0.7s;
  --dur-slower: 1.1s;

  /* ── Spacing ──────────────────────────────────────────── */
  --space-xs:  0.25rem;
  --space-sm:  0.5rem;
  --space-md:  1rem;
  --space-lg:  2rem;
  --space-xl:  4rem;
  --space-2xl: 8rem;
  --space-3xl: 12rem;

  /* ── Layout ───────────────────────────────────────────── */
  --max-width:     1360px;
  --content-width: 860px;
  --container-pad: clamp(1.5rem, 4vw, 5rem);

  /* ── Nav ──────────────────────────────────────────────── */
  --nav-height: 5.5rem;

  /* ── Radius ───────────────────────────────────────────── */
  --radius-panel:     48px;
  --radius-panel-mob: 24px;
  --radius-sm: 4px;
  --radius-md: 8px;
}