/* ============================================================================
   YOHAK DESIGN TOKENS  (yk- namespace)
   Extracted 1:1 from the live yohak.ph Bricks theme so any future "money page"
   stays pixel-faithful WITHOUT WordPress or Bricks.

   Source of truth on the live site:
     - color-palettes.min.css        -> brand colors
     - global-variables.min.css      -> fluid type + space scale
     - theme-style-...framework.css  -> typography, buttons, sections
   See website/DESIGN_SYSTEM.md for the full rationale + usage rules.
   ========================================================================== */

/* ---- Brand fonts (self-hosted, migration-safe) -------------------------- */
@font-face{font-family:"Albertus Nova";font-weight:400;font-display:swap;
  src:url("../fonts/AlbertusNova-Regular.woff") format("woff");}
@font-face{font-family:"Albertus Nova";font-weight:700;font-display:swap;
  src:url("../fonts/AlbertusNova-Bold.woff") format("woff");}
@font-face{font-family:"Sofia Pro";font-weight:300;font-display:swap;
  src:url("../fonts/SofiaPro-Light.woff") format("woff");}
@font-face{font-family:"Sofia Pro";font-weight:400;font-display:swap;
  src:url("../fonts/SofiaPro-Regular.woff") format("woff");}
@font-face{font-family:"Sofia Pro";font-weight:500;font-display:swap;
  src:url("../fonts/SofiaPro-Medium.woff2") format("woff2");}
@font-face{font-family:"Sofia Pro";font-weight:700;font-display:swap;
  src:url("../fonts/SofiaPro-Bold.woff") format("woff");}

:root{
  /* ---- Brand color palette (exact) ------------------------------------- */
  --yk-primary:        #3A4B3A;   /* forest/olive green - headings, dark UI, primary buttons */
  --yk-secondary:      #5C3A21;   /* earth brown - body copy, info */
  --yk-bg:             #D9D0C1;   /* sand / raw linen - light surfaces, text on dark */
  --yk-accent:         #B05A2A;   /* terracotta - links, highlights, cursor */
  --yk-accent-muted:   #8B9A80;   /* sage - borders, dividers, muted text */
  --yk-success:        #4A5D23;   /* olive success */

  /* derived neutrals */
  --yk-white:          #ffffff;
  --yk-ink:            #2a2118;   /* near-black warm */
  --yk-bg-deep:        #2f3c2f;   /* darker primary for footer */
  --yk-line:           rgba(139,154,128,.50);   /* default border (accent-muted @50%) */
  --yk-shadow-subtle:  rgba(58,75,58,.25);
  --yk-overlay:        rgba(47,60,47,.55);       /* hero image overlay */

  /* aliases used by components */
  --yk-text:           var(--yk-secondary);
  --yk-heading:        var(--yk-primary);

  /* ---- Fluid type scale (clamp, exact from global-variables) ----------- */
  --yk-text-2xs: clamp(1.2rem, calc(0 * (100vw - 36rem) + 1.2rem), 1.2rem);
  --yk-text-xs:  clamp(1.2rem, calc(0.0018518518518518515 * (100vw - 36rem) + 1.2rem), 1.4rem);
  --yk-text-s:   clamp(1.4rem, calc(0.0018518518518518534 * (100vw - 36rem) + 1.4rem), 1.6rem);
  --yk-text-m:   clamp(1.6rem, calc(0.0018518518518518515 * (100vw - 36rem) + 1.6rem), 1.8rem);
  --yk-text-l:   clamp(1.8rem, calc(0.0018518518518518515 * (100vw - 36rem) + 1.8rem), 2rem);
  --yk-text-xl:  clamp(2rem,   calc(0.004629629629629629  * (100vw - 36rem) + 2rem),   2.5rem);
  --yk-text-2xl: clamp(2.5rem, calc(0.013888888888888888  * (100vw - 36rem) + 2.5rem), 4rem);

  /* Display heading sizes (h1/h2 from theme-style) */
  --yk-h1: 5rem;
  --yk-h2: 3.5rem;

  /* ---- Fluid spacing scale (clamp, exact) ----------------------------- */
  --yk-space-2xs: clamp(0.82rem, calc(-0.0021296296296296293 * (100vw - 36rem) + 0.82rem), 0.59rem);
  --yk-space-xs:  clamp(1.02rem, calc(-0.0012037037037037038 * (100vw - 36rem) + 1.02rem), 0.89rem);
  --yk-space-s:   clamp(1.28rem, calc(0.00046296296296296336 * (100vw - 36rem) + 1.28rem), 1.33rem);
  --yk-space-m:   clamp(1.6rem,  calc(0.003703703703703703   * (100vw - 36rem) + 1.6rem),  2rem);
  --yk-space-l:   clamp(2rem,    calc(0.009259259259259259   * (100vw - 36rem) + 2rem),    3rem);
  --yk-space-xl:  clamp(2.5rem,  calc(0.018518518518518517   * (100vw - 36rem) + 2.5rem),  4.5rem);
  --yk-space-2xl: clamp(3.13rem, calc(0.03351851851851852    * (100vw - 36rem) + 3.13rem), 6.75rem);

  /* ---- Layout ---------------------------------------------------------- */
  --yk-container: 1200px;
  --yk-section-y: clamp(3.25rem, 7vw, 90px);   /* responsive: ~52px mobile → 90px desktop */
  --yk-radius:    2px;           /* Yohak is near-square: restrained, architectural */
  --yk-radius-img: 4px;

  /* ---- Motion ---------------------------------------------------------- */
  --yk-transition-fast:   0.2s ease;
  --yk-transition-smooth: 0.4s ease-in-out;

  /* root font: 1rem = 10px (Bricks convention) so the clamp() math matches */
  font-size: 62.5%;
}

/* Honor reduced motion globally */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; transition-duration:.001ms !important;}
}