/* ==========================================================================
   Design Tokens — extracted from Figma
   ========================================================================== */

/* ---- @font-face ---- */

@font-face {
  font-family: 'WF Aprello';
  src: url('../assets/fonts/WF Aprello-Essentials/WFAprello-Regular.woff2') format('woff2'),
       url('../assets/fonts/WF Aprello-Essentials/WFAprello-Regular.woff') format('woff'),
       url('../assets/fonts/WF Aprello-Essentials/WFAprello-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'WF Aprello';
  src: url('../assets/fonts/WF Aprello-Essentials/WFAprello-RegularItalic.woff2') format('woff2'),
       url('../assets/fonts/WF Aprello-Essentials/WFAprello-RegularItalic.woff') format('woff'),
       url('../assets/fonts/WF Aprello-Essentials/WFAprello-RegularItalic.otf') format('opentype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'WF Aprello';
  src: url('../assets/fonts/WF Aprello-Essentials/WFAprello-Bold.woff2') format('woff2'),
       url('../assets/fonts/WF Aprello-Essentials/WFAprello-Bold.woff') format('woff'),
       url('../assets/fonts/WF Aprello-Essentials/WFAprello-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'WF Aprello';
  src: url('../assets/fonts/WF Aprello-Essentials/WFAprello-BoldItalic.woff2') format('woff2'),
       url('../assets/fonts/WF Aprello-Essentials/WFAprello-BoldItalic.woff') format('woff'),
       url('../assets/fonts/WF Aprello-Essentials/WFAprello-BoldItalic.otf') format('opentype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ---- Colors ---- */

  /* Blue */
  --blue-100: #F1F9FF;
  --blue-200: #C8E5FF;
  --blue-400: #80C3FE;
  --blue-600: #4FA4FF;

  /* Green */
  --green-200: #CFFFCB;
  --green-800: #00D2B3;
  --green-1200: #004133;

  /* Yellow */
  --yellow-200: #FFE8CC;
  --yellow-600: #FF981B;

  /* Pink */
  --pink-200: #FFDBE7;

  /* Base */
  --base-100: #FFFFFF;
  --base-200: #F9F9F9;
  --base-1200: #1A1A1A;

  /* ---- Typography ---- */

  --font-primary: 'WF Aprello', sans-serif;
  --font-inter: 'Inter', sans-serif;
  --font-sora: 'Sora', sans-serif;

  /* Font weights */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* ---- Spacing ---- */
  --layer-gap: 10px;          /* gap between Layer 1 ↔ Layer 2, and Layer 2 ↔ nav */
  --page-padding-x: 120px;    /* horizontal padding for content sections */
  --section-gap: 80px;

  /* ---- Border Radius ---- */
  --radius-outer: 10px;
  --radius-card: 3px;
  --radius-small: 2px;
}