/* ─────────────────────────────────────────────────────────────────────────────
   GrowMyPractice — Colors & Type
   Source of truth: brand-guidelines-v2.md (2026-05-15)
   Verbatim export. Update this file when the spec moves; do not edit by hand
   downstream.
   ───────────────────────────────────────────────────────────────────────────── */

@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&family=DM+Serif+Display:ital@0;1&display=swap");

:root {
  /* ── PRIMARY PALETTE (v2: warm cream foundation + sage + accents) ────── */
  --brand-mist:    #F1EDE4; /* warm cream — primary background (LOCKED v2) */
  --brand-mist-v1: #F3F7ED; /* DEPRECATED — alias for transition only      */
  --brand-bone:    #F8F3E8; /* NEW v2 — elevated surface (cards, modals)   */
  --brand-sage:    #A2A892; /* signature sage green — leaf, links, accent  */
  --brand-clay:    #C97B5A; /* NEW v2 — warm counterpoint accent           */
  --brand-deep:    #3D4B3A; /* NEW v2 — editorial gravitas accent          */
  --brand-spark:   #E55A2B; /* NEW v2 — emphasis accent (NOT a CTA color)  */
  --brand-ink:     #1F1F21; /* near-black — primary text + primary CTA fill */

  /* ── SAGE SCALE (unchanged from v1) ───────────────────────────────────── */
  --sage-50:  #F3F7ED;
  --sage-100: #E6ECDC;
  --sage-200: #D2DABE;
  --sage-300: #BDC7A4;
  --sage-400: #A2A892;  /* === --brand-sage */
  --sage-500: #8A9079;
  --sage-600: #6F7561;
  --sage-700: #565A4A;
  --sage-800: #3E4135;
  --sage-900: #25271F;

  /* ── CLAY SCALE (NEW v2) ──────────────────────────────────────────────── */
  --clay-50:  #F8EDE6;
  --clay-100: #EFD8C9;
  --clay-200: #E2BCA5;
  --clay-300: #D69D81;
  --clay-400: #C97B5A;  /* === --brand-clay */
  --clay-500: #B36548;
  --clay-600: #925339;
  --clay-700: #73422D;
  --clay-800: #553124;
  --clay-900: #37211A;

  /* ── DEEP SCALE (NEW v2) ──────────────────────────────────────────────── */
  --deep-50:  #EFF1ED;
  --deep-100: #D9DDD4;
  --deep-200: #B6BFAE;
  --deep-300: #869281;
  --deep-400: #3D4B3A;  /* === --brand-deep */
  --deep-500: #2F3B2D;
  --deep-600: #242E22;
  --deep-700: #1A2218;
  --deep-800: #10160F;
  --deep-900: #080B07;

  /* ── SPARK SCALE (NEW v2, added 2026-05-15) ───────────────────────────── */
  --spark-50:  #FCEBE2;
  --spark-100: #F8D2BF;
  --spark-200: #F1AE91;
  --spark-300: #EA8762;
  --spark-400: #E55A2B;  /* === --brand-spark */
  --spark-500: #CC4920;
  --spark-600: #A53A19;
  --spark-700: #7E2D14;
  --spark-800: #57210E;
  --spark-900: #311408;

  /* ── WARM-NEUTRAL GRAY SCALE (re-toned in v2) ─────────────────────────── */
  --gray-cloud:    #EDE9DE;
  --gray-smoke:    #D6D1C3;
  --gray-steel:    #BAB5A5;
  --gray-space:    #9A9483;
  --gray-graphite: #6D6857;
  --gray-arsenic:  #3F3D34;
  --gray-phantom:  #1E1D17;
  --gray-black:    #000000;

  /* ── SEMANTIC TOKENS ──────────────────────────────────────────────────── */
  --bg:            var(--brand-mist);
  --bg-elevated:   var(--brand-bone);
  --bg-sunken:     var(--sage-100);
  --bg-warm:       var(--clay-50);
  --bg-deep:       var(--brand-deep);
  --bg-inverse:    var(--brand-ink);

  --fg:            var(--brand-ink);
  --fg-muted:      var(--gray-arsenic);
  --fg-subtle:     var(--gray-graphite);
  --fg-faint:      var(--gray-space);
  --fg-inverse:    var(--brand-mist);

  --accent:        var(--brand-sage);
  --accent-hover:  var(--sage-500);
  --accent-press:  var(--sage-600);
  --accent-soft:   var(--sage-100);
  --accent-warm:   var(--brand-clay);
  --accent-deep:   var(--brand-deep);
  --accent-spark:  var(--brand-spark);
  --accent-spark-soft: var(--spark-50);

  --border:        var(--sage-200);
  --border-strong: var(--sage-400);
  --border-subtle: var(--gray-cloud);
  --border-warm:   var(--clay-200);

  /* ── STATUS (tuned for ivory + clay neighborhood) ────────────────────── */
  --success: #6F8F5A;
  --warning: #B8893E;
  --danger:  #B5564B;
  --info:    var(--brand-sage);

  /* ── RADII ─────────────────────────────────────────────────────────────── */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* ── ELEVATION ─────────────────────────────────────────────────────────── */
  --shadow-1: 0 1px 2px rgba(31, 31, 33, 0.04),
              0 1px 1px rgba(31, 31, 33, 0.03);
  --shadow-2: 0 4px 12px rgba(31, 31, 33, 0.06),
              0 1px 2px rgba(31, 31, 33, 0.04);
  --shadow-3: 0 12px 32px rgba(31, 31, 33, 0.08),
              0 2px 6px rgba(31, 31, 33, 0.04);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.5);

  /* ── SPACING (4px base) ────────────────────────────────────────────────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  /* ── TYPOGRAPHY ───────────────────────────────────────────────────────── */
  --font-sans:  "Manrope", ui-sans-serif, system-ui, -apple-system,
                "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-serif: "DM Serif Display", "Playfair Display", Georgia,
                "Times New Roman", serif;
  --font-mono:  ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --type-display:  80px;
  --type-h1:       64px;
  --type-h2:       48px;
  --type-stat-lg:  64px;
  --type-sh1:      32px;
  --type-stat-md:  34px;
  --type-sh2:      24px;
  --type-p1:       18px;
  --type-p2:       16px;
  --type-cap:      13px;
  --type-meta:     11px;

  --lh-tight:  1.05;
  --lh-snug:   1.2;
  --lh-normal: 1.45;
  --lh-loose:  1.6;

  --track-tight:  -0.02em;
  --track-snug:   -0.01em;
  --track-normal: 0;
  --track-wide:   0.04em;

  /* ── MOTION ────────────────────────────────────────────────────────────── */
  --ease-out:    cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-emph:   cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 140ms;
  --dur-base: 220ms;
  --dur-slow: 420ms;
}

/* ─────────────────────────────────────────────────────────────────────────────
   SEMANTIC TYPE STYLES
   ───────────────────────────────────────────────────────────────────────────── */

.type-display {
  font-family: var(--font-serif);
  font-size: var(--type-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-tight);
  font-weight: 400;
  color: var(--fg);
}
.type-h1 {
  font-family: var(--font-serif);
  font-size: var(--type-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-tight);
  font-weight: 400;
  color: var(--fg);
}
.type-h2 {
  font-family: var(--font-serif);
  font-size: var(--type-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--track-snug);
  font-weight: 400;
  color: var(--fg);
}
.type-sh1 {
  font-family: var(--font-sans);
  font-size: var(--type-sh1);
  line-height: var(--lh-snug);
  letter-spacing: var(--track-snug);
  font-weight: 600;
  color: var(--fg);
}
.type-sh2 {
  font-family: var(--font-sans);
  font-size: var(--type-sh2);
  line-height: var(--lh-normal);
  font-weight: 500;
  color: var(--fg);
}
.type-stat-lg {
  font-family: var(--font-sans);
  font-size: var(--type-stat-lg);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-tight);
  font-weight: 600;
  color: var(--fg);
}
.type-stat-md {
  font-family: var(--font-sans);
  font-size: var(--type-stat-md);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-snug);
  font-weight: 600;
  color: var(--fg);
}
.type-p1 {
  font-family: var(--font-sans);
  font-size: var(--type-p1);
  line-height: var(--lh-loose);
  font-weight: 400;
  color: var(--fg-muted);
}
.type-p2 {
  font-family: var(--font-sans);
  font-size: var(--type-p2);
  line-height: var(--lh-loose);
  font-weight: 400;
  color: var(--fg-muted);
}
.type-caption {
  font-family: var(--font-sans);
  font-size: var(--type-cap);
  line-height: var(--lh-normal);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  font-weight: 600;
  color: var(--fg-subtle);
}
.type-meta {
  font-family: var(--font-sans);
  font-size: var(--type-meta);
  line-height: var(--lh-normal);
  font-weight: 400;
  color: var(--fg-faint);
}

/* Signature italic-sage emphasis pattern */
.brand-em {
  font-style: italic;
  color: var(--brand-sage);
  font-weight: 400;
}