/* ==========================================================================
   WCLOCKS — Design Tokens
   Extracted 1:1 from Shopify theme "Focal 2.4" (theme 156017655946)
   Sources: config/settings_data.json + snippets/css-variables.liquid
   Every value below is the resolved output of the live Liquid, not an
   approximation. Do not hand-tune these — regenerate from Shopify.
   ========================================================================== */

:root {
  /* ---- Brand palette (settings_data.json "current") ---------------------- */
  --heading-color: 40, 40, 40;              /* #282828 */
  --text-color: 40, 40, 40;                 /* #282828 */
  --background: 255, 255, 255;              /* #ffffff */
  --secondary-background: 245, 245, 245;    /* #f5f5f5 */

  /* Derived in Liquid via color_mix(background, text_color, 85 / 60) */
  --border-color: 223, 223, 223;            /* #dfdfdf — 85% bg + 15% text */
  --border-color-darker: 169, 169, 169;     /* #a9a9a9 — 60% bg + 40% text */

  --success-color: 46, 158, 123;            /* #2e9e7b */
  --success-background: 214, 236, 229;      /* color_mix(bg, success, 80) */
  --error-color: 222, 42, 42;               /* #de2a2a */
  --error-background: 252, 240, 240;        /* color_mix(bg, error, 93) */
  --accent-color: 64, 93, 230;              /* #405de6 */

  /* ---- Buttons ---------------------------------------------------------- */
  --primary-button-background: 40, 40, 40;      /* #282828 */
  --primary-button-text-color: 255, 255, 255;   /* #ffffff */
  --secondary-button-background: 243, 255, 52;  /* #f3ff34 — signature acid yellow */
  --secondary-button-text-color: 40, 40, 40;    /* #282828 */

  /* ---- Product states --------------------------------------------------- */
  --product-star-rating: 196, 160, 85;          /* #c4a055 — Judge.me gold */
  --product-on-sale-accent: 132, 86, 64;        /* #845640 — bronze, NOT red */
  --product-sold-out-accent: 91, 91, 91;        /* #5b5b5b */
  --product-custom-label-background: 64, 93, 230;
  --product-custom-label-text-color: 255, 255, 255;
  --product-custom-label-2-background: 243, 255, 52;
  --product-custom-label-2-text-color: 0, 0, 0;
  --product-in-stock-text-color: 46, 158, 123;
  --product-low-stock-text-color: 222, 42, 42;

  /* ---- Header / footer -------------------------------------------------- */
  --header-background: 255, 255, 255;        /* #ffffff */
  --header-text-color: 40, 40, 40;           /* #282828 */
  --footer-background: 40, 40, 40;           /* #282828 */
  --footer-text-color: 255, 255, 255;        /* #ffffff */
  --announcement-background: 0, 0, 0;        /* #000000 */
  --announcement-text-color: 255, 255, 255;

  /* ---- Typography ------------------------------------------------------- */
  /* Shopify: heading_font montserrat_n5, text_font montserrat_n4 */
  --heading-font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --heading-font-weight: 500;
  --heading-font-style: normal;
  --heading-text-transform: uppercase;
  --text-font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --text-font-weight: 400;
  --text-font-style: normal;
  --text-font-bold-weight: 600;
  --base-font-size: 13px;

  /* heading_font_size = "small" — mobile scale */
  --heading-xxsmall-font-size: 10px;
  --heading-xsmall-font-size: 10px;
  --heading-small-font-size: 11px;
  --heading-large-font-size: 32px;
  --heading-h1-font-size: 32px;
  --heading-h2-font-size: 28px;
  --heading-h3-font-size: 26px;
  --heading-h4-font-size: 22px;
  --heading-h5-font-size: 18px;
  --heading-h6-font-size: 16px;

  /* ---- Radii (button_border_radius 2, block_border_radius "small") ------- */
  --button-border-radius: 2px;
  --block-border-radius: 8px;
  --block-border-radius-reduced: 4px;
  --color-swatch-border-radius: 0px;        /* round_color_swatches: false */

  /* ---- Sizing ----------------------------------------------------------- */
  --button-height: 48px;
  --button-small-height: 40px;
  --form-input-field-height: 48px;
  --form-input-gap: 16px;
  --form-submit-margin: 24px;
  --product-list-block-spacing: 32px;
  --icon-stroke-width: 1.5;

  /* ---- Layout grid ------------------------------------------------------ */
  --container-max-width: 1600px;
  --container-gutter: 24px;
  --container-max-width-minus-gutters: calc(var(--container-max-width) - (var(--container-gutter)) * 2);
  --container-outer-width: max(calc((100vw - var(--container-max-width-minus-gutters)) / 2), var(--container-gutter));
  --container-outer-margin: var(--container-outer-width);
  --container-inner-width: calc(100vw - var(--container-outer-width) * 2);

  --grid-column-count: 10;
  --grid-gap: 24px;
  --grid-column-width: calc((100vw - var(--container-outer-width) * 2 - var(--grid-gap) * (var(--grid-column-count) - 1)) / var(--grid-column-count));

  /* vertical_spacing = "medium" */
  --vertical-breather: 36px;
  --vertical-breather-tight: 36px;
}

/* ==========================================================================
   WCLOCKS BRAND LAYER
   The 15 custom `wcl-*` sections do NOT use Focal's theme settings. They carry
   their own palette — a luxury gold on warm cream — hard-coded in each section's
   scoped <style> block. Extracted here so the child theme has one source of
   truth instead of the same hex repeated across fifteen files.
   ========================================================================== */

:root {
  /* Signature gold — appears in hero, trust bar, review stars, all accents */
  --wcl-gold: #C4A055;
  --wcl-gold-hover: #D0AC5F;
  --wcl-gold-08: rgba(196, 160, 85, 0.08);
  --wcl-gold-10: rgba(196, 160, 85, 0.10);
  --wcl-gold-15: rgba(196, 160, 85, 0.15);
  --wcl-gold-25: rgba(196, 160, 85, 0.25);
  --wcl-gold-45: rgba(196, 160, 85, 0.45);

  /* Warm neutrals used by the section backgrounds */
  --wcl-cream: #FAF8F5;          /* trust bar, "cream" bg_style sections */
  --wcl-cream-border: #E8E2D6;
  --wcl-ink: #111111;            /* section headings — darker than Focal's #282828 */
  --wcl-ink-soft: #6A6A6A;
  --wcl-black: #050505;          /* hero ground */

  /* Hero */
  --wcl-hero-min-height: 680px;
  --wcl-hero-overlay: linear-gradient(115deg,
      rgba(5,5,5,0.88) 0%,
      rgba(5,5,5,0.65) 55%,
      rgba(5,5,5,0.35) 100%);
  --wcl-hero-max-width: 1400px;   /* note: narrower than Focal's 1600px container */
  --wcl-hero-gutter: 64px;

  /* Section rhythm used by the wcl-* sections */
  --wcl-section-max-width: 1400px;
  --wcl-eyebrow-size: 10.5px;
  --wcl-eyebrow-tracking: 0.28em;
}

/* Focal breakpoint 1 — 741px */
@media screen and (min-width: 741px) {
  :root {
    --container-gutter: 40px;
    --grid-column-count: 20;
    --vertical-breather: 48px;
    --vertical-breather-tight: 48px;

    --heading-xsmall-font-size: 11px;
    --heading-small-font-size: 12px;
    --heading-large-font-size: 48px;
    --heading-h1-font-size: 48px;
    --heading-h2-font-size: 36px;
    --heading-h3-font-size: 30px;
    --heading-h4-font-size: 22px;
    --heading-h5-font-size: 18px;
    --heading-h6-font-size: 16px;

    --form-input-field-height: 52px;
    --form-submit-margin: 32px;
    --button-height: 52px;
    --button-small-height: 44px;
  }
}

/* Focal breakpoint 2 — 1200px */
@media screen and (min-width: 1200px) {
  :root {
    --vertical-breather: 64px;
    --vertical-breather-tight: 48px;
    --product-list-block-spacing: 48px;

    --heading-large-font-size: 58px;
    --heading-h1-font-size: 50px;
    --heading-h2-font-size: 44px;
    --heading-h3-font-size: 32px;
    --heading-h4-font-size: 26px;
    --heading-h5-font-size: 22px;
    --heading-h6-font-size: 16px;
  }
}

/* Focal breakpoint 3 — 1600px */
@media screen and (min-width: 1600px) {
  :root {
    --vertical-breather: 64px;
    --vertical-breather-tight: 48px;
  }
}