/* ============================================================
   MedSpaMedia AI — DESIGN TOKENS (the law, both concepts import this)
   Canonical source: BUILD-RULES-DISTILLED.md §1 (pixel-sampled green + WCAG-resolved).
   Concept A (Editorial Calm) and Concept B (Studio) override ONLY the
   *-concept variables in their own concept.css. Everything else is shared.
   ============================================================ */

/* ---- Google Sans Flex (self-hosted variable font) ---- */
@font-face{
  font-family:"Google Sans Flex";
  src:url("../fonts/GoogleSansFlex.woff2") format("woff2-variations"),
      url("../fonts/GoogleSansFlex.ttf") format("truetype-variations");
  font-weight:1 1000;
  font-stretch:25% 151%;
  font-style:normal;
  font-display:swap;
}

:root{
  /* ========== COLOR — brand swatches (canonical, pixel-sampled) ========== */
  --deep:    #1F462F;   /* Deep Botanical — dark sections, headings, footer */
  --deep-2:  #16321F;   /* darker-than-deep surface (caption strips on deep cards) */
  --leaf:    #669B3F;   /* Vivid Leaf — accent only: CTA fill, icon, one word */
  --sage:    #A3BE98;   /* chips/badges, mid-tone */
  --matcha:  #E5EBD5;   /* tint bands, soft card fills */
  --ivory:   #F7F2EB;   /* card surface, alternating section */
  --cream:   #F7F5F1;   /* page bg (global canvas) */
  --taupe:   #AAA194;   /* hairline/divider ONLY — never text */

  /* ---- text (WCAG-checked) ---- */
  --ink:     #1A261E;   /* body on light (AAA 14.4:1) */
  --heading: #1F462F;   /* heading on light (AAA 9.8:1) */
  --muted:   #5E6B5E;   /* caption on light (AA, min 14px) */
  --on-dark: #F7F2EB;   /* text on deep section (ivory, warmer than white) */
  --on-dark-muted:#C7D2C2; /* caption on deep */

  /* ---- CTA — DARKENED gradient (the lime token failed WCAG; this passes AA) ---- */
  --cta:        linear-gradient(135deg,#578436 0%,#49702D 100%);
  --cta-hover:  linear-gradient(135deg,#4f7a31 0%,#406528 100%);
  --cta-hi:     inset 0 1px 0 rgba(255,255,255,.25);  /* lime lives ONLY as a 1px inner highlight */
  --primary-hover:#578436;
  --primary-press:#49702D;

  /* ---- lines + shadows (always green-tinted, never black/neon) ---- */
  --hairline: #D9D5CF;
  --shadow-card:  0 1px 2px rgba(31,70,47,.06), 0 10px 30px rgba(31,70,47,.08);
  --shadow-hover: 0 2px 4px rgba(31,70,47,.08), 0 16px 40px rgba(31,70,47,.12);
  --elev-hi:  inset 0 1px 0 rgba(255,255,255,.55);    /* elevation highlight on cards/CTAs */

  /* tinted-neutral derivations (NEVER pure grey) */
  --placeholder:#8A9189;   /* derived from deep/taupe */
  --disabled-bg:#E7E3DC;
  --disabled-fg:#A39B8E;
  --danger:#9A3B2F;        /* form/validation error — muted brick, not pure red */

  /* ========== TYPE — Google Sans Flex (scale calibrated to its tall x-height) ========== */
  --font:"Google Sans Flex", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* fluid scale in rem (zoom-safe), viewport 360 -> 1280 */
  --t-display: clamp(2.5rem, 1.43rem + 4.76vw, 4rem);      /* 40 -> 64 (cap 64, NOT 72) */
  --t-h1:      clamp(2rem,   1.46rem + 2.38vw, 2.75rem);   /* 32 -> 44 */
  --t-h2:      clamp(1.5rem, 1.29rem + 0.95vw, 1.875rem);  /* 24 -> 30 */
  --t-h3:      clamp(1.25rem,1.16rem + 0.30vw, 1.375rem);  /* 20 -> 22 */
  --t-lead:    clamp(1.125rem,1.07rem + 0.18vw,1.25rem);   /* 18 -> 20 */
  --t-body:    clamp(1rem,   0.96rem + 0.20vw, 1.0625rem); /* 16 -> 17 */
  --t-body-sm: 0.875rem;   /* 14 */
  --t-eyebrow: 0.75rem;    /* 12 */
  --t-caption: 0.75rem;    /* 12 */

  /* only 4 weights */
  --w-reg:400; --w-med:500; --w-semi:600; --w-bold:700;

  /* line-height inversely proportional to size */
  --lh-display:1.05; --lh-h1:1.12; --lh-h2:1.2; --lh-h3:1.25; --lh-lead:1.45; --lh-body:1.6;

  /* tracking: headlines negative, body 0, eyebrow +0.12em */
  --tr-display:-0.025em; --tr-h1:-0.015em; --tr-h2:-0.01em; --tr-body:0; --tr-eyebrow:0.12em;

  /* ========== SPACING / GRID / RADIUS (8px base) ========== */
  --container:1200px;
  --container-wide:1320px;
  --gutter:24px;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px;
  --sp-10:40px; --sp-12:48px; --sp-16:64px; --sp-20:80px; --sp-24:96px; --sp-32:128px;

  /* radius VARIED (breaks the AI "16px everywhere") */
  --r-input:8px; --r-button:10px; --r-tag:8px; --r-chip:999px;
  --r-card:18px; --r-card-lg:22px; --r-pill:999px; --r-media:14px;

  /* ========== MOTION (paste verbatim; concepts do not override) ========== */
  --ease-out:      cubic-bezier(0.23,1,0.32,1);    /* default ~95% UI */
  --ease-out-soft: cubic-bezier(0.4,0,0.2,1);      /* hover/color */
  --ease-reveal:   cubic-bezier(0.22,1,0.36,1);    /* scroll reveal */
  --ease-in-out:   cubic-bezier(0.77,0,0.175,1);   /* morph on-screen */
  --ease-drawer:   cubic-bezier(0.32,0.72,0,1);    /* cart drawer / sheet */
  --ease-spring:   cubic-bezier(0.34,1.56,0.64,1); /* RATIONED: 5 moments only */
  --dur-micro:100ms; --dur-fast:150ms; --dur-base:200ms; --dur-mid:250ms; --dur-slow:350ms; --dur-reveal:500ms;

  /* ========== CONCEPT HOOKS (overridden per concept) ========== */
  --bg:        var(--cream);    /* page canvas */
  --surface:   var(--ivory);    /* default card surface */
  --accent-word: var(--leaf);   /* the one green word in a headline */
  --section-rhythm: 1;          /* A=airy, B=denser (concepts tweak section padding via this) */
}

/* darkened CTA hover lime kept out of base swatch on purpose */