/*
 * ZARAK - Design Tokens
 * Authority: ZARAK_FINAL_STOREFRONT_IMPLEMENTATION_SPEC.md sections 3, 4, 28
 *            + forensic audit Z.16, Z.17, Z.18, Z.19, Z.20, Y.11
 *
 * THIS IS THE ONLY FILE IN WHICH A BRAND-COLOUR HEX LITERAL MAY APPEAR.
 * Hard CI gate 11 fails the build if a brand hex appears anywhere else.
 *
 * Group 1 (brand) is LOCKED and must never be altered - DECISIONS.md ADR-016.
 * Group 2 (UI/semantic) is derived and may be extended.
 */

/* ============================================================
   FONT FACES - Poppins, the single family.

   OWNER-APPROVED (DECISIONS.md ADR-028), superseding ADR-020. One
   family still drives body and headings.

   Four weights, latin subset, self-hosted, font-display: swap.
   30.7 KB against the old 47.4 KB - a 16.7 KB saving.

   Poppins is geometric: wider, taller x-height, longer ascenders.
   Sizes and line-heights below are retuned, not carried over.
   ============================================================ */

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/poppins-400.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/poppins-500.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/poppins-600.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/poppins-700.woff2") format("woff2");
}
:root {
  /* ==========================================================
     1. BRAND COLOURS - LOCKED. NEVER ALTERED. (spec 4.1)
     ========================================================== */
  --zk-cocoa: #422c15;   /* primary text, primary button, footer, announcement bar */
  --zk-gold:  #d4a32c;   /* SURFACE ONLY - never text on a light background.
                            Golden Dust, restored per ADR-021. ADR-019 had moved
                            this to #b9a25c; the owner has clarified the secondary
                            must be the one IN the logo. Verified by sampling the
                            master artwork, which contains exactly two colours:
                            #422b15 (91.94% of opaque pixels) and #d4a32c (8.06%). */
  --zk-ivory: #f7f3ec;   /* page background */
  --zk-white: #ffffff;   /* elevated cards, drawers, inputs, image wells */
  --zk-black: #000000;

  /* ==========================================================
     2. UI / SEMANTIC COLOURS - derived, extendable (spec 4.2)
     ========================================================== */
  --zk-gold-deep: #8a6a12;  /* gold-family TEXT and links - 5.06:1 on white */
  --zk-sale:      #c0272d;  /* sale price, discount badge fill */
  --zk-success:   #1e7a46;  /* in stock, added to cart, confirmed */
  --zk-warning:   #9a3412;  /* low stock, cautions */
  /* Near-black for information and policy pages. Deep Cocoa is the brand's
     text colour on the storefront, but across a long policy page it reads
     brown and dates the page. This is a neutral ink with just enough warmth
     to sit beside the brand: 16.9:1 on white. Owner design decision. */
  --zk-ink:       #1c1917;
  --zk-muted:     #6b6257;  /* secondary text, compare-at, helper */
  --zk-hairline:  #e7dfd1;  /* borders, dividers, input borders */
  --zk-disabled:  #efeae0;  /* disabled surfaces */
  --zk-focus:     #422c15;  /* 2px ring at 2px offset */

  /* Surface strategy - spec 4.5. This is an OVERRIDE of audit Y.6/Y.11:
     image wells are WHITE, not ivory, because the catalogue is shot on white. */
  --zk-surface-page:   var(--zk-white);   /* owner: every page ground is white */
  --zk-surface-card:   var(--zk-white);
  --zk-surface-well:   var(--zk-white);
  --zk-surface-invert: var(--zk-cocoa);
  --zk-surface-accent: var(--zk-gold);

  /* Hover fills - the "darken about 8 percent, no hue change" rule (Y.9).
     Precomputed so no filter or blend is needed and no hue shift can occur. */
  --zk-cocoa-hover: #35230f;
  --zk-cocoa-soft:  #5c3f21;   /* buttons/badges on light; full cocoa glares at 13:1 */
  --zk-cocoa-soft-hover: #4a3219;
  --zk-gold-hover:  #c39628;  /* 8% darker, hue held at 43deg; cocoa on it = 4.84:1 */

  /* ==========================================================
     3. TYPOGRAPHY (spec 3, audit Z.16)
     ========================================================== */
  --zk-font-display: "Poppins", "Segoe UI", system-ui, -apple-system, sans-serif;
  --zk-font-ui:      "Poppins", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* Line heights - explicit, never `normal`. One step looser than the
     previous family: Poppins' taller x-height and longer descenders made the
     old values let two-line text nearly touch. */
  --zk-lh-heading: 1.25;
  --zk-lh-body:    1.6;
  --zk-lh-ui:      1.35;

  /* Weights - the only five that ship */
  --zk-fw-regular:  400;
  --zk-fw-medium:   500;
  --zk-fw-semibold: 600;
  --zk-fw-bold:     700;

  /* Type scale - mobile-first; desktop values at 1024px below. Headings step
     DOWN 1px: Poppins sets larger at the same size, so the old numbers
     inflated every heading. Body sizes stay - shrinking them would trade
     readability for a metric. */
  --zk-fs-display:  29px;
  --zk-fs-h1:       23px;
  --zk-fs-h2:       19px;
  --zk-fs-h3:       17px;
  --zk-fs-body:     15px;
  --zk-fs-body-sm:  13px;
  --zk-fs-caption:  12px;
  --zk-fs-price-lg: 22px;
  --zk-fs-price-md: 15px;
  --zk-fs-button:   14px;

  /* ==========================================================
     4. SPACING - 4-point scale (spec 28, audit Z.18)
     No value outside this scale may ship. Enforced by stylelint.
     ========================================================== */
  --zk-space-1:  4px;
  --zk-space-2:  8px;
  --zk-space-3:  12px;
  --zk-space-4:  16px;
  --zk-space-5:  20px;
  --zk-space-6:  24px;
  --zk-space-7:  32px;
  --zk-space-8:  40px;
  --zk-space-9:  48px;
  --zk-space-10: 64px;
  --zk-space-11: 80px;

  /* ==========================================================
     5. RADIUS (spec 28, audit Y.11)
     ========================================================== */
  --zk-radius-sm:   6px;    /* badges on images, small chips, inputs */
  --zk-radius-md:   10px;   /* buttons, select, filter chips */
  --zk-radius-lg:   14px;   /* product cards, category tiles, modals */
  --zk-radius-hero: 20px;   /* homepage hero frame, measured from reference */
  --zk-radius-pill: 999px;  /* discount pills, cart bubble, tags */

  /* ==========================================================
     6. ELEVATION - three levels only. Flat is the default. (spec 28)
     Banned: gradients, glassmorphism, gloss, 3D, glow,
             coloured shadows, inner shadows, decorative blur.
     ========================================================== */
  --zk-shadow-1: 0 1px 2px rgba(66, 44, 21, 0.06);
  --zk-shadow-2: 0 6px 20px rgba(66, 44, 21, 0.1);

  /* ==========================================================
     7. FOCUS (spec 4.4 rule 2 - gold is NEVER the focus ring)
     ========================================================== */
  --zk-focus-width:  2px;
  --zk-focus-offset: 2px;

  /* ==========================================================
     8. LAYOUT (audit Z.19)
     ========================================================== */
  --zk-container: 1440px;
  --zk-gutter: var(--zk-space-4);   /* 16 mobile / 24 tablet / 32 desktop */
  --zk-grid-cols: 2;
  --zk-grid-gap: var(--zk-space-3);

  /* Control sizing - 44px is the accessibility floor (spec 29 item 1) */
  --zk-control-h:    44px;
  --zk-control-h-lg: 48px;
  --zk-tap-min:      44px;

  /* ==========================================================
     9. Z-INDEX SCALE (audit Z.15)
     At most two fixed bars on screen at once.
     ========================================================== */
  /* The bottom nav's MEASURED height. The spec says 58px and three rules
     hardcoded that, but the bar renders 61px, so the sticky purchase bar
     computed from 58 sat 3px under it. Anything stacking above the nav should
     use this token rather than the spec number. */
  --zk-bottomnav-h:  61px;

  --zk-z-header:     100;
  --zk-z-bottomnav:  120;
  --zk-z-sticky-atc: 130;
  --zk-z-fab:        140;
  --zk-z-backdrop:   190;
  --zk-z-drawer:     200;
  --zk-z-modal:      300;
  --zk-z-toast:      400;

  /* ==========================================================
     10. MOTION
     ========================================================== */
  --zk-dur-fast: 150ms;
  --zk-dur-base: 180ms;
  --zk-dur-slow: 280ms;
  --zk-ease: cubic-bezier(0.4, 0, 0.2, 1);

  /* ==========================================================
     11. INLINE ICON ASSETS
     Encoded here because a data URI must carry a literal colour and
     hard gate 11 permits brand hex only in this file.
     %23422c15 is the URL-encoded form of the Deep Cocoa token.
     ========================================================== */
  --zk-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23422c15' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
}

/*
 * BREAKPOINTS - exactly six values. No others may be used in a media query.
 * Custom properties cannot be used inside a media query prelude, so the
 * canonical values are recorded here and enforced by stylelint:
 *   xs 360 | sm 640 | md 900 | lg 1024 | xl 1200 | 2xl 1440
 */

@media (min-width: 640px) {
  :root {
    --zk-gutter: var(--zk-space-6);
    --zk-grid-cols: 3;
    --zk-grid-gap: var(--zk-space-4);
  }
}

@media (min-width: 900px) {
  :root {
    --zk-grid-cols: 4;
    --zk-grid-gap: var(--zk-space-5);
  }
}

@media (min-width: 1024px) {
  :root {
    --zk-gutter: var(--zk-space-7);

    /* Desktop type scale - spec 3.4 / audit Z.16 */
    --zk-fs-display:  38px;
    --zk-fs-h1:       30px;
    --zk-fs-h2:       23px;
    --zk-fs-h3:       18px;
    --zk-fs-price-lg: 26px;
    --zk-fs-button:   15px;
  }
}

@media (min-width: 1200px) {
  :root { --zk-grid-cols: 5; }
}

@media (min-width: 1440px) {
  :root { --zk-grid-gap: var(--zk-space-6); }
}