/* ============================================================================
   SUPER FEELS WHOLESALE — DESIGN TOKENS
   ----------------------------------------------------------------------------
   Extracted verbatim from the main site's `assets/css/site.css` (01-site-501-club).
   Nothing here is approximated and nothing here is invented. Every colour, font,
   radius, and spacing step below appears in the production site.

   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;

  /* 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;
}