/*
Theme Name: Elite MedSpa AZ
Theme URI:
Author: Makeover Studio
Description: Custom revamp of https://elitemedspaaz.com/
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 8.1
License: Proprietary
Text Domain: elitemedspaaz
*/

/* ============================================================
   DESIGN TOKENS — single source of truth.
   No hardcoded colors / spacing anywhere else in the codebase;
   every value references a token defined here.
   Direction: audit/direction.md
   ============================================================ */

:root {
  /* Palette — warm clinical luxury, evolved from the source navy + gold */
  --color-ink:        #1B1714;  /* warm near-black — body text */
  --color-paper:      #F7F3EC;  /* warm ivory — default background */
  --color-paper-2:    #EFE9DE;  /* warm sand — alternating sections */
  --color-navy:       #15293B;  /* deep clinical navy — dark sections, authority */
  --color-navy-2:     #25425C;  /* lifted navy — hovers, gradients */
  /* Primary accent = the source site's steel-blue (#356282). Navy leads. */
  --color-accent:      #356282;  /* steel blue — primary accent (live secondary) */
  --color-accent-deep: #294C66;  /* AA-contrast accent for text/links on light */
  --color-accent-soft: #C7D6E1;  /* pale blue — accents on dark sections (live accent lineage) */
  /* Gold kept as a tiny highlight only — wordmark + active nav, like the live site. */
  --color-gold:       #C2A15A;  /* gold highlight (logo/active-state only) */
  --color-sage:       #79867A;  /* quiet clinical-calm support — sparingly */
  --color-muted:      #645B50;  /* warm gray — captions, labels, meta (AA on warm bg) */
  --color-muted-strong: #574E43; /* darker muted — small uppercase labels (AA) */
  --color-line:       #DED5C6;  /* hairline borders on light */
  --color-line-dark:  #2C3D4D;  /* hairline borders on navy */
  --color-white:      #FFFFFF;  /* media/surfaces only — never page bg */

  /* Semantic aliases */
  --bg:            var(--color-paper);
  --bg-alt:        var(--color-paper-2);
  --text:          var(--color-ink);
  --text-invert:   var(--color-paper);
  --accent:        var(--color-accent);
  --surface:       var(--color-white);

  /* Typography — self-hosted (assets/fonts/fonts.css) */
  --font-heading: 'Fraunces', 'Bodoni Moda', Georgia, 'Times New Roman', serif;
  --font-body:    'Hanken Grotesk', 'Montserrat', system-ui, -apple-system, Segoe UI, sans-serif;
  --font-mono:    ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

  /* Type scale */
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;
  --text-5xl:  3rem;
  --text-6xl:  clamp(2.75rem, 6vw, 4.5rem); /* flagship display */

  --leading-tight: 1.08;
  --leading-snug:  1.25;
  --leading-body:  1.62;

  --tracking-eyebrow: 0.14em;

  /* 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 */
  --container:      1200px;
  --container-wide: 1360px;
  --container-text: 720px;
  --gutter: clamp(1.25rem, 5vw, 3rem);

  /* Radii — sharp to gently soft, never pillowy */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-pill: 999px;
  --radius-none: 0;

  /* Borders & shadow */
  --border: 1px solid var(--color-line);
  --border-gold: 1px solid var(--color-gold);
  --shadow-sm: 0 1px 2px rgba(21, 41, 59, 0.06);
  --shadow-md: 0 10px 30px -12px rgba(21, 41, 59, 0.22);
  --shadow-lg: 0 24px 60px -20px rgba(21, 41, 59, 0.30);

  /* Motion */
  --ease-default: 0.2s ease;
  --ease-smooth: 0.4s cubic-bezier(0.22, 1, 0.36, 1);

  /* Chrome */
  --header-h: 76px;
  --z-header: 100;
  --z-drawer: 200;
}

/*
 * Base element styles, layout primitives, and components live in
 * assets/css/main.css (enqueued via inc/enqueue.php). This file is the
 * WordPress theme stylesheet header + token layer only.
 */