/* ========================================================
 * KHI Landing v2 — Design Tokens
 * Brand: KHI Wellness · Style: Webflow-modern, image-rich
 * ======================================================== */

@font-face {
  font-family: 'TNR Condensed';
  src: local('Times New Roman MT Condensed'),
       url('../fonts/TimesNewRomanMTCondensed.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'TNR Condensed';
  src: local('Times New Roman MT Condensed Italic'),
       url('../fonts/TimesNewRomanMTCondensed-Italic.woff2') format('woff2');
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Gilroy';
  src: url('../fonts/Gilroy-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Gilroy';
  src: url('../fonts/Gilroy-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Gilroy';
  src: url('../fonts/Gilroy-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Gilroy';
  src: url('../fonts/Gilroy-Semibold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Gilroy';
  src: url('../fonts/Gilroy-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Free fallback fonts via Google Fonts (loaded async in HTML) */

:root {
  /* ==== TYPOGRAPHY ==== */
  --font-display: 'TNR Condensed', 'Times Newer Roman', 'Times New Roman', 'PT Serif', Times, serif;
  --font-body: 'Gilroy', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Typography scale (clamp for fluid responsive) */
  --fs-display-xl: clamp(3.5rem, 9vw, 8rem);    /* hero title */
  --fs-display-lg: clamp(2.8rem, 6vw, 5.5rem);  /* section h2 */
  --fs-display-md: clamp(2rem, 4vw, 3.5rem);    /* card titles big */
  --fs-h1: clamp(2.4rem, 5vw, 4rem);
  --fs-h2: clamp(1.8rem, 3.5vw, 2.8rem);
  --fs-h3: clamp(1.3rem, 2.2vw, 1.7rem);
  --fs-h4: clamp(1.1rem, 1.6vw, 1.3rem);
  --fs-body-lg: 1.125rem;
  --fs-body: 1rem;
  --fs-body-sm: 0.92rem;
  --fs-caption: 0.78rem;
  --fs-micro: 0.7rem;

  --lh-tight: 0.95;
  --lh-display: 1.05;
  --lh-heading: 1.15;
  --lh-body: 1.55;
  --lh-loose: 1.75;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.05em;
  --tracking-widest: 0.18em;

  /* ==== COLOR PALETTE ==== */
  /* Light mode (KHI brand) */
  --c-ivory: #FAF6F0;
  --c-cream: #F3ECE2;
  --c-sand: #E8DDCD;
  --c-paper: #FFFFFF;

  --c-ink: #1A1612;
  --c-ink-soft: #3F3530;
  --c-ink-muted: #6B5F55;
  --c-ink-faint: #9C8E83;

  --c-earth: #8B7355;
  --c-earth-dark: #6B5740;
  --c-earth-light: #A89B8C;

  --c-sage: #6B7F5B;
  --c-gold: #C9A96E;
  --c-rust: #B5552E;

  --c-line: rgba(26, 22, 18, 0.10);
  --c-line-soft: rgba(26, 22, 18, 0.06);

  /* Semantic */
  --c-bg: var(--c-ivory);
  --c-bg-alt: var(--c-cream);
  --c-bg-dark: var(--c-ink);
  --c-text: var(--c-ink);
  --c-text-soft: var(--c-ink-soft);
  --c-text-muted: var(--c-ink-muted);
  --c-accent: var(--c-earth);
  --c-accent-strong: var(--c-earth-dark);
  --c-accent-warm: var(--c-gold);

  /* ==== SPACING (4-8 scale) ==== */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --sp-10: 128px;
  --sp-11: 160px;

  /* Section padding fluid */
  --sp-section-y: clamp(64px, 9vw, 128px);
  --sp-section-x: clamp(20px, 4vw, 48px);

  /* ==== RADII ==== */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-xl: 32px;
  --r-pill: 999px;

  /* ==== SHADOWS ==== */
  --shadow-xs: 0 1px 2px rgba(26, 22, 18, 0.04);
  --shadow-sm: 0 2px 12px rgba(26, 22, 18, 0.06);
  --shadow-md: 0 8px 28px rgba(26, 22, 18, 0.08);
  --shadow-lg: 0 24px 60px rgba(26, 22, 18, 0.12);
  --shadow-xl: 0 40px 96px rgba(26, 22, 18, 0.18);
  --shadow-glow: 0 0 0 1px rgba(139, 115, 85, 0.2), 0 12px 32px rgba(139, 115, 85, 0.16);

  /* ==== MOTION ==== */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --dur-fast: 180ms;
  --dur-base: 320ms;
  --dur-slow: 560ms;
  --dur-slower: 880ms;

  /* ==== LAYOUT ==== */
  --container-narrow: 760px;
  --container: 1180px;
  --container-wide: 1440px;
  --container-px: clamp(20px, 4vw, 48px);

  --nav-h: 72px;
  --nav-h-mobile: 60px;

  --z-base: 1;
  --z-content: 10;
  --z-overlay: 50;
  --z-nav: 80;
  --z-modal: 100;
  --z-toast: 200;
}

/* Reduced motion: disable transforms / animations */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
    --dur-slower: 0ms;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}