/* ============================================================
   KOBA — variables.css
   The only file in the project with literal colour values.
   ============================================================
   DIRECTION: dark + gold. The whole canvas is dark — header, hero, catalogue,
   product card, footer — with a single gold action colour. Decided by the
   client on 2026-10-01 from their logo; it replaces the light "Clinical Calm"
   palette, which was always labelled a placeholder pending the real brand.

   The dark is WARM (#0e0d0b, not a blue-grey). Gold on a cool dark reads green
   and cheap; on a warm ground it reads as metal. Every neutral below carries
   the same warm cast for the same reason.

   RULES THAT ARE NOT STYLE OPINIONS — breaking them breaks accessibility:
   1. --c-error is ONLY validation failure. Not price, not promo, not focus.
   2. --c-focus is ONLY the focus ring, and it is BLUE on purpose — a gold ring
      on a gold-accented dark page is indistinguishable from a hover state.
   3. --c-disabled is for genuinely disabled controls, where WCAG requires no
      contrast. Readable secondary text uses --c-placeholder.
   4. --c-sale is the only warm-orange in the system. It marks a discount and
      nothing else — deliberately NOT --c-error.
   5. Gold is an ACCENT, not a body colour. Long text is --c-text / --c-text-soft.
      A paragraph set in gold loses the accent and gains eye strain.

   ⚠️ CONSEQUENCE OF A FULLY DARK CATALOGUE, write it down before it surprises
   anyone: supplement packshots are shot on white. Dropped on --c-plate as-is,
   every product becomes a white rectangle floating in a dark card. Product
   photos therefore need their background removed (PNG/WebP with alpha) before
   upload. There are no product photos yet, and the contour placeholder is drawn
   for dark — so this bites on the day the first real photo arrives, not today.
   Tracked in CLIENT-INPUT.md.

   Every ratio below was computed with the WCAG 2.x relative-luminance formula;
   all 43 pairs in use pass AA in the role they are used in. Re-run the numbers
   before changing any value.

   Naming:
     --c-*    colour            --sp-*   spacing (4px grid)
     --grad-* gradient          --sh-*   shadow
     --ff-*   font family       --r*     radius
     --img-*  data-URI image    --t*     transition
   ============================================================ */

:root {
  /* ── ground — warm near-black, four steps of elevation ───── */
  --c-bg:              #0e0d0b;  /* Page. text 17.20 · muted 7.40 · primary 9.24 */
  --c-surface:         #16140f;  /* Panels: filter sidebar, checkout card, summary boxes. muted 7.01 */
  --c-surface-2:       #201d16;  /* Second level: toggle track, inert bars. muted 6.41 */
  --c-card:            #151309;  /* Product card, inputs, spec table, step card. text 16.47 · primary 8.85 */
  --c-card-hover:      #1d1a12;  /* Row hover — carried by the border too, never by colour alone */
  --c-border:          #2e2a20;  /* Hairline between blocks. Decorative only */
  --c-border-light:    #221f18;  /* The thinnest divider: table rows, section splits */
  --c-border-strong:   #7a7260;  /* Border of INTERACTIVE elements: inputs, selects, chips, .btn-outline.
                                 3.90 on card · 4.07 on bg · 3.86 on surface — all pass WCAG 1.4.11 */

  /* ── packshot plate — dark, see the warning in the header ── */
  --c-plate:           #1a1710;  /* Behind a product photo. text 15.84 · primary 8.51 */
  --c-plate-line:      #241f16;  /* Hatch texture — must stay barely visible */
  --c-plate-ink:       #8a8069;  /* Outline of the placeholder glyph. 4.58 on plate (>=3 for graphics) */
  --c-img-bdr:         #2a251b;  /* Inner hairline so a photo has a visible edge */

  /* ── gold — the single action colour ─────────────────────── */
  --c-primary:         #d4af37;  /* As text: card 8.85 · bg 9.24 · surface 8.75 · surface-2 8.00 */
  --c-primary-dark:    #b8942a;  /* Pressed / active fill */
  --c-primary-wash:    #241e10;  /* Tinted row, active chip, "how to take it" block */
  --c-cta:             #d4af37;  /* Primary button fill. Same value as primary today, separate token on purpose:
                                 the day the brand wants a different CTA colour, it moves alone */
  --c-cta-hover:       #e5c45a;  /* Lifts rather than darkens — on a dark page, darker reads as disabled */
  --c-on-cta:          #14110a;  /* Text on a gold fill. 8.96 on cta */
  --c-accent:          #d4af37;  /* Accent fill */
  --c-accent-dark:     #b8942a;  /* Accent fill, hover */
  --c-accent-ink:      #e0be55;  /* Accent as FOREGROUND (icons, small marks). 10.79 on bg */
  --c-on-accent:       #14110a;  /* Text on an accent fill. 8.96 */
  --c-logo:            #f4f1e8;  /* The client's mark in the header/footer lockup: WHITE, as the client
                                 delivered it (decided 2026-10-08) — the warm white of --c-text, so mark and
                                 wordmark read as one lockup. Its own token because the mark is brand, not
                                 text: a future brand colour moves the logo alone. 17.20 on bg — graphics need 3:1 */

  /* ── links — the ONE place gold is allowed as a text colour ──
     Always underlined: WCAG 1.4.1 says colour alone is not a link, and on this
     page the gold is also the action fill. Aliases, so a link can never drift to
     a gold that is not the brand's. Lifts on hover rather than darkening — on a
     dark page a darker gold reads as disabled. */
  --c-link:            var(--c-primary);    /* 9.24 on bg · 8.85 on card · 8.51 on plate · 8.01 on warn-bg */
  --c-link-hover:      var(--c-cta-hover);  /* 11.45 on bg · 10.96 on card */

  /* ── text ────────────────────────────────────────────────── */
  --c-text:            #f4f1e8;  /* Headings and body. 17.20 on bg */
  --c-text-soft:       #d6d0c2;  /* Long-form copy. 12.64 on bg */
  --c-muted:           #a89f8c;  /* Secondary: card sub, breadcrumb, counters. 7.40 on bg */
  --c-placeholder:     #8f8674;  /* Readable tertiary: ::placeholder, struck old price, separators. 5.39 on bg */
  --c-disabled:        #5a5445;  /* Genuinely disabled controls only — WCAG exempts these */
  --c-on-dark:         #f4f1e8;  /* Kept for compatibility: the page IS dark now, so this equals --c-text */

  /* ── deeper darks — used to separate bands on an already dark page ── */
  --c-dark:            #0a0908;  /* Promo bar, footer: a step BELOW the page, not above it */
  --c-dark-a:          #14120c;  /* Top of --grad-dark */
  --c-dark-b:          #080706;  /* Bottom of --grad-dark */
  --c-backdrop:        #000000;  /* Opaque backdrop: lightbox, full-screen sheets. Nothing reads on it
                                 directly — text sits on a panel above it. A see-through scrim is --c-overlay */
  --c-hero-fallback:   #0c0b09;  /* Hero background-color, painted BEFORE any image */

  /* ── line art — the homepage illustrations ────────────────
     The drawings are an inline SVG sprite in index.html and stroke in
     currentColor, so every colour they use is one of these and a repaint of the
     brand stays this file alone. Two weights of gold, never the action gold:
     a drawing in --c-accent would compete with the buttons for the eye. */
  --c-art-line:        #c5a656;  /* Main strokes. 7.6 on plate — well past 3:1 for graphics */
  --c-art-line-dim:    #5e5236;  /* Secondary strokes, hatching, leader lines. Decorative only */
  --c-art-glint:       #f0d68a;  /* The single brightest highlight in a drawing — used sparingly */

  /* ── semantic ────────────────────────────────────────────── */
  --c-success:         #5fbf7d;  /* 6.30+ on card */
  --c-warning:         #e3ba4e;  /* Foreground on --c-warn-bg only. 9.15 */
  --c-error:           #e8736f;  /* Validation failure only. 6.30 on card */
  --c-danger:          #e8736f;  /* Alias of --c-error so two reds cannot drift apart */
  --c-info:            #6fb0e8;  /* Informational notes */
  --c-sale:            #e8956a;  /* Discount marker. The only warm-orange in the system */
  --c-warn-bg:         #241c0c;  /* Warning panel fill. text 14.92 · text-soft 10.96 · warning 9.15 */
  --c-warn-bdr:        #463716;  /* Warning panel border */
  /* Callout panels in blog bodies (info · warn · tip). Fills stay dark and only
     TINTED, so body text keeps its own colour on them; the tone is carried by the
     icon and the border, never by text colour alone. Borders are decorative. */
  --c-info-bg:         #101820;  /* Info panel fill. text 15.84 · text-soft 11.64 · muted 6.82 · info 7.71 · link 8.51 */
  --c-info-bdr:        #26394d;  /* Info panel border. Decorative */
  --c-tip-bg:          #111a12;  /* Tip panel fill. text 15.75 · text-soft 11.57 · muted 6.78 · tip-ink 10.13 · link 8.46 */
  --c-tip-bdr:         #2a3d2c;  /* Tip panel border. Decorative */
  --c-tip-ink:         #8fd39a;  /* Tip icon and title. 10.13 on tip-bg */

  /* ── badges — dark fills with light text, one model for all four ── */
  --c-badge-new-bg:    #1c2418;
  --c-badge-new-fg:    #8fd39a;  /* 9.09 on its own background */
  --c-badge-new-bdr:   #2c3a26;
  --c-badge-sale-bg:   #2a1c12;
  --c-badge-sale-fg:   #f0a97c;  /* 8.38 */
  --c-badge-sale-bdr:  #43301e;
  --c-badge-hit-bg:    #d4af37;  /* The only solid gold badge — "hit" is the shop speaking, not a property of the product */
  --c-badge-hit-fg:    #14110a;  /* 8.96 */
  --c-badge-hit-bdr:   #e5c45a;
  --c-badge-out-bg:    #1e1c18;
  --c-badge-out-fg:    #a49b89;  /* 6.18 */
  --c-badge-out-bdr:   #2e2b25;

  /* ── legacy tag aliases — kept until .tag-* markup is folded into .badge-* ── */
  --c-tag-stock-bg:    #1c2418;
  --c-tag-stock-bdr:   #2c3a26;
  --c-tag-out-bg:      #1e1c18;
  --c-tag-out-bdr:     #2e2b25;
  --c-tag-sale-bg:     #2a1c12;
  --c-tag-sale-txt:    #f0a97c;
  --c-tag-sale-bdr:    #43301e;
  --c-tag-new-bg:      #1c2418;
  --c-tag-new-txt:     #8fd39a;
  --c-tag-new-bdr:     #2c3a26;

  /* ── focus — blue, never gold ────────────────────────────── */
  --c-focus:           #7cc0ff;  /* Focus ring. 9.60 on card. Blue so it can never read as a gold hover state */
  --c-focus-dark:      #7cc0ff;  /* Same ring; the page is uniformly dark, so both variants match */

  /* ── skeletons ───────────────────────────────────────────── */
  --c-skeleton-a:      #16140f;
  --c-skeleton-b:      #221f17;

  /* ── alpha layers on the dark ground ──────────────────── */
  --c-on-dark-75:   rgba(244, 241, 232, .78);
  --c-on-dark-60:   rgba(244, 241, 232, .62);
  --c-on-dark-40:   rgba(244, 241, 232, .40);
  --c-on-dark-20:   rgba(244, 241, 232, .18);
  --c-on-dark-10:   rgba(244, 241, 232, .09);
  --c-primary-glow: rgba(212, 175, 55, .16);
  --c-accent-wash:        rgba(212, 175, 55, .05);
  --c-accent-wash-hover:  rgba(212, 175, 55, .09);
  --c-accent-wash-strong: rgba(212, 175, 55, .14);
  --c-img-bg:       var(--c-plate);
  --c-cat-card-bg:  var(--c-plate);
  --c-warning-bg:   var(--c-warn-bg);

  /* ── overlays ─────────────────────────────────────────── */
  --c-overlay-strong: rgba(0, 0, 0, .92);
  --c-overlay:        rgba(0, 0, 0, .62);
  --c-overlay-soft:   rgba(0, 0, 0, .28);
  --c-hero-veil-top:  rgba(10, 9, 8, .74);
  --c-hero-veil-bot:  rgba(10, 9, 8, .58);

  /* ── gradients ────────────────────────────────────────── */
  --grad-dark:      linear-gradient(160deg, var(--c-dark-a), var(--c-dark-b));
  /* The hero is built from light, not from a photo: there is no hero image and
     there may never be one. A gold rake across a warm dark carries the brand
     on its own. */
  --grad-hero:      radial-gradient(120% 95% at 82% 6%, rgba(212, 175, 55, .16) 0%, rgba(212, 175, 55, .04) 38%, transparent 68%), linear-gradient(168deg, #14120c 0%, #0b0a08 100%);
  --grad-hero-veil: linear-gradient(160deg, var(--c-hero-veil-top) 0%, var(--c-hero-veil-bot) 100%);
  /* 45° hatch on the empty plate: it is what makes a missing photo read as
     deliberate rather than as a failed load. */
  --grad-plate:     repeating-linear-gradient(45deg, var(--c-plate) 0 7px, var(--c-plate-line) 7px 14px);
  --grad-skeleton:  linear-gradient(90deg, var(--c-skeleton-a) 25%, var(--c-skeleton-b) 50%, var(--c-skeleton-a) 75%);
  --grad-img-fade:  linear-gradient(to top, rgba(0, 0, 0, .88) 0%, rgba(0, 0, 0, .15) 70%);
  --grad-accent-line: linear-gradient(90deg, transparent, var(--c-primary), transparent);
  /* Edge fade for a horizontally scrolling row (.chip-row). A MASK: only the
     alpha is read, so the black here is not a colour anyone sees. */
  --mask-fade-x: linear-gradient(90deg, transparent 0, #000 var(--sp-4), #000 calc(100% - var(--sp-6)), transparent 100%);
  /* A low gold glow rising from the bottom edge of an illustration tile: it puts
     the drawing on a lit surface instead of floating it in black. */
  --grad-tile-glow: radial-gradient(85% 65% at 50% 108%, rgba(212, 175, 55, .16) 0%, rgba(212, 175, 55, .04) 45%, transparent 72%);
  /* A soft ellipse a product stands on. The client's packshots will arrive with
     the background cut out, and a cut-out object with nothing under it reads as
     pasted on; this is the floor. */
  --grad-pedestal:  radial-gradient(38% 9% at 50% 84%, rgba(212, 175, 55, .20) 0%, rgba(212, 175, 55, .05) 60%, transparent 100%);
  /* The one light sweep on the page, across the hero art. */
  --grad-rake:      linear-gradient(105deg, transparent 32%, rgba(255, 231, 160, .09) 50%, transparent 68%);
  /* Washes used INSIDE the drawings — an SVG fill cannot read a gradient token,
     but it can read a colour one. */
  --c-art-fill:      rgba(212, 175, 55, .07);
  --c-art-fill-strong: rgba(212, 175, 55, .16);

  /* ── shadows ──────────────────────────────────────────────
     A dark page cannot show depth with a black shadow. Elevation here is a
     lighter border plus a gold glow on the interactive elements; the shadows
     below only separate floating layers from the page. */
  --sh-1:      0 1px 0 var(--c-border);
  --sh-2:      0 10px 30px rgba(0, 0, 0, .55);
  --sh-card:   none;
  --sh-card-hover: 0 8px 26px rgba(0, 0, 0, .5);
  --sh-drawer: 4px 0 40px rgba(0, 0, 0, .7);
  --sh-modal:  0 16px 50px rgba(0, 0, 0, .75);
  --sh-float:  0 8px 28px rgba(0, 0, 0, .6);
  --sh-text:   0 1px 4px rgba(0, 0, 0, .7);
  --sh-text-sm:0 1px 3px rgba(0, 0, 0, .65);
  --ring-focus:      0 0 0 3px rgba(124, 192, 255, .30);
  --ring-focus-dark: 0 0 0 3px rgba(124, 192, 255, .30);

  /* ── inline SVG data URIs ─────────────────────────────────
     %23 is a url-encoded '#'. Kept here so the DoD grep over style.css stays
     clean and so a palette change touches one file, not several. */
  --img-select-arrow: 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='%23a89f8c'/%3E%3C/svg%3E");
  --img-qty-plus:  url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 1v10M1 6h10' stroke='%23f4f1e8' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  --img-qty-minus: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 6h10' stroke='%2314110a' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");

  /* ── typography ───────────────────────────────────────── */
  --ff-head: 'Manrope', system-ui, sans-serif;
  --ff-body: 'Manrope', system-ui, sans-serif;
  --ff-ui:   'Manrope', system-ui, sans-serif;
  --ff-num:  'IBM Plex Mono', ui-monospace, monospace;

  /* ── spacing (4px grid) ───────────────────────────────── */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-section: clamp(48px, 7vw, 88px);
  --content-w: 68ch;

  /* ── radius ───────────────────────────────────────────── */
  --r:      6px;
  --r-lg:   10px;
  --r-xl:   16px;
  --r-2xl:  24px;
  --r-pill: 999px;

  /* ── transitions ──────────────────────────────────────── */
  /* Shorthand pairs — for `transition`, where "duration easing" is one slot. */
  --t:    .15s ease;
  --t-md: .25s ease;

  /* Separate duration and easing tokens, because `animation` does NOT accept a
     pair in its duration slot: `animation: name var(--t-md) ease-out` expands to
     `.25s ease ease-out`, which is invalid, and the browser drops the WHOLE
     declaration silently. That is how the FAQ reveal shipped doing nothing. */
  --dur-fast: .15s;
  --dur-md:   .25s;
  --dur-slow: .5s;
  --dur-float: 6s;    /* One slow breath on the hero capsule — and it stops, see home.css */
  --dur-rake:  9s;    /* The light sweep across the hero art */
  --ease-out: cubic-bezier(.22, .61, .36, 1);
  --ease-in-out: cubic-bezier(.45, 0, .55, 1);

  /* ── layout ───────────────────────────────────────────── */
  --max-w: 1200px;
  --header-h: 64px;
  --sticky-top: calc(var(--header-h) + var(--sp-4));
  --mini-cart-h: 56px;  /* The cart bar on the homepage below 1024px */
}