/*
 * tokens.css — boar'ed design tokens
 * Source of truth: DESIGN.md §2–§5
 * DO NOT define component-level styles here.
 */

/* ─── @font-face ───────────────────────────────────────────────────────────── */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("/src/fonts/poppins-300.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/src/fonts/poppins-400.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/src/fonts/poppins-500.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/src/fonts/poppins-600.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/src/fonts/poppins-700.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/src/fonts/poppins-800.woff2") format("woff2");
}

/* ─── Raw brand colors — DESIGN.md §2.1 ────────────────────────────────────── */
:root {
  --coral-500: #FF6B5B;
  --coral-600: #E85546;
  --coral-700: #C73D30;
  --coral-100: #FFE3DE;

  --yellow-500: #FFC847;
  --yellow-600: #F0B42E;
  --yellow-100: #FFF3D6;

  --teal-500: #2EC4B6;
  --teal-600: #25A89B;
  --teal-900: #0E463F;
  --teal-100: #D6F5F1;

  --navy-900: #1B2A41;
  --navy-600: #34435C;
  --navy-400: #5A6678;

  --cream-50: #FFF8F0;
  --white:    #FFFFFF;
  --line:     #EDE3D7;
}

/* ─── Semantic tokens — DESIGN.md §2.2 ─────────────────────────────────────── */
:root {
  /* surfaces */
  --bg:           var(--cream-50);
  --surface:      var(--white);
  --surface-alt:  #FFFCF7;
  --border:       var(--line);

  /* text */
  --text:         var(--navy-900);
  --text-muted:   var(--navy-400);
  --text-inverse: var(--cream-50);   /* text on navy */

  /* brand actions */
  --brand:        var(--coral-500);
  --brand-hover:  var(--coral-600);
  --brand-press:  var(--coral-700);
  --accent:       var(--yellow-500);
  --support:      var(--teal-500);

  /* on-color text — DESIGN.md §2.3 (NEVER white on coral/teal/yellow) */
  --on-coral:     var(--navy-900);
  --on-yellow:    var(--navy-900);
  --on-teal:      var(--teal-900);
  --on-navy:      var(--cream-50);

  /* focus */
  --focus-ring:   var(--yellow-500);
}

/* ─── Typography — DESIGN.md §3 ─────────────────────────────────────────────── */
:root {
  --font-display: "Poppins", system-ui, sans-serif;
  --font-body:    "Poppins", system-ui, sans-serif;

  /* Type scale — fluid via clamp(), scales smoothly from mobile to desktop */
  --fs-display: clamp(2.5rem, 8vw, 5rem);
  --fs-h1:      clamp(2rem, 5vw, 3.25rem);
  --fs-h2:      clamp(1.5rem, 3.5vw, 2.25rem);
  --fs-h3:      clamp(1.25rem, 2.5vw, 1.5rem);
  --fs-lead:    clamp(1.05rem, 2vw, 1.35rem);
  --fs-body:    1rem;      /* 16px */
  --fs-label:   0.8125rem;
  --fs-chip:    0.75rem;
}

/* ─── Spacing — DESIGN.md §4.1 ─────────────────────────────────────────────── */
:root {
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-8:  48px;
  --space-10: 64px;
  --space-12: 96px;
  --space-16: 128px;

  --section-y: clamp(4rem, 10vw, 8rem);
}

/* ─── Radii — DESIGN.md §4.2 ───────────────────────────────────────────────── */
:root {
  --r-chip:  12px;
  --r-card:  24px;
  --r-input: 16px;
  --r-pill:  999px;
  --r-photo: 18px;
}

/* ─── Elevation — DESIGN.md §4.3 ───────────────────────────────────────────── */
:root {
  --shadow-sm:   0 2px 8px rgba(27,42,65,.06);
  --shadow-md:   0 10px 30px rgba(27,42,65,.10);
  --shadow-lift: 0 18px 50px rgba(255,107,91,.18);
}

/* ─── Layout — DESIGN.md §4.4 ──────────────────────────────────────────────── */
:root {
  --container: 1120px;
  --gutter:    clamp(20px, 5vw, 64px);
  --col-gap:   24px;

  /* z-index layers */
  --z-base:      0;
  --z-sticky:    100;
  --z-hamburger: 1000;
  --z-toast:     1100;
}

/* ─── Motion — DESIGN.md §5 ─────────────────────────────────────────────────── */
:root {
  --ease-out: cubic-bezier(.2,.8,.2,1);
  --dur-fast: 120ms;
  --dur:      240ms;
  --dur-slow: 480ms;
}