/* =========================================================
   TOKENS : Design primitives (Pass 4b)
   ========================================================= */

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

:root {
  /* Palette */
  --bg:        #FFFFFF;
  --surface:   #FAFAF8;
  --surface-2: #F4F3EF;
  --border:    #E8E6E0;
  --ink:       #0E0E0C;
  --mist:      #6B6B68;
  --signal:    #FF5A1F;
  --ember:     #C44016;
  --moss:      #2D3B2A;
  --stone:     #121210;

  /* Typography families */
  --font-serif: 'Fraunces', Georgia, serif;
  --font-sans:  'Inter', Helvetica, Arial, sans-serif;
  --font-mono:  'JetBrains Mono', 'Courier New', monospace;

  /* Type scale */
  --fs-hero:    clamp(2.25rem, 4.5vw, 3.75rem);
  --fs-h1:      clamp(1.75rem, 3vw, 2.5rem);
  --fs-h2:      clamp(1.375rem, 2.2vw, 1.75rem);
  --fs-h3:      1.125rem;
  --fs-body-l:  1.0625rem;
  --fs-body:    0.9375rem;
  --fs-small:   0.8125rem;
  --fs-micro:   0.6875rem;

  /* Leading */
  --lh-hero:  1.02;
  --lh-h:     1.2;
  --lh-body:  1.55;
  --lh-micro: 1.4;

  /* Spacing */
  --gutter:      24px;
  --gutter-m:    16px;
  --container:   1280px;
  --site-max:    1280px;
  --tile-gap:    12px;
  --tile-radius: 24px;
  --tile-pad:    32px;
  --space-xs:  0.5rem;
  --space-sm:  1rem;
  --space-md:  2rem;
  --space-lg:  4rem;
  --space-xl:  8rem;

  /* Transitions */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 200ms;
  --dur-mid:  280ms;
  --dur-slow: 600ms;

  /* Z layers */
  --z-topbar: 110;
  --z-header: 100;
  --z-overlay: 200;
  --z-cursor:  9999;

  /* Grain */
  --grain-opacity: 0.05;
}

@media (max-width: 768px) {
  :root {
    --gutter: var(--gutter-m);
    --tile-pad: 24px;
  }
}