/* ═══════════════════════════════════════════════════════════════
   AURAVOX · Brand System v2
   Methodology: Three-Tier Token Architecture

   ╔══════════════════════════════════════════════════════════╗
   ║  TIER 1 — BRAND                                         ║
   ║  Raw values. No role, no UI assignment.                  ║
   ║  · Color scales  · Font families  · Number scale        ║
   ╠══════════════════════════════════════════════════════════╣
   ║  TIER 2 — ALIAS                                         ║
   ║  Brand values assigned to roles.                        ║
   ║  primary · neutral · info · error · success · warning   ║
   ║  Border widths and radii reference the number scale.    ║
   ╠══════════════════════════════════════════════════════════╣
   ║  TIER 3 — MAPS  (what CSS classes consume)              ║
   ║  --surface-*  --text-*  --border-*  --icon-*            ║
   ║  Rule: components reference ONLY Tier 3 tokens.         ║
   ╚══════════════════════════════════════════════════════════╝

   Dark-mode rule: brand colours (maroon, beige) are FIXED —
   they do not invert. Neutrals invert. Status colours adjust.
   ═══════════════════════════════════════════════════════════════ */


/* ─── FONT FACES ────────────────────────────────────────────── */
@font-face {
  font-family: 'Coconat';
  src: url('../coconat_font/Coconat-Regular.woff2') format('woff2'),
       url('../coconat_font/Coconat-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Coconat';
  src: url('../coconat_font/Coconat-Demi.woff2') format('woff2'),
       url('../coconat_font/Coconat-Demi.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Coconat';
  src: url('../coconat_font/Coconat-Bold.woff2') format('woff2'),
       url('../coconat_font/Coconat-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}


/* ════════════════════════════════════════════════════════════════
   TIER 1 · BRAND — Raw values in purest form
   ════════════════════════════════════════════════════════════════ */
:root {

  /* ────────────────────────────────────────────────────────────
     1A · COLOR SCALES
     Generated via opacity-on-white (lighter tints) and
     opacity-on-black (darker shades), then colour-matched to
     opaque hex — no opacity values in the final scale.
     Higher number = darker. Brand anchor sits at 500.
     50 / 150 / 250 used when a step breaks the opacity interval.
     ────────────────────────────────────────────────────────────  */

  /* Maroon — primary brand colour */
  --maroon-50:  #faf0f2;
  --maroon-100: #f0d9de;
  --maroon-200: #daadb7;
  --maroon-300: #c07d8e;
  --maroon-400: #8a4358;
  --maroon-500: #401F28;   /* ★ brand anchor */
  --maroon-600: #311520;   /* darker — generated on-black */
  --maroon-700: #200e16;
  --maroon-800: #12080d;

  /* Beige — secondary brand colour */
  --beige-50:   #fdfcfb;
  --beige-100:  #faf8f6;
  --beige-200:  #f2ede8;
  --beige-300:  #ece6df;
  --beige-400:  #e4dcd3;
  --beige-500:  #E9E2DA;   /* ★ brand anchor */
  --beige-600:  #d0c8bf;
  --beige-700:  #b8b0a7;
  --beige-800:  #9e968e;
  --beige-900:  #7a6e68;

  /* Steel Blue — info / interactive accent */
  --blue-50:    #f0f4f7;
  --blue-100:   #dde8f0;
  --blue-200:   #C0CDD8;   /* ★ brand light blue (from brand-core) */
  --blue-300:   #97B3C4;
  --blue-400:   #6B96AE;
  --blue-500:   #3D6E8C;   /* ★ interactive anchor — WCAG AA on white */
  --blue-600:   #2f5a75;
  --blue-700:   #24475d;
  --blue-800:   #193446;

  /* ────────────────────────────────────────────────────────────
     1B · FONT FAMILIES   (string values only — no role yet)
     ────────────────────────────────────────────────────────────  */
  --font-coconat: 'Coconat', 'Georgia', serif;

  /* ────────────────────────────────────────────────────────────
     1C · NUMBER SCALE   (4px base unit)
     Everything numeric — spacing, radius, border width —
     derives from this one scale.

     Naming: every clean 4px multiple = a 100-step value.
       scale-25  = 1px   (quarter step, for border widths)
       scale-50  = 2px   (half step, for focus rings)
       scale-100 = 4px   (first full step)
       …
     When the scale gets large, jump in larger increments
     (900→40, 1000→48, 1100→64) rather than listing 64 steps.
     ────────────────────────────────────────────────────────────  */
  --scale-25:   1px;
  --scale-50:   2px;
  --scale-100:  4px;
  --scale-150:  6px;
  --scale-200:  8px;
  --scale-250:  10px;
  --scale-300:  12px;
  --scale-400:  16px;
  --scale-500:  20px;
  --scale-600:  24px;
  --scale-700:  28px;
  --scale-800:  32px;
  --scale-900:  40px;   /* jump: 32 → 40 */
  --scale-1000: 48px;
  --scale-1100: 64px;
  --scale-1200: 80px;
  --scale-1300: 96px;
  --scale-1400: 128px;


  /* ════════════════════════════════════════════════════════════
     TIER 2 · ALIAS — Brand values assigned to roles
     Role mapping (Auravox):
       primary   → maroon scale
       neutral   → beige/warm-gray scale
       info      → blue scale
       error     → #c03030  (distinct from primary maroon)
       success   → #2e7a4a
       warning   → #9e5a10
     ════════════════════════════════════════════════════════════ */

  /* ─── Border Widths — from number scale ─── */
  --border-w-none:   0px;
  --border-w-small:  var(--scale-25);   /* 1px — default borders */
  --border-w-medium: var(--scale-50);   /* 2px — focus rings      */
  --border-w-large:  var(--scale-100);  /* 4px — heavy emphasis   */

  /* ─── Border Radii — from number scale ─── */
  --radius-none:  0px;
  --radius-sm:    var(--scale-50);    /* 2px */
  --radius-base:  var(--scale-150);   /* 6px  — buttons, inputs  */
  --radius-md:    var(--scale-200);   /* 8px  — cards, modals    */
  --radius-lg:    var(--scale-300);   /* 12px */
  --radius-xl:    var(--scale-400);   /* 16px */
  --radius-round: 9999px;

  /* Component aliases (alias → radius) */
  --radius-btn:    var(--radius-base);
  --radius-input:  var(--radius-base);
  --radius-card:   var(--radius-md);
  --radius-badge:  var(--radius-sm);
  --radius-chip:   var(--radius-round);


  /* ════════════════════════════════════════════════════════════
     TIER 3 · MAPS — Component-ready tokens
     Components consume ONLY these. Never reference Tier 1/2
     primitives directly in component CSS.

     Four groups: --surface-*  --text-*  --border-*  --icon-*

     FIXED tokens (marked ✦) do not change in dark mode.
     ════════════════════════════════════════════════════════════ */

  /* Status primitives — referenced only within maps below */
  --_success: #2e7a4a;
  --_warning: #9e5a10;
  --_error:   #c03030;
  --_info:    var(--blue-500);   /* #3D6E8C */

  /* ─── MAPS · Surface ─── */
  --surface-page:              var(--beige-100);   /* page background          */
  --surface-default:           #ffffff;             /* cards, inputs, modals    */
  --surface-raised:            var(--beige-200);   /* slightly elevated         */
  --surface-elevated:          var(--beige-300);   /* more elevated             */
  --surface-action:            var(--maroon-500);  /* ✦ primary button fill     */
  --surface-action-hover:      #5a2c38;            /* ✦ lighter — dark btn hover*/
  --surface-action-subtle:     var(--maroon-50);   /* ✦ tint for badges/tags    */
  --surface-info:              var(--blue-100);    /* light — alerts, info bg   */
  --surface-info-solid:        var(--blue-500);    /* ✦ solid — accent buttons  */
  --surface-info-solid-hover:  var(--blue-600);    /* ✦ accent button hover     */
  --surface-success:           rgba(46, 122, 74,   0.10);
  --surface-warning:           rgba(158, 90, 16,   0.10);
  --surface-error:             rgba(192, 48, 48,   0.10);
  --surface-disabled:          var(--beige-300);

  /* ─── MAPS · Text ─── */
  --text-heading:       #1a1512;              /* near-black, warm          */
  --text-body:          #1a1512;
  --text-muted:         var(--beige-900);     /* #7a6e68 secondary labels  */
  --text-subtle:        var(--beige-800);     /* #9e968e tertiary / hints  */
  --text-action:        var(--maroon-500);    /* links, active states      */
  --text-action-hover:  var(--maroon-400);    /* lighter hover on dark text*/
  --text-disabled:      var(--beige-700);     /* #b8b0a7                   */
  --text-on-action:     var(--beige-500);     /* ✦ text ON maroon bg       */
  --text-on-accent:     #ffffff;              /* ✦ text ON blue bg         */
  --text-success:       var(--_success);
  --text-warning:       var(--_warning);
  --text-error:         var(--_error);
  --text-info:          var(--_info);

  /* ─── MAPS · Border ─── */
  --border-default:       #ddd6ce;
  --border-strong:        #c9bfb6;
  --border-action:        var(--maroon-500);  /* ✦ primary button border   */
  --border-action-hover:  #5a2c38;            /* ✦ matches surface hover   */
  --border-focus:         var(--blue-500);    /* focus rings               */
  --border-disabled:      var(--beige-400);
  --border-success:       rgba(46, 122, 74,   0.40);
  --border-warning:       rgba(158, 90, 16,   0.40);
  --border-error:         rgba(192, 48, 48,   0.40);
  --border-info:          var(--blue-300);

  /* ─── MAPS · Icon ─── */
  --icon-default:       var(--beige-900);    /* #7a6e68 neutral icon      */
  --icon-action:        var(--maroon-500);
  --icon-action-hover:  #5a2c38;
  --icon-on-action:     var(--beige-500);    /* ✦ on maroon bg            */
  --icon-on-accent:     #ffffff;             /* ✦ on blue bg              */
  --icon-disabled:      var(--beige-700);
  --icon-success:       var(--_success);
  --icon-warning:       var(--_warning);
  --icon-error:         var(--_error);
  --icon-info:          var(--_info);

  /* ─── MAPS · Badge hallmark (over-image) ─── ✦ all FIXED, theme-independent
     The 925 stamp and the "New" flag sit over photography, so their colours are
     fixed opaque values — a translucent tint would let the image show through —
     and must NOT invert in dark mode. Each is one hallmark ramp: a light fill,
     a mid-tone border, dark ink. The 925 is blue; the flag is green. */
  --badge-925-fill:    #dde8f0;   /* light blue  — fill   */
  --badge-925-border:  #97b3c4;   /* mid blue    — border */
  --badge-925-ink:     #3d6e8c;   /* dark blue   — text   */
  --badge-new-fill:    #ddefe4;   /* light green — fill   */
  --badge-new-border:  #93c1a4;   /* mid green   — border */
  --badge-new-ink:     #2e7a4a;   /* dark green  — text (brand success) */

  /* ─── MAPS · Result-card tag families ─── ✦ all FIXED, theme-independent
     The factual tags on result cards. Each FAMILY carries its own hue so a
     shopper recognises a tag type at a glance across a grid of cards:
       editorial    — Classic            · warm beige
       delicate     — Lightest, Choker   · rose  (the fine, short end)
       substantial  — Boldest, Densest, Longest · blue (the heavy, long end)
     Fills sit a step DEEPER than the 925 stamp (--badge-925-fill, a pale blue)
     so the tag stack reads with more weight than the hallmark beside it, and
     each family stays one step clear of the fit tag in the same hue. */
  --tag-classic-fill:       var(--beige-300);
  --tag-classic-border:     var(--beige-600);
  --tag-classic-ink:        #3d352f;          /* deep warm brown */
  --tag-delicate-fill:      var(--maroon-100);
  --tag-delicate-border:    var(--maroon-300);
  --tag-delicate-ink:       var(--maroon-500);
  --tag-substantial-fill:   var(--blue-200);
  --tag-substantial-border: var(--blue-400);
  --tag-substantial-ink:    var(--blue-700);

  /* ─── MAPS · ON THE MAROON GROUND ─── ✦ all FIXED
     A whole surface — the shop footer — is beige on maroon, and none of the maps above work
     there. --border-default is a light warm grey that vanishes on maroon; --text-muted is a
     grey that goes muddy on it; --text-error is a red that is close to unreadable against a
     dark red ground. So the footer was carrying eight hardcoded rgba() literals and a hex,
     and the next component built on maroon would have invented its own, slightly different.

     These are beige-500 at set alphas, so they sit on the ground they are given rather than
     being flat colours that only happen to look right on one background. They do NOT invert in
     dark mode, because maroon does not: the footer looks the same in both themes, deliberately.

     Use `color:` with these rather than `opacity:` on the element — opacity fades an element's
     children too, which is fine for a bare link and wrong for anything with structure. Keep
     `opacity` for interaction states (a hover fade), where fading the whole element is exactly
     the intent. */
     There are only two text tiers, and that is deliberate. The footer had been dimming beige to
     .72 / .55 / .50 for three levels of quiet — but .55 measures 4.46:1 against maroon and .50
     measures 3.92:1, and both were being used on the 10px uppercase eyebrows and the copyright
     line. That is small text, so WCAG AA wants 4.5:1, and the ramp does not clear it until .58.
     Once every legible tier has to sit at .58 or above, a third one is just two names for the
     same colour. Contrast measured, not guessed — the ratios are in the comments. */
  --surface-on-action-subtle:  rgba(233, 226, 218, 0.08);  /* input fill                  */
  --surface-on-action-hover:   rgba(233, 226, 218, 0.14);  /* input fill, focused         */
  --border-on-action-subtle:   rgba(233, 226, 218, 0.16);  /* hairline rules — decorative */
  --border-on-action:          rgba(233, 226, 218, 0.28);  /* input border                */
  --text-on-action-muted:      rgba(233, 226, 218, 0.72);  /* 6.56:1 — secondary copy     */
  --text-on-action-subtle:     rgba(233, 226, 218, 0.60);  /* 5.02:1 — the quietest text
                                                              that is still text: eyebrows,
                                                              the copyright line, the star */
  --text-error-on-action:      #f0b4b4;                    /* 8.23:1 — --text-error is a
                                                              dark red, near unreadable on
                                                              a dark red ground; this is a
                                                              light rose that holds up      */


  /* ════════════════════════════════════════════════════════════
     TYPOGRAPHY
     Scale: Major Third (×1.25) with base 16px,
            rounded to nearest 4px multiple.
     Line heights: font-size × 1.2, rounded to nearest 4px.
     ════════════════════════════════════════════════════════════ */

  --font-base: var(--font-coconat);

  /* ─── Type Scale — mobile-first
     Defaults are mobile sizes. Headings scale up at 768px via
     the @media (min-width: 768px) :root block below.
     Paragraphs (body/body-sm/caption/label) never change.
     ─── */
  --type-display:  3rem;      /* mobile 48px  → desktop 60px  */
  --type-h2:       2.5rem;    /* mobile 40px  → desktop 48px  */
  --type-h3:       2rem;      /* mobile 32px  → desktop 40px  */
  --type-h4:       1.75rem;   /* mobile 28px  → desktop 32px  */
  --type-h5:       1.5rem;    /* 24px — same both             */
  --type-h6:       1.25rem;   /* 20px — same both             */
  --type-body-lg:  1.25rem;   /* 20px — same both             */
  --type-body:     1rem;      /* 16px — baseline              */
  --type-body-sm:  0.875rem;  /* 14px                         */
  --type-caption:  0.75rem;   /* 12px — caption / legal       */
  --type-label:    0.625rem;  /* 10px — eyebrow / badge label */

  /* ─── Line Heights — match mobile type sizes ─── */
  --lh-display:  3.5rem;    /* mobile 56px  → desktop 72px */
  --lh-h2:       3rem;      /* mobile 48px  → desktop 56px */
  --lh-h3:       2.5rem;    /* mobile 40px  → desktop 48px */
  --lh-h4:       2rem;      /* mobile 32px  → desktop 40px */
  --lh-h5:       1.75rem;   /* 28px — same both            */
  --lh-h6:       1.5rem;    /* 24px — same both            */
  --lh-body-lg:  1.5rem;    /* 24px                        */
  --lh-body:     1.25rem;   /* 20px                        */
  --lh-body-sm:  1rem;      /* 16px                        */
  --lh-caption:  1rem;      /* 16px                        */

  /* ─── Leading — UNITLESS multipliers, for text that wraps ───
     The --lh-* tokens above are FIXED heights, each cut to pair with one --type-* size. That
     is right for a heading, which is set once at a known size and should sit on a predictable
     baseline. It is wrong for prose: --lh-body is 20px against 16px text — a ratio of 1.25,
     which is far too tight to read a paragraph in, and it does not scale if the font size does.

     So: fixed --lh-* for headings and single-line labels. Unitless --leading-* for anything
     that runs to a second line. Every line-height in the shop that was a bare number is one of
     these — they had drifted to 1.2/1.3/1.4/1.5/1.55/1.7, six values doing the work of four. */
  --leading-tight:   1.2;   /* headings, card titles — display text that must not sprawl */
  --leading-snug:    1.35;  /* compact UI copy, meta rows                                */
  --leading-normal:  1.5;   /* default for wrapping interface text                       */
  --leading-relaxed: 1.6;   /* notes, ledes                                              */
  --leading-loose:   1.7;   /* long-form prose — the legal pages                         */

  /* ─── Letter Spacing ─── */
  --tracking-tighter: -0.03em;
  --tracking-tight:   -0.01em;
  --tracking-normal:   0em;
  --tracking-wide:     0.04em;
  --tracking-wider:    0.10em;
  --tracking-widest:   0.18em;   /* eyebrows, all-caps micro labels */

  /* ─── Weights ─── */
  --weight-regular: 400;
  --weight-demi:    600;
  --weight-bold:    700;

  /* ─── Brand mark ───
     The four-pointed star (U+2726). It had been living in this file as a documentation
     glyph — the "✦ = FIXED in dark mode" marker below — but it is a brand element, not an
     annotation, and it is now set in the shop (the footer rule). One definition, so it
     cannot be typed as ✧ or ✳ somewhere and quietly become a second star.

     Usage: `content: var(--brand-star)` on a decorative pseudo-element, or the character
     itself inside an `aria-hidden` span. It is an ornament — never expose it to a screen
     reader, which reads it aloud as "black four pointed star". */
  --brand-star: '✦';


  /* ════════════════════════════════════════════════════════════
     SPACING — derived from the Tier 1 number scale
     ════════════════════════════════════════════════════════════ */
  --space-px:  var(--scale-25);    /*  1px */
  --space-0h:  var(--scale-50);    /*  2px */
  --space-1:   var(--scale-100);   /*  4px */
  --space-1h:  var(--scale-150);   /*  6px */
  --space-2:   var(--scale-200);   /*  8px */
  --space-2h:  var(--scale-250);   /* 10px */
  --space-3:   var(--scale-300);   /* 12px */
  --space-4:   var(--scale-400);   /* 16px */
  --space-5:   var(--scale-500);   /* 20px */
  --space-6:   var(--scale-600);   /* 24px */
  --space-7:   var(--scale-700);   /* 28px */
  --space-8:   var(--scale-800);   /* 32px */
  --space-10:  var(--scale-900);   /* 40px */
  --space-12:  var(--scale-1000);  /* 48px */
  --space-16:  var(--scale-1100);  /* 64px */
  --space-20:  var(--scale-1200);  /* 80px */
  --space-24:  var(--scale-1300);  /* 96px */
  --space-32:  var(--scale-1400);  /* 128px */


  /* ════════════════════════════════════════════════════════════
     SHADOWS — maroon-tinted for warmth
     ════════════════════════════════════════════════════════════ */
  --shadow-none:        none;
  --shadow-xs:          0 var(--scale-25)   var(--scale-50)    rgba(64, 31, 40, 0.05);
  --shadow-sm:          0 var(--scale-25)   var(--scale-100)   rgba(64, 31, 40, 0.07);
  --shadow-md:          0 var(--scale-100)  var(--scale-400)   rgba(64, 31, 40, 0.10);
  --shadow-lg:          0 var(--scale-200)  var(--scale-800)   rgba(64, 31, 40, 0.14);
  --shadow-xl:          0 var(--scale-400)  var(--scale-1100)  rgba(64, 31, 40, 0.18);
  --shadow-focus:       0 0 0 var(--scale-50)  rgba(61, 110, 140, 0.28);
  --shadow-focus-error: 0 0 0 var(--scale-50)  rgba(192, 48, 48, 0.22);


  /* ════════════════════════════════════════════════════════════
     MOTION
     ════════════════════════════════════════════════════════════ */
  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in:      cubic-bezier(0.4, 0, 1, 1);
  --ease-out:     cubic-bezier(0, 0, 0.2, 1);
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);

  --duration-fast:   100ms;
  --duration-base:   150ms;
  --duration-slow:   250ms;
  --duration-slower: 350ms;

  --transition-fast:   var(--duration-fast)   var(--ease-default);
  --transition-base:   var(--duration-base)   var(--ease-default);
  --transition-slow:   var(--duration-slow)   var(--ease-default);
  --transition-layout: var(--duration-slower) var(--ease-default);


  /* ════════════════════════════════════════════════════════════
     LAYOUT & Z-INDEX
     ════════════════════════════════════════════════════════════ */
  --max-w:        1200px;
  --max-w-prose:  680px;
  --max-w-narrow: 480px;
  --nav-h:        56px;        /* mobile → 64px at --bp-md */
  --page-px:      var(--space-4); /* 16px mobile gutters → 32px desktop */

  --z-base:    1;
  --z-raised:  10;
  --z-nav:     100;
  --z-overlay: 200;
  --z-drawer:  300;
  --z-modal:   400;
  --z-toast:   500;
}


/* ════════════════════════════════════════════════════════════════
   DARK MODE
   Only Tier 3 maps tokens are overridden.
   ✦ FIXED tokens (brand colours) are NOT listed here —
     maroon surfaces, beige text-on-action, blue accent solids
     remain unchanged in dark mode.
   ════════════════════════════════════════════════════════════════ */
[data-theme="dark"] {

  /* ── Surfaces (neutrals invert) ── */
  --surface-page:         #100d0e;
  --surface-default:      #1c1618;
  --surface-raised:       #251e20;
  --surface-elevated:     #2e2326;
  --surface-disabled:     #2a2224;
  --surface-action-subtle: rgba(64, 31, 40, 0.28);

  /* Status surfaces — increase opacity for dark backgrounds */
  --surface-success: rgba(46, 122, 74,   0.18);
  --surface-warning: rgba(158, 90, 16,   0.18);
  --surface-error:   rgba(192, 48, 48,   0.18);
  --surface-info:    rgba(61, 110, 140,  0.18);

  /* ── Text (neutrals invert) ── */
  --text-heading:      var(--beige-500);   /* #E9E2DA */
  --text-body:         var(--beige-500);
  --text-muted:        #9e948e;
  --text-subtle:       #6a6060;
  --text-action:       var(--maroon-300);  /* lighter for dark bg */
  --text-action-hover: var(--maroon-200);
  --text-info:         var(--blue-300);   /* lighter blue on dark bg */
  --text-disabled:     #5a5050;
  /* ✦ text-on-action: beige on maroon — stays */
  /* ✦ text-on-accent: white on blue — stays   */

  /* ── Borders (neutrals invert) ── */
  --border-default:  #3a3032;
  --border-strong:   #4e4244;
  --border-disabled: #3a3032;
  /* ✦ border-action and border-focus — stay */

  /* Status borders */
  --border-success: rgba(46, 122, 74,   0.38);
  --border-warning: rgba(158, 90, 16,   0.38);
  --border-error:   rgba(192, 48, 48,   0.38);
  --border-info:    var(--blue-600);

  /* ── Icons (neutrals invert) ── */
  --icon-default:  var(--beige-700);   /* #b8b0a7 */
  --icon-disabled: #5a5050;
  /* ✦ icon-on-action, icon-on-accent — stay */

  /* ── Shadows ── */
  --shadow-xs: 0 var(--scale-25)  var(--scale-50)    rgba(0, 0, 0, 0.25);
  --shadow-sm: 0 var(--scale-25)  var(--scale-100)   rgba(0, 0, 0, 0.30);
  --shadow-md: 0 var(--scale-100) var(--scale-400)   rgba(0, 0, 0, 0.40);
  --shadow-lg: 0 var(--scale-200) var(--scale-800)   rgba(0, 0, 0, 0.50);
  --shadow-xl: 0 var(--scale-400) var(--scale-1100)  rgba(0, 0, 0, 0.60);
}


/* ════════════════════════════════════════════════════════════════
   RESPONSIVE — Desktop scale-up at 768px
   Mobile is the default. This block upgrades layout tokens,
   type scale, and spacing for wider viewports.
   Breakpoints:  --bp-sm 480px  --bp-md 768px
                 --bp-lg 1024px --bp-xl 1200px
   ════════════════════════════════════════════════════════════════ */
@media (min-width: 768px) {
  :root {
    /* Type scale — scale up headings for desktop */
    --type-display:  3.75rem;   /* 60px */
    --type-h2:       3rem;      /* 48px */
    --type-h3:       2.5rem;    /* 40px */
    --type-h4:       2rem;      /* 32px */

    /* Line heights to match */
    --lh-display:  4.5rem;    /* 72px */
    --lh-h2:       3.5rem;    /* 56px */
    --lh-h3:       3rem;      /* 48px */
    --lh-h4:       2.5rem;    /* 40px */

    /* Layout */
    --nav-h:    64px;
    --page-px:  var(--space-8); /* 32px gutters */
  }
}


/* ════════════════════════════════════════════════════════════════
   BASE RESET
   ════════════════════════════════════════════════════════════════ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-base);
  font-size: var(--type-body);
  line-height: var(--lh-body);
  background: var(--surface-page);
  color: var(--text-body);
  -webkit-font-smoothing: antialiased;
  transition: background var(--transition-slow), color var(--transition-slow);
}


/* ════════════════════════════════════════════════════════════════
   COMPONENT STYLES
   All classes reference ONLY Tier 3 maps tokens (--surface-*,
   --text-*, --border-*, --icon-*). No direct brand primitives.
   ════════════════════════════════════════════════════════════════ */

/* ─── BUTTONS ───────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-base);
  font-size: var(--type-label);
  font-weight: var(--weight-demi);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  text-decoration: none;
  border: var(--border-w-small) solid transparent;
  border-radius: var(--radius-btn);
  padding: var(--space-3) var(--space-6);
  min-height: 44px; /* WCAG 2.5.5 touch target */
  cursor: pointer;
  white-space: nowrap;
  line-height: 1;
  transition: background var(--transition-base),
              border-color var(--transition-base),
              color var(--transition-base),
              box-shadow var(--transition-base);
}

/* Sizes */
.btn-sm   { padding: var(--space-2) var(--space-4); font-size: 0.55rem; min-height: 36px; }
.btn-lg   { padding: var(--space-4) var(--space-8); font-size: var(--type-caption); min-height: 52px; }
.btn-full { width: 100%; }

/* Primary — maroon fill */
.btn-primary {
  background: var(--surface-action);
  color: var(--text-on-action);
  border-color: var(--border-action);
}
.btn-primary:hover:not(:disabled) {
  background: var(--surface-action-hover);
  border-color: var(--border-action-hover);
}
.btn-primary:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

/* Secondary — outlined */
.btn-secondary {
  background: var(--surface-default);
  color: var(--text-body);
  border-color: var(--border-strong);
}
.btn-secondary:hover:not(:disabled) { border-color: var(--text-body); }
.btn-secondary:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

/* Accent — steel blue fill */
.btn-accent {
  background: var(--surface-info-solid);
  color: var(--text-on-accent);
  border-color: var(--surface-info-solid);
}
.btn-accent:hover:not(:disabled) {
  background: var(--surface-info-solid-hover);
  border-color: var(--surface-info-solid-hover);
}
.btn-accent:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

/* Ghost — text link style */
.btn-ghost {
  background: none;
  border-color: transparent;
  color: var(--text-action);
  font-size: var(--type-label);
  letter-spacing: var(--tracking-wider);
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 0;
}
.btn-ghost:hover:not(:disabled) { color: var(--text-action-hover); }
.btn-ghost:focus-visible { outline: var(--border-w-medium) solid var(--border-focus); outline-offset: 3px; }

/* Inverse — for use on maroon/dark backgrounds */
.btn-inverse {
  background: rgba(233, 226, 218, 0.12);
  color: var(--text-on-action);
  border-color: rgba(233, 226, 218, 0.30);
}
.btn-inverse:hover:not(:disabled) {
  background: rgba(233, 226, 218, 0.22);
  border-color: rgba(233, 226, 218, 0.50);
}

/* Shared disabled */
.btn:disabled { opacity: 0.40; cursor: not-allowed; pointer-events: none; }


/* ─── FORM ELEMENTS ─────────────────────────────────────────── */

.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1h);
}

.field-label {
  font-size: var(--type-label);
  font-weight: var(--weight-demi);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--text-muted);
}

.field-input,
.field-select,
.field-textarea {
  width: 100%;
  font-family: var(--font-base);
  font-size: var(--type-body);
  line-height: var(--lh-body-sm);
  background: var(--surface-default);
  color: var(--text-body);
  border: var(--border-w-small) solid var(--border-default);
  border-radius: var(--radius-input);
  padding: var(--space-3) var(--space-4);
  outline: none;
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
  -webkit-appearance: none;
  appearance: none;
}

.field-input::placeholder,
.field-textarea::placeholder {
  color: var(--text-subtle);
  font-size: var(--type-body-sm);
}

.field-input:focus,
.field-select:focus,
.field-textarea:focus {
  border-color: var(--border-focus);
  box-shadow: var(--shadow-focus);
}

.field-input:disabled,
.field-select:disabled,
.field-textarea:disabled {
  background: var(--surface-raised);
  color: var(--text-disabled);
  cursor: not-allowed;
}

.field-input.has-error,
.field-select.has-error,
.field-textarea.has-error { border-color: var(--border-error); }

.field-input.has-error:focus,
.field-select.has-error:focus,
.field-textarea.has-error:focus {
  border-color: var(--border-error);
  box-shadow: var(--shadow-focus-error);
}

.field-textarea {
  resize: vertical;
  min-height: var(--scale-1300);
}

.field-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%237a6e68'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-4) center;
  padding-right: var(--space-8);
  cursor: pointer;
}

.field-hint       { font-size: var(--type-label); color: var(--text-subtle); letter-spacing: var(--tracking-wide); }
.field-error-msg  { font-size: var(--type-label); color: var(--text-error);  letter-spacing: var(--tracking-wide); }


/* ─── BADGES ────────────────────────────────────────────────── */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--type-label);
  font-weight: var(--weight-demi);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  padding: var(--space-0h) var(--space-2h);
  border-radius: var(--radius-badge);
  border: var(--border-w-small) solid;
  white-space: nowrap;
  line-height: 1.6;
}

.badge-neutral { color: var(--text-muted);    background: var(--surface-raised);        border-color: var(--border-default); }
.badge-primary { color: var(--text-action);   background: var(--surface-action-subtle); border-color: currentColor; }
.badge-accent  { color: var(--text-info);     background: var(--surface-info);          border-color: currentColor; }
.badge-success { color: var(--text-success);  background: var(--surface-success);       border-color: currentColor; }
.badge-warning { color: var(--text-warning);  background: var(--surface-warning);       border-color: currentColor; }
.badge-error   { color: var(--text-error);    background: var(--surface-error);         border-color: currentColor; }
.badge-info    { color: var(--text-info);     background: var(--surface-info);          border-color: currentColor; }
.badge-pill    { border-radius: var(--radius-chip); }


/* ─── CARDS ─────────────────────────────────────────────────── */

.card {
  background: var(--surface-default);
  border: var(--border-w-small) solid var(--border-default);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
}
.card-header { padding: var(--space-5); border-bottom: var(--border-w-small) solid var(--border-default); }
.card-body   { padding: var(--space-5); }
.card-footer { padding: var(--space-5); border-top:    var(--border-w-small) solid var(--border-default); }


/* ─── ALERTS ────────────────────────────────────────────────── */

.alert {
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-base);
  border: var(--border-w-small) solid;
  font-size: var(--type-body-sm);
  line-height: var(--lh-body);
  display: none;
}
.alert.visible { display: block; }

.alert-error   { color: var(--text-error);   border-color: var(--border-error);   background: var(--surface-error); }
.alert-success { color: var(--text-success); border-color: var(--border-success); background: var(--surface-success); }
.alert-warning { color: var(--text-warning); border-color: var(--border-warning); background: var(--surface-warning); }
.alert-info    { color: var(--text-info);    border-color: var(--border-info);    background: var(--surface-info); }


/* ─── UTILITY ───────────────────────────────────────────────── */

.divider {
  border: none;
  border-top: var(--border-w-small) solid var(--border-default);
}

.eyebrow {
  font-size: var(--type-label);
  font-weight: var(--weight-demi);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--text-muted);
}

.qty-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--scale-700);
  height: var(--scale-700);
  background: var(--surface-raised);
  border: var(--border-w-small) solid var(--border-default);
  border-radius: var(--radius-sm);
  color: var(--text-body);
  font-family: var(--font-base);
  font-size: var(--type-body);
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast);
  flex-shrink: 0;
}
.qty-btn:hover {
  background: var(--surface-elevated);
  border-color: var(--border-strong);
}


/* ─── CLOSE BUTTON ──────────────────────────────────────────── */

.close-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--scale-700);
  height: var(--scale-700);
  border-radius: var(--radius-round);
  background: none;
  border: none;
  color: var(--icon-default);
  cursor: pointer;
  font-size: var(--type-h6);
  line-height: 1;
  flex-shrink: 0;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.close-btn:hover { background: var(--surface-raised); color: var(--text-body); }
.close-btn:focus-visible { outline: var(--border-w-medium) solid var(--border-focus); outline-offset: 2px; }
.close-btn-sm { width: var(--scale-500); height: var(--scale-500); font-size: var(--type-body-sm); }
.close-btn-lg { width: var(--scale-900); height: var(--scale-900); font-size: var(--type-h5); }


/* ─── NAVBAR ────────────────────────────────────────────────── */

.nav {
  height: var(--nav-h);
  background: var(--surface-default);
  border-bottom: var(--border-w-small) solid var(--border-default);
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
}
.nav-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--page-px);
  height: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.nav-logo {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
  color: var(--text-heading);
  font-size: var(--type-body-sm);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  margin-right: auto;
  flex-shrink: 0;
}
.nav-links {
  display: none; /* mobile: hidden — shown at 768px */
  align-items: center;
  gap: var(--space-6);
  list-style: none;
}
@media (min-width: 768px) {
  .nav-links { display: flex; }
}
.nav-link {
  font-size: var(--type-label);
  font-weight: var(--weight-demi);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--text-muted);
  text-decoration: none;
  transition: color var(--transition-fast);
  white-space: nowrap;
}
.nav-link:hover,
.nav-link.active { color: var(--text-action); }
.nav-actions { display: flex; align-items: center; gap: var(--space-1); }

/* Icon button — 44px touch target */
.nav-icon-btn {
  position: relative;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-base);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--icon-default);
  transition: background var(--transition-fast), color var(--transition-fast);
}
.nav-icon-btn:hover { background: var(--surface-raised); color: var(--icon-action); }
.nav-icon-btn:focus-visible { outline: var(--border-w-medium) solid var(--border-focus); outline-offset: 2px; }

.nav-count {
  position: absolute;
  top: 6px;
  right: 6px;
  min-width: 16px;
  height: 16px;
  background: var(--surface-action);
  color: var(--text-on-action);
  border-radius: var(--radius-round);
  font-size: 9px;
  font-weight: var(--weight-bold);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  line-height: 1;
  pointer-events: none;
}

/* Hamburger toggle — visible on mobile, hidden on desktop */
.nav-toggle-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-base);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--icon-default);
  transition: background var(--transition-fast), color var(--transition-fast);
  flex-shrink: 0;
}
.nav-toggle-btn:hover { background: var(--surface-raised); color: var(--icon-action); }
.nav-toggle-btn:focus-visible { outline: var(--border-w-medium) solid var(--border-focus); outline-offset: 2px; }
@media (min-width: 768px) { .nav-toggle-btn { display: none; } }

/* Mobile navigation overlay — full-screen slide panel */
.nav-mobile-menu {
  position: fixed;
  inset: 0;
  top: var(--nav-h);
  background: var(--surface-default);
  z-index: calc(var(--z-nav) - 1);
  padding: var(--space-4) var(--page-px) var(--space-8);
  overflow-y: auto;
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity var(--transition-layout), transform var(--transition-layout);
  border-top: var(--border-w-small) solid var(--border-default);
}
.nav-mobile-menu.open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
@media (min-width: 768px) { .nav-mobile-menu { display: none; } }

.nav-mobile-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  margin-bottom: var(--space-6);
}
.nav-mobile-link {
  display: flex;
  align-items: center;
  min-height: 52px;
  font-size: var(--type-h6);
  font-weight: var(--weight-demi);
  letter-spacing: var(--tracking-tight);
  color: var(--text-heading);
  text-decoration: none;
  border-bottom: var(--border-w-small) solid var(--border-default);
  transition: color var(--transition-fast), padding-left var(--transition-fast);
}
.nav-mobile-link:hover,
.nav-mobile-link.active { color: var(--text-action); padding-left: var(--space-2); }
.nav-mobile-meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-top: var(--space-4);
}

/* Inverted nav — for maroon/dark hero backgrounds */
.nav-dark {
  background: var(--surface-action);
  border-bottom-color: var(--surface-action-hover);
}
.nav-dark .nav-logo              { color: var(--text-on-action); }
.nav-dark .nav-link              { color: rgba(233,226,218,0.65); }
.nav-dark .nav-link:hover,
.nav-dark .nav-link.active       { color: var(--text-on-action); }
.nav-dark .nav-icon-btn          { color: rgba(233,226,218,0.65); }
.nav-dark .nav-icon-btn:hover    { background: rgba(233,226,218,0.12); color: var(--text-on-action); }
.nav-dark .nav-count             { background: var(--text-on-action); color: var(--text-action); }
.nav-dark .nav-toggle-btn        { color: rgba(233,226,218,0.80); }
.nav-dark .nav-toggle-btn:hover  { background: rgba(233,226,218,0.12); color: var(--text-on-action); }
.nav-dark .nav-mobile-menu       { background: var(--maroon-600); border-top: 1px solid rgba(233,226,218,0.12); }
.nav-dark .nav-mobile-link       { color: rgba(233,226,218,0.70); border-bottom-color: rgba(233,226,218,0.08); }
.nav-dark .nav-mobile-link:hover,
.nav-dark .nav-mobile-link.active { color: var(--text-on-action); }


/* ─── BREADCRUMB ────────────────────────────────────────────── */
/* Mobile-first: scrollable trail. Use .breadcrumb-back for the
   mobile back-link pattern (shown on mobile, hidden on desktop). */

.breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  gap: var(--space-1h);
  list-style: none;
  padding: 0 0 2px; /* space for focus rings */
}
.breadcrumb::-webkit-scrollbar { display: none; }

.breadcrumb-item { display: flex; align-items: center; gap: var(--space-1h); flex-shrink: 0; }
.breadcrumb-link {
  font-size: var(--type-label);
  letter-spacing: var(--tracking-wide);
  color: var(--text-muted);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--transition-fast);
}
.breadcrumb-link:hover { color: var(--text-action); }
/* The final crumb is the current page. It is a bare <span> (or a dead link), so
   without this it inherits the container's font size and renders larger than the
   trail before it — "Chains" came out at 16px next to 10px links. Pin it to the
   same size, weight and spacing as the links so the whole trail is consistent. */
.breadcrumb-item:last-child > span,
.breadcrumb-item:last-child .breadcrumb-link {
  font-size: var(--type-label);
  letter-spacing: var(--tracking-wide);
  color: var(--text-body);
  white-space: nowrap;
  pointer-events: none;
}
.breadcrumb-sep { color: var(--text-subtle); font-size: var(--type-label); user-select: none; flex-shrink: 0; }

/* Back link — mobile alternative to the full trail */
.breadcrumb-back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--type-label);
  letter-spacing: var(--tracking-wide);
  color: var(--text-muted);
  text-decoration: none;
  min-height: 44px; /* touch target */
  transition: color var(--transition-fast);
}
.breadcrumb-back::before { content: '←'; font-size: 1.1em; }
.breadcrumb-back:hover { color: var(--text-action); }


/* ─── OPTION GROUP ──────────────────────────────────────────── */
/* Wrapper for chip-group, slider, or swatch-group on a PDP    */

.option-group { display: flex; flex-direction: column; gap: var(--space-3); }
.option-group-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.option-group-label {
  font-size: var(--type-label);
  font-weight: var(--weight-demi);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--text-muted);
}
.option-group-value {
  color: var(--text-body);
  font-weight: var(--weight-bold);
  margin-left: var(--space-2);
  text-transform: none;
  letter-spacing: 0;
}
.option-group-hint { font-size: var(--type-label); color: var(--text-subtle); }
.option-group-guide {
  font-size: var(--type-label);
  color: var(--text-info);
  text-decoration: none;
  letter-spacing: var(--tracking-wide);
}
.option-group-guide:hover { text-decoration: underline; }


/* ─── CHIP / OPTION SELECTOR ────────────────────────────────── */
/* Radio-style selection: length, size, material type           */

.chip-group { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.chip-option { display: inline-block; }
.chip-option input[type="radio"],
.chip-option input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}
.chip-option-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  min-height: 44px; /* WCAG touch target */
  border: var(--border-w-small) solid var(--border-default);
  border-radius: var(--radius-base);
  background: var(--surface-default);
  color: var(--text-muted);
  font-size: var(--type-label);
  font-weight: var(--weight-demi);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  cursor: pointer;
  user-select: none;
  transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
}
.chip-option:hover .chip-option-label {
  border-color: var(--border-strong);
  color: var(--text-body);
}
.chip-option input:checked + .chip-option-label {
  background: var(--surface-action);
  color: var(--text-on-action);
  border-color: var(--border-action);
}
.chip-option input:focus-visible + .chip-option-label {
  outline: var(--border-w-medium) solid var(--border-focus);
  outline-offset: 2px;
}
.chip-option input:disabled + .chip-option-label {
  opacity: 0.38;
  cursor: not-allowed;
  background: var(--surface-disabled);
}

/* Thickness indicator — a vertical bar inside the chip */
.chip-thickness-bar {
  display: inline-block;
  height: 14px;
  background: currentColor;
  border-radius: 2px;
  flex-shrink: 0;
}


/* ─── SWATCH PICKER ─────────────────────────────────────────── */
/* Colour / material radio — circular swatches with check state */

.swatch-group { display: flex; flex-wrap: wrap; gap: var(--space-2h); }

.swatch-option { position: relative; cursor: pointer; }
.swatch-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}
.swatch-option-dot {
  display: block;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-round);
  border: 2px solid transparent;
  outline: 1px solid var(--border-default);
  transition: outline var(--transition-fast), border-color var(--transition-fast);
}
.swatch-option:hover .swatch-option-dot {
  outline: 2px solid var(--border-strong);
}
.swatch-option input:checked + .swatch-option-dot {
  border-color: var(--surface-default);
  outline: 2px solid var(--border-action);
}
.swatch-option input:focus-visible + .swatch-option-dot {
  outline: 2px solid var(--border-focus);
}
.swatch-option input:disabled + .swatch-option-dot { opacity: 0.38; cursor: not-allowed; }

/* Tooltip on hover — shows material name */
.swatch-tooltip {
  position: absolute;
  bottom: calc(100% + var(--space-2));
  left: 50%;
  transform: translateX(-50%);
  background: #1a1512;
  color: #ffffff;
  font-size: var(--type-label);
  letter-spacing: var(--tracking-wide);
  padding: var(--space-1h) var(--space-3);
  border-radius: var(--radius-base);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--transition-fast);
  z-index: var(--z-raised);
}
.swatch-option:hover .swatch-tooltip { opacity: 1; }


/* ─── RANGE SLIDER ──────────────────────────────────────────── */
/* JS sets --fill on the input to show filled portion of track   */

.slider-field { display: flex; flex-direction: column; gap: var(--space-3); }
.slider-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.slider-value {
  font-size: var(--type-body-sm);
  font-weight: var(--weight-demi);
  color: var(--text-body);
  background: var(--surface-raised);
  border: var(--border-w-small) solid var(--border-default);
  border-radius: var(--radius-base);
  padding: var(--space-1) var(--space-3);
  min-width: 64px;
  text-align: center;
}
.slider-labels {
  display: flex;
  justify-content: space-between;
  font-size: var(--type-label);
  color: var(--text-subtle);
  letter-spacing: var(--tracking-wide);
}

input[type="range"].slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  border-radius: var(--radius-round);
  outline: none;
  cursor: pointer;
  border: none;
  padding: 0;
  background: linear-gradient(
    to right,
    var(--surface-action) 0%,
    var(--surface-action) var(--fill, 40%),
    var(--border-default) var(--fill, 40%)
  );
}
input[type="range"].slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--surface-action);
  border: 3px solid var(--surface-default);
  box-shadow: var(--shadow-sm);
  cursor: grab;
  transition: box-shadow var(--transition-fast);
}
input[type="range"].slider:focus::-webkit-slider-thumb {
  box-shadow: var(--shadow-focus), var(--shadow-sm);
}
input[type="range"].slider:active::-webkit-slider-thumb { cursor: grabbing; }
input[type="range"].slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--surface-action);
  border: 3px solid var(--surface-default);
  box-shadow: var(--shadow-sm);
  cursor: grab;
}
input[type="range"].slider::-moz-range-track {
  height: 4px;
  border-radius: var(--radius-round);
  background: var(--border-default);
}
input[type="range"].slider::-moz-range-progress {
  background: var(--surface-action);
  border-radius: var(--radius-round);
}


/* ─── TABS ──────────────────────────────────────────────────── */

.tabs { display: flex; flex-direction: column; }
.tab-list {
  display: flex;
  border-bottom: var(--border-w-small) solid var(--border-default);
  overflow-x: auto;
  scrollbar-width: none;
}
.tab-list::-webkit-scrollbar { display: none; }
.tab {
  padding: var(--space-3) var(--space-5);
  font-family: var(--font-base);
  font-size: var(--type-label);
  font-weight: var(--weight-demi);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--text-muted);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}
.tab:hover { color: var(--text-action); }
.tab.active { color: var(--text-action); border-bottom-color: var(--border-action); }
.tab:focus-visible { outline: var(--border-w-medium) solid var(--border-focus); outline-offset: -2px; }
.tab-panel { padding: var(--space-6) 0; }
.tab-panel:not(.active) { display: none; }


/* ─── DRAWER ────────────────────────────────────────────────── */

.drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(26, 21, 18, 0.52);
  z-index: var(--z-overlay);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-slow);
}
.drawer-overlay.open { opacity: 1; pointer-events: all; }

.drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(420px, 92vw);
  background: var(--surface-default);
  border-left: var(--border-w-small) solid var(--border-default);
  display: flex;
  flex-direction: column;
  z-index: var(--z-drawer);
  transform: translateX(100%);
  transition: transform var(--transition-layout);
  box-shadow: var(--shadow-xl);
}
.drawer.open { transform: translateX(0); }
.drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-5) var(--space-6);
  border-bottom: var(--border-w-small) solid var(--border-default);
  flex-shrink: 0;
}
.drawer-title { font-size: var(--type-h6); font-weight: var(--weight-demi); color: var(--text-heading); }
.drawer-body  { flex: 1; overflow-y: auto; padding: var(--space-6); }
.drawer-footer {
  padding: var(--space-5) var(--space-6);
  border-top: var(--border-w-small) solid var(--border-default);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}


/* ─── MODAL ─────────────────────────────────────────────────── */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(26, 21, 18, 0.55);
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-slow);
}
.modal-overlay.open { opacity: 1; pointer-events: all; }
.modal {
  background: var(--surface-default);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-xl);
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  transform: scale(0.96) translateY(8px);
  transition: transform var(--transition-slow);
}
.modal-overlay.open .modal { transform: scale(1) translateY(0); }
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-5) var(--space-6);
  border-bottom: var(--border-w-small) solid var(--border-default);
  flex-shrink: 0;
}
.modal-title { font-size: var(--type-h5); font-weight: var(--weight-demi); color: var(--text-heading); }
.modal-body  { flex: 1; overflow-y: auto; padding: var(--space-6); }
.modal-footer {
  padding: var(--space-5) var(--space-6);
  border-top: var(--border-w-small) solid var(--border-default);
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  flex-shrink: 0;
}



/* ═══ SEGMENTED CONTROL ═══════════════════════════════════════════════════════
   Switches what a view SHOWS, in place. Two to four mutually exclusive options.

   This is deliberately its own component rather than a fifth flavour of tab:
     .tab          navigates BETWEEN panels — different content, same page
     .chip-option  selects a value that a FORM will submit
     .seg          changes how the SAME thing is displayed — a chart series, a
                   unit, a date range. Nothing navigates and nothing is submitted.

   Built on real radio inputs, like .chip-option, so arrow-key navigation, the
   accessible name and the checked state all come from the platform rather than
   being re-implemented with aria- attributes and keydown handlers.

   The active option is a raised "thumb" on a recessed track — the convention
   every OS uses for this control, so it reads as a switch and not as buttons. */

.seg {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  background: var(--surface-raised);
  border: var(--border-w-small) solid var(--border-default);
  border-radius: var(--radius-chip);
}
.seg-option { display: inline-block; }
/* Off-screen rather than display:none — a hidden input is not focusable, which would
   cost the keyboard navigation this component exists to inherit. */
.seg-option input {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}
.seg-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1h) var(--space-4);
  border-radius: calc(var(--radius-chip) - 2px);
  font-family: var(--font-base);
  font-size: var(--type-label);
  font-weight: var(--weight-demi);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast),
              box-shadow var(--transition-fast);
}
.seg-option:hover .seg-label { color: var(--text-body); }
.seg-option input:checked + .seg-label {
  background: var(--surface-default);
  color: var(--text-heading);
  box-shadow: var(--shadow-xs);
}
.seg-option input:focus-visible + .seg-label {
  outline: var(--border-w-medium) solid var(--border-focus);
  outline-offset: 1px;
}
.seg-option input:disabled + .seg-label { opacity: 0.45; cursor: not-allowed; }

/* A colour key, for when the segments name series that are also drawn. The dot is
   set by the consumer (--seg-dot), so the control never hardcodes a palette. */
.seg-dot {
  width: 8px; height: 8px;
  border-radius: 2px;
  background: var(--seg-dot, currentColor);
  flex-shrink: 0;
}

/* Full width on a narrow screen — a control that overflows its card is worse than
   one that spans it. */
.seg-full { display: flex; width: 100%; }
.seg-full .seg-option { flex: 1 1 0; min-width: 0; }
.seg-full .seg-label { width: 100%; justify-content: center; }

/* ─── TOAST ─────────────────────────────────────────────────── */

/* Mobile: full-width stack at bottom. Desktop: fixed 360px at bottom-right */
.toast-container {
  position: fixed;
  bottom: var(--space-5);
  left: var(--page-px);
  right: var(--page-px);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  pointer-events: none;
}
@media (min-width: 480px) {
  .toast-container {
    left: auto;
    right: var(--space-6);
    width: 360px;
  }
}
.toast {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background: var(--surface-default);
  border: var(--border-w-small) solid var(--border-default);
  border-left: 3px solid var(--border-default);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 360px;
  pointer-events: all;
}
.toast-icon  { font-size: var(--type-h6); flex-shrink: 0; margin-top: 1px; }
.toast-body  { flex: 1; }
.toast-title { font-size: var(--type-body-sm); font-weight: var(--weight-demi); color: var(--text-heading); margin-bottom: 2px; }
.toast-msg   { font-size: var(--type-label); color: var(--text-muted); line-height: 1.5; }
.toast-close {
  color: var(--icon-default); cursor: pointer; padding: 0;
  background: none; border: none; font-size: var(--type-body-sm);
  line-height: 1; align-self: flex-start; font-family: var(--font-base);
}
.toast-close:hover { color: var(--text-body); }
.toast-success { border-left-color: var(--text-success); }
.toast-error   { border-left-color: var(--text-error); }
.toast-warning { border-left-color: var(--text-warning); }
.toast-info    { border-left-color: var(--text-info); }


/* ─── TAG (interactive filter pill) ─────────────────────────── */

.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1h);
  padding: var(--space-1h) var(--space-3);
  background: var(--surface-raised);
  border: var(--border-w-small) solid var(--border-default);
  border-radius: var(--radius-round);
  font-family: var(--font-base);
  font-size: var(--type-label);
  font-weight: var(--weight-demi);
  letter-spacing: var(--tracking-wide);
  color: var(--text-muted);
  cursor: pointer;
  text-decoration: none;
  transition: border-color var(--transition-fast), color var(--transition-fast), background var(--transition-fast);
}
.tag:hover  { border-color: var(--border-strong); color: var(--text-body); }
.tag.active { background: var(--surface-action-subtle); border-color: var(--border-action); color: var(--text-action); }
.tag-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  line-height: 1;
  opacity: 0.55;
  cursor: pointer;
  transition: opacity var(--transition-fast);
  background: none;
  border: none;
  color: inherit;
  padding: 0;
  font-family: var(--font-base);
}
.tag-remove:hover { opacity: 1; }


/* ─── DROPDOWN ──────────────────────────────────────────────── */

.dropdown { position: relative; display: inline-block; }
.dropdown-menu {
  position: absolute;
  top: calc(100% + var(--space-1));
  left: 0;
  min-width: 180px;
  background: var(--surface-default);
  border: var(--border-w-small) solid var(--border-default);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-md);
  z-index: var(--z-raised);
  overflow: hidden;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity var(--transition-fast), transform var(--transition-fast),
              visibility 0s var(--duration-fast);
}
.dropdown.open .dropdown-menu {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0s;
}
.dropdown-item {
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-base);
  font-size: var(--type-body-sm);
  color: var(--text-body);
  cursor: pointer;
  display: block;
  width: 100%;
  background: none;
  border: none;
  text-align: left;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.dropdown-item:hover  { background: var(--surface-raised); }
.dropdown-item.active { color: var(--text-action); background: var(--surface-action-subtle); }
.dropdown-divider     { height: 1px; background: var(--border-default); margin: var(--space-1) 0; }


/* ─── PAGINATION ────────────────────────────────────────────── */

.pagination { display: flex; align-items: center; gap: var(--space-1h); flex-wrap: wrap; }
.page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 var(--space-2);
  border: var(--border-w-small) solid var(--border-default);
  border-radius: var(--radius-base);
  background: var(--surface-default);
  color: var(--text-muted);
  font-family: var(--font-base);
  font-size: var(--type-label);
  font-weight: var(--weight-demi);
  letter-spacing: var(--tracking-wide);
  cursor: pointer;
  text-decoration: none;
  transition: border-color var(--transition-fast), color var(--transition-fast), background var(--transition-fast);
}
.page-btn:hover  { border-color: var(--border-strong); color: var(--text-body); }
.page-btn.active { background: var(--surface-action); color: var(--text-on-action); border-color: var(--border-action); }
.page-btn:disabled { opacity: 0.38; cursor: not-allowed; pointer-events: none; }
.page-ellipsis { padding: 0 var(--space-1); color: var(--text-subtle); font-size: var(--type-body-sm); user-select: none; }


/* ─── SKELETON ──────────────────────────────────────────────── */

.skeleton {
  background: linear-gradient(
    90deg,
    var(--surface-raised) 25%,
    var(--surface-elevated) 50%,
    var(--surface-raised) 75%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
  border-radius: var(--radius-base);
  color: transparent !important;
  pointer-events: none;
}
@keyframes skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}


/* ─── PRICE DISPLAY ─────────────────────────────────────────── */

.price { display: inline-flex; align-items: baseline; gap: var(--space-2); }
.price-current  { font-size: var(--type-h5); font-weight: var(--weight-bold); color: var(--text-heading); }
.price-original { font-size: var(--type-body); color: var(--text-muted); text-decoration: line-through; }
.price-sale .price-current { color: var(--text-error); }


/* ─── TOOLTIP ───────────────────────────────────────────────── */

[data-tooltip] { position: relative; }
[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + var(--space-2));
  left: 50%;
  transform: translateX(-50%);
  background: #1a1512;
  color: #ffffff;
  font-size: var(--type-label);
  letter-spacing: var(--tracking-wide);
  padding: var(--space-1h) var(--space-3);
  border-radius: var(--radius-base);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--transition-fast);
  z-index: var(--z-toast);
}
[data-tooltip]:hover::after { opacity: 1; }


/* ─── DIVIDER WITH LABEL ────────────────────────────────────── */

.divider-label {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  color: var(--text-subtle);
  font-size: var(--type-label);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
}
.divider-label::before,
.divider-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border-default);
}


/* ════════════════════════════════════════════════════════════════
   RESPONSIVE UTILITIES
   ════════════════════════════════════════════════════════════════ */

/* Visibility */
.hide-mobile  { display: none !important; }
.show-mobile  { display: flex !important; }

@media (min-width: 768px) {
  .hide-mobile  { display: unset !important; }
  .show-mobile  { display: none !important; }
  .hide-desktop { display: none !important; }
  .show-desktop { display: flex !important; }
}

/* Layout */
.stack   { display: flex; flex-direction: column; }
.row     { display: flex; flex-direction: row; align-items: center; }
.row-gap { gap: var(--space-3); }
.wrap    { flex-wrap: wrap; }

/* Mobile-only stack: columns on mobile, row on desktop */
.stack-mobile { display: flex; flex-direction: column; gap: var(--space-4); }
@media (min-width: 768px) { .stack-mobile { flex-direction: row; } }

/* Page wrapper */
.page-container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding-left: var(--page-px);
  padding-right: var(--page-px);
}

/* Responsive grid helpers */
.grid-1 { display: grid; grid-template-columns: 1fr; gap: var(--space-5); }
.grid-2 { display: grid; grid-template-columns: 1fr; gap: var(--space-5); }
.grid-3 { display: grid; grid-template-columns: 1fr; gap: var(--space-5); }
.grid-4 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }

@media (min-width: 480px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 768px) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); gap: var(--space-5); }
}
@media (min-width: 1024px) {
  .grid-2 { gap: var(--space-8); }
  .grid-3 { gap: var(--space-8); }
}