/* ==========================================================================
   CLOZSY - DESIGN TOKENS
   --------------------------------------------------------------------------
   SINGLE SOURCE OF TRUTH: the Elementor Kit (Site Settings > Global Colors).
   Every colour below reads Elementor's generated global custom property and
   falls back to the literal hex only if the kit stylesheet fails to load.
   Change a colour ONCE, in Elementor, and both Elementor widgets and all
   custom CSS follow automatically.

   Elementor global map:
     --e-global-color-primary   Accent            #C8A96A
     --e-global-color-secondary Accent Hover      #DCC08C
     --e-global-color-text      Text Primary      #F6F6F7
     --e-global-color-accent    Text Secondary    #A8A8B3
     --e-global-color-clzbg     Background        #0B0B0D
     --e-global-color-clzsurf   Surface           #131317
     --e-global-color-clzelev   Surface Elevated  #1B1B21
     --e-global-color-clzhov    Surface Hover     #23232B
     --e-global-color-clzbord   Border            #27272F
     --e-global-color-clzbords  Border Strong     #3A3A45
     --e-global-color-clzmuted  Text Muted        #7C7C89
     --e-global-color-clzoncc   On Accent         #0B0B0D
     --e-global-color-clzsucc   Success           #3DBE8B
     --e-global-color-clzwarn   Warning           #F5A524
     --e-global-color-clzerr    Error             #E5565B

   Tokens with no Elementor equivalent (spacing, radius, shadow, motion,
   z-index) are authored here and are authoritative.
   ========================================================================== */

body {
  /* ---- Colour ----
     NOT declared here. inc/design-tokens.php reads the active Elementor Kit
     and emits every --clz-* colour inline on each page, so the tokens exist
     even on templates where Elementor does not render. That file holds the
     token-to-kit-id map and the only fallback hex values in the project. ---- */

  /* Translucent derivatives. Authored as rgba rather than colour-mix so the
     tokens resolve identically across all supported browsers. */
  --clz-accent-soft:     rgba(200, 169, 106, 0.12);
  --clz-accent-ring:     rgba(200, 169, 106, 0.35);
  --clz-overlay:         rgba(5, 5, 7, 0.72);

  /* ---- Typography ---- */
  --clz-font-heading: "Outfit", "Helvetica Neue", Arial, sans-serif;
  --clz-font-body:    "Manrope", "Helvetica Neue", Arial, sans-serif;

  --clz-fw-regular:  400;
  --clz-fw-medium:   500;
  --clz-fw-semibold: 600;
  --clz-fw-bold:     700;

  /* Fluid scale. Endpoints match the Elementor Kit desktop/mobile values so
     Elementor headings and custom markup resolve to the same sizes. */
  --clz-text-h1:   clamp(2.50rem, 1.55rem + 3.10vw, 4.25rem);
  --clz-text-h2:   clamp(2.00rem, 1.55rem + 1.75vw, 3.00rem);
  --clz-text-h3:   clamp(1.50rem, 1.32rem + 0.70vw, 2.00rem);
  --clz-text-h4:   clamp(1.25rem, 1.18rem + 0.25vw, 1.50rem);
  --clz-text-h5:   1.125rem;
  --clz-text-h6:   0.875rem;
  --clz-text-lg:   1.125rem;
  --clz-text-base: 1rem;
  --clz-text-sm:   0.875rem;
  --clz-text-xs:   0.75rem;

  --clz-lh-tight:  1.12;
  --clz-lh-snug:   1.3;
  --clz-lh-normal: 1.65;

  --clz-ls-tight:  -0.02em;
  --clz-ls-normal: 0;
  --clz-ls-wide:   0.03em;
  --clz-ls-caps:   0.12em;

  /* ---- Spacing (8px base) ---- */
  --clz-space-1:  0.25rem;
  --clz-space-2:  0.5rem;
  --clz-space-3:  0.75rem;
  --clz-space-4:  1rem;
  --clz-space-5:  1.5rem;
  --clz-space-6:  2rem;
  --clz-space-7:  3rem;
  --clz-space-8:  4rem;
  --clz-space-9:  6rem;
  --clz-space-10: 8rem;

  /* Responsive rhythm. These three re-declare at the breakpoints below and
     are the only spacing tokens that change per device. */
  --clz-section-y:   6rem;
  --clz-container-x: 1.5rem;
  --clz-grid-gap:    1.5rem;

  /* ---- Layout ---- */
  --clz-width-narrow:  720px;
  --clz-width-content: 1240px;
  --clz-width-wide:    1440px;

  /* ---- Radius. Restrained: premium reads sharp, not pill-shaped. ---- */
  --clz-radius-xs:   2px;
  --clz-radius-sm:   4px;
  --clz-radius-md:   8px;
  --clz-radius-lg:   12px;
  --clz-radius-full: 999px;

  /* ---- Elevation ---- */
  --clz-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.40);
  --clz-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.45);
  --clz-shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.50);
  --clz-ring:      0 0 0 3px var(--clz-accent-ring);

  /* ---- Motion ---- */
  --clz-ease:          cubic-bezier(0.4, 0, 0.2, 1);
  --clz-duration-fast: 150ms;
  --clz-duration:      220ms;
  --clz-duration-slow: 400ms;
  --clz-transition:    var(--clz-duration) var(--clz-ease);

  /* ---- Iconography ----
     A data URI cannot read a CSS custom property, so the one decorative glyph
     in this system (the native <select> chevron) is centralised here rather
     than inlined at the point of use. It is the single intentional exception
     to token-driven colour. Keep it in step with --clz-text-secondary. ---- */
  --clz-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23A8A8B3' stroke-width='1.5'%3E%3Cpath d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");

  /* ---- Header ----
     Header-specific measurements. Declared here rather than inline so the
     sticky offset, bar heights and drawer widths live with every other token
     and can be reused by anything that must sit below the header. ---- */
  --clz-header-h:        80px;
  --clz-header-h-stuck:  68px;
  --clz-header-h-mobile: 66px;
  --clz-header-max:      1360px;
  --clz-header-x:        var(--clz-space-7);
  --clz-announce-h:      32px;
  --clz-logo-h:          38px;
  --clz-logo-h-stuck:    32px;
  --clz-logo-h-mobile:   26px;
  --clz-nav-gap:         var(--clz-space-7);
  --clz-icon:            20px;
  --clz-tap:             40px;
  --clz-drawer-w:        min(88vw, 380px);
  --clz-cart-drawer-w:   min(92vw, 400px);
  --clz-header-blur:     saturate(140%) blur(14px);

  /* ---- Z-index ---- */
  --clz-z-dropdown: 100;
  --clz-z-sticky:   200;
  --clz-z-header:   250;
  --clz-z-header:   250;
  --clz-z-overlay:  300;
  --clz-z-modal:    400;
  --clz-z-toast:    500;
}

/* Tablet. 1024px matches the Elementor Kit viewport_tablet value. */
@media (max-width: 1024px) {
  body {
    --clz-section-y:   4.5rem;
    --clz-container-x: 1.25rem;
    --clz-grid-gap:    1.25rem;
  }
}

/* Mobile. 767px matches the Elementor Kit viewport_mobile value. */
@media (max-width: 767px) {
  body {
    --clz-section-y:   3.5rem;
    --clz-container-x: 1rem;
    --clz-grid-gap:    1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  body {
    --clz-duration-fast: 1ms;
    --clz-duration:      1ms;
    --clz-duration-slow: 1ms;
  }
}