/* =================================================================
   OliWorks Design System — Colors & Type
   =================================================================
   Single source of truth for OliWorks brand visuals.
   Extracted from the live Shopify theme (Impulse 6.0.1).

   Token naming: --ow-{category}-{semantic}
   Categories: color, font, fs (font-size), lh (line-height),
               ls (letter-spacing), fw (font-weight),
               radius, shadow, space, dur, ease

   Two coexisting button systems:
     - Site primary: near-black #111, 14px tracked uppercase  (default)
     - Referral CTA: navy #002244, 20px Tenor Sans            (legacy)
   Default to site primary unless replicating the referral page.
   ================================================================= */


/* ---------- Webfonts ----------
   Tenor Sans   → Google Font (free; loaded below).
   Twentieth Century is a paid Shopify font and is NOT available off-Shopify.
   Substituted with Jost — the closest free geometric sans on Google Fonts.
   ⚠ FLAG TO USER: ship licensed Twentieth Century files into fonts/ to match
   pixel-perfectly. Until then, Jost is the production fallback.
*/
@import url("https://fonts.googleapis.com/css2?family=Tenor+Sans&family=Jost:ital,wght@0,300..700;1,300..700&display=swap");


:root {

  /* =========================================================
     COLOR — Raw palette
     ========================================================= */

  /* Neutrals — warm-leaning, the foundation */
  --ow-color-black:            #000000;   /* body text, nav text, footer */
  --ow-color-ink:              #111111;   /* PRIMARY button bg, near-black */
  --ow-color-coal:             #0f0f0f;   /* placeholder behind large imagery */
  --ow-color-charcoal:         #1c1d1d;   /* price text, sale tags */
  --ow-color-paper:            #ffffff;   /* page background, button fg */
  --ow-color-cream:            #f9f9f9;   /* card surfaces, off-white tier */
  --ow-color-stone:            #ededed;   /* alt section background */
  --ow-color-overlay:          #e6e6e6;   /* modal scrim */
  --ow-color-mist:             #e8e8e1;   /* WARM-TINTED border — the brand's "expressive" gray */
  --ow-color-fog:              #d9d9d9;   /* form input border */
  --ow-color-ash:              #b3b3b3;   /* placeholder text */

  /* Brand colors — used sparingly, for emphasis only */
  --ow-color-navy:             #002244;   /* announcement bar, dark sections, referral CTA */
  --ow-color-steel:            #385c81;   /* secondary blue accent (fine-print card, image borders) */

  /* Semantic accents */
  --ow-color-savings:          #c20000;   /* sale price text */
  --ow-color-alert:            #ff4f33;   /* cart count dot */


  /* =========================================================
     COLOR — Semantic (use these in components)
     ========================================================= */

  /* Foreground */
  --ow-fg-1:                   var(--ow-color-black);    /* primary text */
  --ow-fg-2:                   var(--ow-color-charcoal); /* muted text (prices) */
  --ow-fg-3:                   var(--ow-color-ash);      /* placeholder */
  --ow-fg-on-dark:             var(--ow-color-paper);    /* on navy/black sections */
  --ow-fg-savings:             var(--ow-color-savings);
  --ow-fg-form-label:          #1e1e1e;

  /* Backgrounds (named bg1..3 in order of prominence) */
  --ow-bg-1:                   var(--ow-color-paper);    /* page canvas */
  --ow-bg-2:                   var(--ow-color-cream);    /* subtle card surface */
  --ow-bg-3:                   var(--ow-color-stone);    /* alt section */
  --ow-bg-dark:                var(--ow-color-navy);     /* dark/feature section */
  --ow-bg-image-placeholder:   var(--ow-color-coal);     /* before-load behind images */

  /* Borders */
  --ow-border-subtle:          var(--ow-color-mist);     /* default warm border */
  --ow-border-form:            var(--ow-color-fog);

  /* Buttons — Site Primary (the canonical CTA) */
  --ow-btn-primary-bg:         var(--ow-color-ink);
  --ow-btn-primary-fg:         var(--ow-color-paper);

  /* Buttons — Secondary (outline) */
  --ow-btn-secondary-bg:       transparent;
  --ow-btn-secondary-fg:       var(--ow-color-black);
  --ow-btn-secondary-border:   var(--ow-color-mist);

  /* Buttons — Navy CTA (referral page only) */
  --ow-btn-navy-bg:            var(--ow-color-navy);
  --ow-btn-navy-fg:            var(--ow-color-cream);

  /* Header / chrome */
  --ow-header-bg:              var(--ow-color-paper);
  --ow-header-fg:              var(--ow-color-black);
  --ow-announcement-bg:        var(--ow-color-navy);
  --ow-announcement-fg:        var(--ow-color-paper);


  /* =========================================================
     TYPOGRAPHY — Families
     ========================================================= */

  --ow-font-heading:           "Tenor Sans", "Times New Roman", serif;
  --ow-font-body:              "Jost", "Twentieth Century", "Futura", "Century Gothic", sans-serif;
  --ow-font-display:           var(--ow-font-body);   /* referral hero uses body font as display */
  --ow-font-mono:              ui-monospace, "SF Mono", Menlo, Consolas, monospace;


  /* =========================================================
     TYPOGRAPHY — Scale
     ========================================================= */

  --ow-fs-display:             50px;   /* hero h1 — display register */
  --ow-fs-h1:                  36px;   /* default theme h1 */
  --ow-fs-h2:                  40px;   /* section headings */
  --ow-fs-h3:                  32px;   /* sub-section headings */
  --ow-fs-h4:                  26px;   /* card titles, in body font */
  --ow-fs-h5:                  22px;   /* sub-headings */
  --ow-fs-body-lg:             20px;   /* referral body, emphasis */
  --ow-fs-body:                18px;   /* default body */
  --ow-fs-nav:                 16px;   /* nav links (uppercase) */
  --ow-fs-small:               16px;   /* fine print, form labels */
  --ow-fs-button:              14px;   /* primary .btn */
  --ow-fs-caption:             11px;   /* image-handle labels */

  /* Line heights */
  --ow-lh-tight:               1;      /* h1 */
  --ow-lh-display:             1.2;    /* display headings */
  --ow-lh-snug:                1.3;    /* body-large */
  --ow-lh-body:                1.4;    /* default body, nav */
  --ow-lh-button:              1.42;

  /* Letter spacing */
  --ow-ls-heading:             0.025em;
  --ow-ls-body:                0.025em;
  --ow-ls-nav:                 0.025em;
  --ow-ls-button:              0.3em;     /* primary button — wide tracking */
  --ow-ls-button-navy:         1.2px;
  --ow-ls-h4:                  0.78px;
  --ow-ls-caption:             0.42px;

  /* Weights */
  --ow-fw-regular:             400;
  --ow-fw-semibold:             600;
  --ow-fw-bold:                 700;


  /* =========================================================
     SHAPE
     ========================================================= */

  --ow-radius-button:          3px;     /* site primary .btn — round-slight */
  --ow-radius-button-cta:      8px;     /* referral CTA */
  --ow-radius-card:            20px;    /* referral cards */
  --ow-radius-image:           16px;    /* image blocks */
  --ow-radius-form:            8px;


  /* =========================================================
     SPACING — 4px base, with named tokens for section rhythm
     ========================================================= */

  --ow-space-1:                4px;
  --ow-space-2:                8px;
  --ow-space-3:                12px;
  --ow-space-4:                16px;
  --ow-space-5:                20px;
  --ow-space-6:                24px;
  --ow-space-8:                32px;
  --ow-space-10:               40px;
  --ow-space-12:               48px;
  --ow-space-16:               64px;
  --ow-space-20:               80px;

  --ow-space-container-mobile:  17px;
  --ow-space-container-desktop: 40px;
  --ow-space-section-desktop:   75px;
  --ow-space-section-small:     30px;

  --ow-container-max:           1500px;
  --ow-container-narrow:        1000px;
  --ow-container-tiny:          450px;


  /* =========================================================
     SHADOWS — used very sparingly. Brand is matte, not glossy.
     ========================================================= */

  --ow-shadow-text-on-image:   0 1px 3px rgba(0, 0, 0, 0.6);  /* hero handle labels */
  --ow-shadow-card:            0 2px 8px rgba(0, 0, 0, 0.06); /* product card lift */
  --ow-shadow-card-hover:      0 6px 20px rgba(0, 0, 0, 0.10);


  /* =========================================================
     MOTION
     ========================================================= */

  --ow-dur-fast:               200ms;
  --ow-dur-base:               300ms;
  --ow-dur-slow:               350ms;
  --ow-ease:                   ease-in-out;


  /* =========================================================
     BREAKPOINTS  (for JS — for CSS use @media directly)
     Desktop breakpoint is 769px — Impulse convention, NOT 768.
     ========================================================= */

  --ow-bp-desktop:             769px;
}


/* =================================================================
   SEMANTIC ELEMENT STYLES
   Apply automatically to common HTML elements. Override per-component.
   ================================================================= */

html, body {
  font-family: var(--ow-font-body);
  font-size: var(--ow-fs-body);
  line-height: var(--ow-lh-body);
  letter-spacing: var(--ow-ls-body);
  color: var(--ow-fg-1);
  background: var(--ow-bg-1);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3 {
  font-family: var(--ow-font-heading);
  font-weight: var(--ow-fw-regular);
  letter-spacing: var(--ow-ls-heading);
  text-transform: uppercase;          /* Impulse theme setting heading_capitalize:true */
  margin: 0 0 var(--ow-space-5);
}

h1 {
  font-size: var(--ow-fs-h1);
  line-height: var(--ow-lh-tight);
}

h2 {
  font-size: var(--ow-fs-h2);
  line-height: var(--ow-lh-display);
  letter-spacing: 0;
}

h3 {
  font-size: var(--ow-fs-h3);
  line-height: 1.15;
  letter-spacing: 0;
}

h4, h5 {
  font-family: var(--ow-font-body);   /* h4/h5 SWITCH to body font, bold */
  font-weight: var(--ow-fw-bold);
  margin: 0 0 var(--ow-space-4);
}

h4 {
  font-size: var(--ow-fs-h4);
  letter-spacing: var(--ow-ls-h4);
}

h5 {
  font-size: var(--ow-fs-h5);
  font-weight: var(--ow-fw-semibold);
}

p {
  font-family: var(--ow-font-body);
  font-size: var(--ow-fs-body);
  line-height: var(--ow-lh-body);
  margin: 0 0 var(--ow-space-4);
  text-wrap: pretty;
}

a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: opacity var(--ow-dur-fast) var(--ow-ease);
}
a:hover { opacity: 0.7; }

small {
  font-size: var(--ow-fs-small);
  line-height: var(--ow-lh-snug);
}

strong, b { font-weight: var(--ow-fw-bold); }
em, i    { font-weight: var(--ow-fw-semibold); font-style: italic; }

::selection { background: var(--ow-color-navy); color: var(--ow-color-paper); }