/* embody yoga design system.
   Mirrors the Claude Design project "embody yoga" (landing/Landing A - Design System).
   Fonts are self-hosted: this line never fetches from a third-party origin. */

/* Comfortaa, Cormorant Garamond and Mulish are variable fonts, so one file
   serves the whole weight range; only the Cormorant italic is a static cut. */
@font-face{font-family:"Comfortaa";font-style:normal;font-weight:400 700;font-display:swap;src:url("fonts/Comfortaa-var.woff2") format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:300 700;font-display:swap;src:url("fonts/CormorantGaramond-var.woff2") format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:500;font-display:swap;src:url("fonts/CormorantGaramond-italic-var.woff2") format("woff2")}
@font-face{font-family:"Mulish";font-style:normal;font-weight:200 1000;font-display:swap;src:url("fonts/Mulish-var.woff2") format("woff2")}

:root{
  /* Core palette */
  --sand: #E7E4DD;
  --sand-soft: #EFECE5;
  --sand-deep: #DAD4CA;
  --taupe: #A89684;
  --taupe-deep: #8B7A69;

  --rust: #CB7A4A;
  --rust-deep: #B5663A;
  --rust-soft: #E0A988;

  --teal: #3F8FA6;
  --teal-deep: #2F7589;

  /* Ink and text */
  --ink: #2C2722;
  --espresso: #3E372F;
  --stone: #6E655B;
  --cream: #F4F1EB;
  --white: #FFFFFF;

  /* On dark and on photo */
  --on-taupe: #F6F2EC;
  --on-taupe-muted: #E9E0D4;

  /* Type families */
  --font-display: "Comfortaa", system-ui, sans-serif;
  --font-serif: "Cormorant Garamond", Georgia, serif;
  --font-body: "Mulish", system-ui, -apple-system, sans-serif;

  /* Type scale */
  --fs-display: clamp(48px, 7vw, 104px);
  --fs-h1: clamp(34px, 4.4vw, 60px);
  --fs-h2: clamp(26px, 3vw, 40px);
  --fs-h3: 22px;
  --fs-lead: clamp(18px, 1.5vw, 22px);
  --fs-body: 17px;
  --fs-small: 15px;
  --fs-eyebrow: 14px;

  /* Spacing */
  --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;

  /* Radii */
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 22px;
  --r-pill: 999px;

  /* Borders, shadows, motion */
  --hair: 1px solid rgba(62,55,47,0.14);
  --hair-light: 1px solid rgba(246,242,236,0.35);
  --shadow-soft: 0 18px 50px -28px rgba(62,55,47,0.40);
  --shadow-lift: 0 26px 70px -34px rgba(44,39,34,0.45);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: .5s;
}