/* OOO.Tea — design tokens + fonts (source: /design-tokens.md).
   Source of truth: the 405px mobile design frames; values documented
   in /design-tokens.md — update both together. Components arrive in Phase 1.
   Conventions: plain semantic classes, light BEM only where structure demands;
   rem units (px only for borders); 2-space indent per plainkit .editorconfig. */

/* ---------- Fonts ---------- */

/* optional (not swap), paired with the preload in head.php: avoids a
   mid-page font swap, which would visibly jump any running-text layout
   (e.g. the marquee). web.dev/articles/preload-optional-fonts */
@font-face {
  font-family: "Inter";
  src: url("../fonts/InterVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: optional;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/InterVariable-Italic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: optional;
}

/* ---------- Tokens ---------- */

:root {
  /* color — core */
  --color-ink: #000000;
  --color-paper: #ffffff;
  --color-grey: #d9d9d9;

  /* color — recurring accents (one-off confetti colors stay literal in component css) */
  --accent-red: #ff0003;
  /* The accent, darkened ~2% for red text below ~24px: #ff0003 on white is
     4.00:1, which clears WCAG's 3:1 for large text but misses the 4.5:1 body
     minimum. This is 4.56:1 and reads as the same red beside it. */
  --accent-red-small: #ed0003;
  --accent-mint: #8fffab;
  --accent-yellow: #fff200;
  --accent-green: #3fff0a;

  /* type — mobile scale (405 base) */
  --text-display: 3rem;      /* 48px — hero */
  --text-menu: 2.25rem;      /* 36px — menu overlay */
  --text-heading: 2rem;      /* 32px — section headings, footer nav */
  --text-subheading: 1.75rem; /* 28px — desktop speech bubbles */
  --text-title: 1.5rem;      /* 24px — header titles, product names */
  --text-body: 1.25rem;      /* 20px — body copy (Light) */
  --text-ui: 1rem;           /* 16px — forms, buttons (Semi Bold) */
  --text-small: 0.875rem;    /* 14px */
  --text-caption: 0.8125rem; /* 13px */
  --text-micro: 0.6875rem;   /* 11px — floor; the design's 6-8px maps here */

  /* weight — Inter variable */
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;
  --weight-black: 900;

  /* uppercase system: pair with letter-spacing */
  --tracking-caps: 0.04em;

  /* borders — the design uses ink borders instead of shadows */
  --border-thin: 1px solid var(--color-ink);
  --border-thick: 2px solid var(--color-ink);

  /* radii */
  --radius-m: 26px;
  --radius-l: 32px;
  --radius-card: 33px;
  --radius-pill: 999px;

  /* space — 8-based working scale, refine per template */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4rem;

  --gutter: 5%;
}

/* desktop: ~94vw content width (3% gutter each side) instead of mobile's 90vw */
@media (min-width: 72rem) {
  :root {
    --gutter: 3%;
    /* The same inset, viewport-relative. --gutter is a percentage, so it
       only equals the page column on a full-width element; nested inside a
       narrower one (the home split's 1/3 and 2/3 columns) it resolves
       against that instead and the content stops lining up with the
       header's logo and cart. Use this wherever content sits in a column
       but must still meet the page edge. */
    --page-inset: 3vw;
  }
}