/* ============================================================================
   SUPER FEELS COA — DESIGN TOKENS
   ----------------------------------------------------------------------------
   Carried over unchanged from the Super Feels main site and the wholesale
   portal, so all three read as one brand. Nothing here is approximated and
   nothing here is invented. Every colour, font, radius, and spacing step below
   appears in the production site.

   The one addition is the result-status trio at the end: pass, fail and
   pending. Those had no precedent to copy, so they are derived from the
   existing palette rather than imported from somewhere else — see the note
   above them.

   Component CSS builds only from these variables. No hard-coded colour or size
   belongs anywhere else in this project.

   House rules inherited from the main site:
     - No border radius. The only rounded things on the site are the size pills.
     - Nothing sets below 10.5px.
     - Sections butt flush; the background colour does the separating.
     - Labels, buttons, stats and legal copy are mono, uppercase, letterspaced.
   ========================================================================== */

@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/outfit.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('/fonts/jetbrains-mono.woff2') format('woff2');
}

:root {
  /* ── Brand, sampled from the packaging renders ───────────────────────── */
  --o:        #F0701C;   /* primary orange */
  --o-deep:   #CE4F16;   /* small type, hover, eyebrows — never a large fill */
  --o-soft:   #F9A469;   /* on ink backgrounds */
  --o-wash:   #FDEEE2;   /* tint fills */

  --sand:     #E0BB8F;   /* accent band */
  --sand-dk:  #C29A6C;
  --terra:    #D5946A;
  --cream:    #F1E5D3;   /* alternating section background */
  --paper:    #FBF7F0;   /* page background */
  --paper-2:  #F5EFE4;   /* recessed surfaces, image placeholders */

  --ink:      #21252B;   /* near-black; used instead of #000 */
  --ink-2:    #3A4048;   /* body copy on light */
  --ink-3:    #6B7280;   /* meta, labels */
  --ink-4:    #9AA1AB;   /* disabled, placeholder */
  --hair:     #E4DACA;   /* every 1px border on the site */

  --lime:     #8BC53F;   /* success */
  --olive:    #4E7020;

  /* ── Result status ────────────────────────────────────────────────────────
     A lab verdict is the one thing on this site a reader must not have to
     interpret, so pass and fail are the only place a colour carries meaning on
     its own — and therefore the only place that needs a pair the brand did not
     already have.

     Pass reuses the site's existing success olive. Fail is the same deep
     orange as --danger, which is the brand's orange darkened rather than a
     generic red imported from a component library. Pending is deliberately
     neutral: a batch still at the lab is not a warning, it is simply not
     finished, and colouring it amber would read as a problem.

     Colour is never the only signal. Every status also carries its word. */
  --pass:      var(--olive);
  --pass-wash: #EDF3E2;
  --fail:      #A6301A;
  --fail-wash: #F8E4DF;
  --wait:      var(--ink-3);
  --wait-wash: var(--paper-2);

  /* Derived, brand-consistent states. Danger has no precedent on the main site
     — it is the deep orange darkened, so destructive actions stay in palette
     instead of importing a generic red. */
  --danger:      #A6301A;
  --danger-wash: #F8E4DF;
  --ok:          var(--olive);
  --ok-wash:     #EDF3E2;

  /* ── Type ─────────────────────────────────────────────────────────────── */
  --sans: 'Outfit', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --fs-body:   17px;   /* the site's base */
  --fs-sm:     14.5px; /* footer links, secondary copy */
  --fs-xs:     12.5px;
  --fs-label:  10.5px; /* the floor. Nothing sets smaller. */
  --fs-eyebrow: 11px;
  --fs-btn:    12px;

  --lh-tight: 1.08;    /* headings */
  --lh-body:  1.55;

  --ls-eyebrow: .22em;
  --ls-btn:     .16em;
  --ls-label:   .14em;
  --ls-nav:     .18em;
  --ls-head:    -.015em;

  /* ── Spacing scale ────────────────────────────────────────────────────── */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  22px;
  --s-6:  30px;
  --s-7:  40px;
  --s-8:  56px;
  --s-9:  76px;

  --pad: clamp(20px, 5vw, 80px);   /* page gutter */
  --sec: clamp(64px, 8vw, 116px);  /* section padding-block */
  --max: 1340px;                   /* content width */
  --hdr-h: 66px;

  /* ── Lines and corners ────────────────────────────────────────────────── */
  --bd:      1px solid var(--hair);
  --bd-ink:  1px solid var(--ink);
  --bd-o:    1px solid var(--o);
  --radius:  0;    /* the house rule: hard corners */
  --radius-pill: 999px; /* the one exception, matching the site's size pills */

  /* ── Shadow ───────────────────────────────────────────────────────────── */
  --shadow-menu:  0 20px 50px rgba(33, 37, 43, .10);
  --shadow-bar:   0 -6px 24px rgba(33, 37, 43, .12);
  --shadow-focus: 0 0 0 5px rgba(240, 112, 28, .18);

  /* ── Motion ───────────────────────────────────────────────────────────── */
  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-ff: cubic-bezier(0, 0, .3, 1);
  --t-fast: .18s;
  --t-base: .25s;
  --t-slow: .55s;
}