/*
Theme Name: Premier Medical Spa
Theme URI:
Author: Makeover Studio
Description: Custom revamp of https://premiermedicalspa.com/ — a warm, credential-led "warm clinical authority" theme for a physician-led medical spa. Drop-in compatible with the client's existing plugin stack (WooCommerce, ACF, Yoast, Jetpack, Contact Form 7, RSVPMaker, Elementor/Beaver Builder).
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 8.1
License: Proprietary
Text Domain: premier-medical-spa
*/

/* ============================================================
   DESIGN TOKENS — single source of truth (direction.md)
   No hardcoded colors/spacing anywhere else in the codebase.
   ============================================================ */
:root {
  /* --- Palette: evolve the source teal, retire the yellow --- */
  --color-ink:        #16211E; /* warm near-black, faint green cast — never pure #000 */
  --color-ink-soft:   #3A453F;
  --color-paper:      #F7F4ED; /* warm cream — never pure #fff */
  --color-paper-alt:  #ECE6D9;
  --color-teal-900:   #143E37; /* deep teal — footer, dark sections */
  --color-teal-700:   #2C7A6B; /* PRIMARY brand teal — buttons, links */
  --color-teal-500:   #4E9D8D; /* source teal — tints, hovers */
  --color-teal-100:   #DCEAE5; /* teal wash — soft section bg, cards */
  --color-accent:     #B8924E; /* brass/gold — replaces yellow; used sparingly */
  --color-accent-soft:#E7D8B6;
  --color-muted:      #635D52; /* captions, labels, meta — AA contrast on cream */
  --color-line:       #D9D2C4; /* hairlines/borders on cream */
  --color-white:      #FFFFFF; /* cards/contrast only — never full-page bg */

  /* Semantic aliases */
  --color-bg:         var(--color-paper);
  --color-text:       var(--color-ink);
  --color-link:       var(--color-teal-700);
  --color-link-hover: var(--color-teal-900);
  --color-on-teal:    #F7F4ED;

  /* Status (forms/woocommerce) */
  --color-success:    #2C7A6B;
  --color-error:      #A23B2E;
  --color-notice-bg:  var(--color-teal-100);

  /* --- Typography (self-hosted Fraunces + Figtree) --- */
  --font-heading: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body:    "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, Menlo, monospace;

  /* --- Type scale --- */
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1.0625rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;
  --text-5xl:  3rem;
  --text-h1:   clamp(2.25rem, 5vw, 3.5rem);
  --text-h2:   clamp(1.75rem, 3.5vw, 2.5rem);
  --text-h3:   clamp(1.25rem, 2vw, 1.625rem);
  --leading-tight: 1.12;
  --leading-snug:  1.3;
  --leading-body:  1.65;
  --tracking-label: 0.08em;

  /* --- Spacing --- */
  --space-section: clamp(4rem, 8vw, 8rem);
  --space-content: clamp(1.5rem, 4vw, 3rem);
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-8: 3rem;
  --space-10: 4rem;

  /* --- Layout --- */
  --max-content: 1200px;
  --max-prose:   68ch;
  --gutter:      clamp(1rem, 4vw, 2.5rem);

  /* --- Radii (restrained) --- */
  --radius-sm:   3px;
  --radius-md:   6px;
  --radius-none: 0;

  /* --- Elevation / lines --- */
  --shadow-sm: 0 1px 2px rgba(20, 33, 31, 0.06);
  --shadow-md: 0 8px 28px rgba(20, 33, 31, 0.10);
  --border-hair: 1px solid var(--color-line);

  /* --- Transitions --- */
  --ease-default: 0.2s ease;
  --ease-slow:    0.4s ease;

  /* --- Sticky header / mobile book bar offsets --- */
  --header-h: 76px;
  --bookbar-h: 60px;
  --z-header: 100;
  --z-bookbar: 90;
  --z-drawer: 120;
}