/* Style sheet for defining variables and tokens 
*/

/* ──────────────────────────────────
   1.  VARIABLES :root
   ────────────────────────────────── */
:root {
  /* Brand color
   Only these values should change per client/logo. https://oklch.com/
  ---------------------------------------------------------------------- */
  --brand-l:          75.65%;
  --brand-c:          0.14;
  --brand-h:          91.06;
  --brand-alpha:      1;
  --brand-color:      oklch(var(--brand-l) var(--brand-c) var(--brand-h) / var(--brand-alpha));

  /* Brand color 2 (if needed)
  ----------------------------------------------------------------------
  --brand-l2:;
  --brand-c2:;
  --brand-h2:;
  --brand-alpha-2:;
  --brand-color-2:;
  */

  /* Internal chroma caps
   These prevent automatic palette colors from becoming too vivid or
   falling outside sRGB too often when the hue changes.
  ---------------------------------------------------------------------- */
  --brand-c-surface:  min(var(--brand-c), 0.008);
  --brand-c-panel:    min(var(--brand-c), 0.035);
  --brand-c-mid:      min(var(--brand-c), 0.10);
  --brand-c-dark:     min(var(--brand-c), 0.065);
  --brand-c-ink:      min(var(--brand-c), 0.018);
  --brand-c-hue:      min(var(--brand-c), 0.08);

  /* Neutral version of the brand color.
   Useful for reducing saturation without changing perceived lightness.
  ---------------------------------------------------------------------- */
  --brand-neutral: oklch(var(--brand-l) 0 var(--brand-h) / var(--brand-alpha));

  /* Palette luminosity
  ---------------------------------------------------------------------- */
  --color-light-1: oklch(98% var(--brand-c-surface) var(--brand-h) / 1); /* ultra-light backgrounds */
  --color-light-2: oklch(92% var(--brand-c-panel)   var(--brand-h) / 1); /* panels/cards */
  --color-light-3: oklch(68% var(--brand-c-mid)     var(--brand-h) / 1); /* soft brand area / highlight */
  --color-light-4: oklch(38% var(--brand-c-dark)    var(--brand-h) / 1); /* dark brand tint */  
  --color-light-5: oklch(14% var(--brand-c-ink)     var(--brand-h) / 1); /* near-black branded ink */

  /* Palette saturation
   These preserve the brand lightness while progressively muting chroma.
  ---------------------------------------------------------------------- */
  --color-sat-1: var(--brand-color); /* exact brand color; not automatically accessible */
  --color-sat-2: color-mix(in oklch, var(--brand-color) 80%, var(--brand-neutral));
  --color-sat-3: color-mix(in oklch, var(--brand-color) 55%, var(--brand-neutral));
  --color-sat-4: color-mix(in oklch, var(--brand-color) 30%, var(--brand-neutral));
  --color-sat-5: var(--brand-neutral);

  /* Palette hue
   Hue rotations use capped chroma and fixed medium lightness.
   These are decorative accent colors, not guaranteed text colors.
  ---------------------------------------------------------------------- */
  --color-hue-1: oklch(55% var(--brand-c-hue) calc(var(--brand-h) + 30)  / 1); /* analogous +30° */
  --color-hue-2: oklch(55% var(--brand-c-hue) calc(var(--brand-h) + 120) / 1); /* triadic +120° */
  --color-hue-3: oklch(55% var(--brand-c-hue) calc(var(--brand-h) + 180) / 1); /* complementary +180° */
  --color-hue-4: oklch(55% var(--brand-c-hue) calc(var(--brand-h) + 240) / 1); /* triadic +240° */
  --color-hue-5: oklch(55% var(--brand-c-hue) calc(var(--brand-h) + 330) / 1); /* analogous +330° */

  /* Text colours
  ---------------------------------------------------------------------- */
  --text-dark:    oklch(16% var(--brand-c-ink)     var(--brand-h) / 1); /* primary text on light backgrounds */
  --text-dark-2:  oklch(42% var(--brand-c-panel)   var(--brand-h) / 1); /* secondary text on light backgrounds */
  --text-light:   oklch(97% var(--brand-c-surface) var(--brand-h) / 1); /* primary text on dark backgrounds */
  --text-light-2: oklch(88% var(--brand-c-ink)     var(--brand-h) / 1); /* secondary text on dark backgrounds */
  
  
 /* Typography tokens
  ---------------------------------------------------------------------- */
  --font-family:                system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-family-headings:       system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-family-mono:           ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
  --font-weight-normal:         400;
  --font-weight-bold:           700;
  --letter-spacing-normal:      0em;    /* default for body copy */
  --letter-spacing-wide:        0.05em; /* for all-caps, buttons, UI */
  --letter-spacing-xwide:       0.1em;  /* for hero banners, decorative text */
  --letter-spacing-tight:       -0.01em; /* good for large headings */
  --word-spacing-normal:        0em;    /* default */
  --word-spacing-wide:          0.25em; /* use sparingly, taglines / quotes */
  --font-optical-size:          auto;
  --font-variant-caps-small:    small-caps;
  --font-variant-caps-normal:   normal;
  --font-stretch-normal:        100%; 
  --font-stretch-condensed:     85%;  /* slightly narrower, fits headings/UI just for variables fonts*/
  --font-stretch-expanded:      115%;  /* slightly wider, for display/hero text just for variables fonts */
  --font-kerning:               auto;
  --font-variant-ligatures-normal:  normal;  /* default: body text, paragraphs */ 
  --font-variant-ligatures-out:     no-common-ligatures; /* special: headings, logos */
  /* Font Sizes
   ----------------------------------------------------------------------
   Sources:
   - https://www.fluid-type-scale.com/
   - https://clamp.font-size.app/

   Assumptions / Notes:
   - Root font-size is 10px (html { font-size: 10px; })
     This means: 1.6rem = 16px, 2.0rem = 20px, etc.
   - Viewport range used to generate clamps: 400px → 2560px
   - Type scale ratio: 1.2 (modular scale)

   Scale structure:
   - The core scale (--font-size-sub → --font-size-h1) follows
     a strict 1.2 ratio at min and max values.
   - One additional smaller step is included below the core scale,
     also respecting the same 1.2 ratio, to provide a mathematically
     consistent entry point into the system.
   - This smaller step starts below 13px by design and is intended
     for controlled use (dense UI, legal text, auxiliary content).

   Design intent:
   - Tokens are non-semantic primitives.
   - Clients/design decide meaning and usage.
   - Scale is generous by default (marketing / landing friendly).
   - The extra smaller step avoids ad-hoc downsizing (e.g. 0.8em hacks)
     while keeping the full scale mathematically coherent.
  ---------------------------------------------------------------------- */
  --font-size-xs:  clamp(1.083rem, 0.19vw + 1.008rem, 1.5rem);
  --font-size-sub: clamp(1.3rem, 0.23vw + 1.21rem, 1.8rem);
  --font-size-p:   clamp(1.56rem, 0.28vw + 1.45rem, 2.16rem);
  --font-size-h6:  clamp(1.87rem, 0.33vw + 1.74rem, 2.59rem);
  --font-size-h5:  clamp(2.25rem, 0.40vw + 2.09rem, 3.11rem);
  --font-size-h4:  clamp(2.70rem, 0.48vw + 2.50rem, 3.73rem);
  --font-size-h3:  clamp(3.23rem, 0.58vw + 3.00rem, 4.48rem);
  --font-size-h2:  clamp(3.88rem, 0.69vw + 3.61rem, 5.37rem);
  --font-size-h1:  clamp(4.66rem, 0.83vw + 4.33rem, 6.45rem);


  /* Line heights
  ---------------------------------------------------------------------- */
  --line-height-normal:          1.7;
  --line-height-condensed:       1.2;
  --line-height-extra-condensed: 1;  
  --line-height-large:           2;
 
 /* Text tokens 
  ---------------------------------------------------------------------- */ 
  --text-align:                start;
  --text-wrap:                 pretty;
  --writing-mode:              horizontal-tb;

  /* Additional styling tokens 
  ---------------------------------------------------------------------- */ 
  --stroke-width:       1px; /* -webkit-text-stroke  It’s vendor-specific and only applies in certain browsers 
                        (mostly WebKit/Blink behavior). As a global token, it can lead to “why doesn’t this work in Firefox?” 
                        confusion.   */
  --stroke-color:       var(--color-light-5); /* -webkit-text-fill-color */
  --text-fill-color:    var(--color-light-1); /* -webkit-text-fill-color */
  --text-shadow-dark:   0 0 1px rgb(0 0 0 / 0.4),
                        0 1px 2px rgb(0 0 0 / 0.4);
  --text-shadow-light:  0 1px 2px rgb(255 255 255 / 0.25),
                        0 0 4px rgb(255 255 255 / 0.15);

  /* Layout helpers
   ----------------------------------------------------------------------
   Text measure tokens.
   Use with max-width, not width, to avoid mobile overflow.
   ch is tied to the width of the "0" character in the current font.
  ---------------------------------------------------------------------- */
  --p-width:        min(100%, 70ch); /* comfortable paragraph measure */
  --heading-width:  min(100%, 22ch); /* shorter line length for headings */
  --li-width:       min(100%, 65ch); /* lists usually read better slightly narrower */

  
  /* Spacing scale  (rem on a 10px root; px shown for reference)
  ----------------------------------------------------------------------
  Absolute layout rhythm for margins / padding / gap. 4px base.
  Stays consistent across components regardless of local font-size. */
  --space-3xs: 0.4rem;   /*  4px */
  --space-2xs: 0.8rem;   /*  8px */
  --space-xs:  1.2rem;   /* 12px */
  --space-s:  1.6rem;   /* 16px */
  --space-m:  2.4rem;   /* 24px */
  --space-l:  3.2rem;   /* 32px */
  --space-xl:  4.8rem;   /* 48px */
  --space-2xl: 6.4rem;   /* 64px */
  --space-3xl: 9.6rem;   /* 96px */
  /* Fluid section spacing (replaces ad-hoc max(7%, 50px) patterns) */
  --space-section: clamp(4rem, 6vw, 9.6rem);
  /* Large vertical rhythm between containers 
  (replaces ad-hoc max(7%, 50px) patterns*/
  --space-block: clamp(8rem, 10vw, 16rem);

  /* Border-radius scale
  ---------------------------------------------------------------------- */
  --radius-xs:     0.2rem;  /*  2px */
  --radius-s:     0.4rem;  /*  4px */
  --radius-m:     0.6rem;  /*  6px */
  --radius-l:     1.2rem;  /* 12px */
  --radius-xl:     2rem;    /* 20px */
  --radius-pill:   999px;
  --radius-circle: 50%;

  /* z-index scale  
  ---------------------------------------------------------------------- */
  --z-index:      1;
  --z-index-1:    100;
  --z-index-2:    1000;   /* sticky header (.siteHeader) */
  --z-index-3:    2000;   /* mobile off-canvas menu */
  --z-index-4:    3000;
  --z-index-5:    4000;
  --z-index-6:    9999;   /* skip-link / must-be-on-top */

}
	
/* ──────────────────────────────────
   2. CLEARINGS / FLOAT CONTAINMENT
   ────────────────────────────────── */

/* Modern clearfix utility
   - Establishes a new block formatting context
   - Safely contains legacy floated children
   - Preferred over pseudo-element hacks in modern layouts
*/
.clearfix {
  display: flow-root;
}

/* Legacy clearfix (fallback / reference only)
   Use only if supporting very old browsers or known edge cases
*/
/*
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}
*/

/* ──────────────────────────────────
   3.  FONT FACE
   ────────────────────────────────── */

/* Example Futura Md BT Medium 
@font-face {
  font-family: 'DM Sans';
  src: url('/wp-content/themes/hello-elementor-cuzgow/fonts/dm-sans-v17-latin-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
*/

/* ─────────────────────────────────────────────
   4.  ELEMENTS  (html, body, universal box‑sizing)
   ───────────────────────────────────────────── */

/* ------------  HTML  ------------ */
html {
  box-sizing: border-box;
  /* 10px baseline: 16px × 62.5%.
     This makes 1rem = 10px if the browser default is 16px. */
  font-size: 62.5%;
  scroll-behavior: smooth;
  writing-mode: var(--writing-mode, horizontal-tb);
  margin: 0;
  padding: 0;
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* Inherit box-sizing to everything */
*,
*::before,
*::after {
  box-sizing: inherit;
}

/* Optional scrollbar styling
  ---------------------------
  Decorative only. Keep subtle and neutral.
  Ensure thumb/track contrast remains visible.
----------------------------- */

/* Firefox */
html {
  scrollbar-width: auto;
  scrollbar-color: var(--color-light-4) var(--color-light-1);
}

/* Blink/WebKit */
html::-webkit-scrollbar {
  width: 16px;
  height: 16px;
}

html::-webkit-scrollbar-track {
  background: linear-gradient(
    135deg,
    var(--color-light-1),
    var(--color-light-2)
  );
}

html::-webkit-scrollbar-thumb {
  border-radius: var(--radius-pill);
  background: var(--color-light-4);
  border: 3px solid var(--color-light-1);
  box-shadow:
    inset 1px 1px 1px var(--color-light-1),
    inset -1px -1px 1px var(--color-light-5);
}

html::-webkit-scrollbar-thumb:hover {
  background: var(--color-light-3);
}

/* ------------  BODY  ------------ */
body {
  margin: 0;
  padding: 0;

  overflow-x: hidden;
  overscroll-behavior-x: none; /* block sideways bounce where supported */

  font-family: var(--font-family, system-ui, sans-serif);
  font-size: var(--font-size-p, 1.6rem);
  font-weight: var(--font-weight-normal, 400);
  line-height: var(--line-height-normal, 1.7);
  color: var(--text-dark, #000000);
  background-color: var(--color-light-1, #ffffff);

  font-stretch: var(--font-stretch-normal, normal);
  font-kerning: var(--font-kerning, auto);
  font-variant-ligatures: var(--font-variant-ligatures-normal, normal);
  font-variant-caps: var(--font-variant-caps-normal, normal);

  text-align: var(--text-align, start);

  /* Optional smoothing (WebKit / macOS) */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}