/* ═══════════════════════════════════════════════════════════════
   Findining Design Tokens
   ═══════════════════════════════════════════════════════════════ */

/* ── Fonts ── */
@font-face {
  font-family: 'LINE Seed TW';
  src: url('../fonts/LINESeedTW_OTF_Rg.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'LINE Seed TW';
  src: url('../fonts/LINESeedTW_OTF_Bd.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Funnel Display';
  src: url('../fonts/FunnelDisplay_ExtraBold.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* ── Design Tokens ── */
:root {
  /* Colors - Cocoa */
  --cocoa-0:    #ffffff;
  --cocoa-20:   #f9f8f4;
  --cocoa-40:   #dfe0dc;
  --cocoa-60:   #bcbdb9;
  --cocoa-80:   #60615d;
  --cocoa-100:  #191915;

  /* Colors - Wasabi */
  --wasabi-80:  #71ebad;
  --wasabi-120: #00b259;

  /* Colors - Zest */
  --zest-20:    #fefffa;
  --zest-40:    #fcffeb;
  --zest-60:    #f7ffcc;
  --zest-80:    #f0ff99;

  /* Colors - Carrot */
  --carrot-20:  #fff0e5;

  /* Colors - Soda */
  --soda-40:    #c0d8fc;
  --soda-100:   #0066ff;

  /* Sizes */
  --border-radius: 8px;
}