/* ============================================================
   Mia Gleason Bodywork — Mia Gleason
   Core design tokens: color + type + space
   Retuned to the 2026 "Mia Gleason / Mia Gleason Bodywork" logo.
   Brand teal sampled at #285A78, brand rose at #A05A64.
   ============================================================ */

/* ---- Fonts (Google Fonts) -------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Hanken+Grotesk:wght@400;500;600;700&family=Jost:wght@400;500;600&display=swap');

:root {
  /* ========================================================
     1. COLOR — Teal (SOMA): structure, trust, authority
     Anchored to the logo mark/wordmark teal #285A78
     ======================================================== */
  --soma-900: #102A38; /* darkest ink-teal — deep headings on tint */
  --soma-800: #1C4257;
  --soma-700: #285A78; /* PRIMARY BRAND — logo color, headers */
  --soma-600: #33708F;
  --soma-500: #3E7593; /* primary interactive / links */
  --soma-300: #9DBBCB; /* tints, borders */
  --soma-200: #C6D8E1;
  --soma-100: #E3EBF0; /* soft teal background */

  /* ========================================================
     2. COLOR — Rose (BitterRose): identity, conversion
     Anchored to the logo mark rose #A05A64. Rose is an accent
     only — primary actions and brand moments, never large fills.
     ======================================================== */
  --rose-900: #4E1F29; /* deep accent text */
  --rose-800: #883E4D; /* CTA fill (AA on white) */
  --rose-700: #A05A64; /* BRAND ROSE — logo mark color */
  --logo-rose: #A85C6E; /* logo rose, used for list bullets and checkmarks */
  --rose-500: #BE7882; /* hover / highlight */
  --rose-300: #D2A0AA; /* tints */
  --rose-200: #E6BEC8; /* blush — from logo center petal */
  --rose-100: #F4E4E8; /* soft rose background */

  /* ========================================================
     3. COLOR — Neutrals (warm paper)
     ======================================================== */
  --ink-900: #16191C; /* primary text */
  --ink-700: #3A4146; /* secondary text */
  --ink-500: #6B747A; /* muted text */
  --ink-400: #8C9398;
  --ink-300: #B9C0C4; /* borders */
  --ink-200: #E6E2DD; /* warm dividers */
  --paper-50: #FAF7F4; /* page background (warm ivory) */
  --white:    #FFFFFF; /* surfaces */

  /* ========================================================
     4. COLOR — Semantic
     ======================================================== */
  --success: #2E7D5B;
  --warning: #B7791F;
  --error:   #B3261E;
  --info:    #2E7782;

  /* ========================================================
     5. SEMANTIC ALIASES (use these in components)
     ======================================================== */
  --bg:            var(--paper-50);
  --surface:       var(--white);
  --surface-tint:  var(--soma-100);
  --fg1:           var(--ink-900); /* primary text */
  --fg2:           var(--ink-700); /* secondary text */
  --fg3:           var(--ink-500); /* muted text */
  --heading:       var(--soma-700);
  --link:          var(--soma-500);
  --border:        var(--ink-200);
  --border-strong: var(--ink-300);
  --primary:       var(--rose-800); /* CTA fill */
  --primary-hover: var(--rose-900);
  --accent:        var(--rose-700);
  --focus-ring:    var(--soma-500);

  /* ========================================================
     6. TYPE FAMILIES
     - Spectral  : editorial serif, headings. Precise, intelligent,
                   medical-journal warmth. Carries the "physiological
                   detective" authority.
     - Hanken Grotesk : warm precise grotesque, body + UI. Clinical
                   clarity without Inter's ubiquity.
     - Jost      : geometric sans for eyebrows / tracked labels /
                   credential chips — echoes the logo wordmark.
     ======================================================== */
  --font-display: 'Spectral', Georgia, 'Times New Roman', serif;
  --font-body:    'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  --font-eyebrow: 'Jost', var(--font-body);

  /* ---- Type scale — base 16px, ratio 1.25 (major third) ---- */
  --fs-display: 3.815rem; /* 61px — hero, large screens */
  --fs-h1:      3.052rem; /* 49px */
  --fs-h2:      2.441rem; /* 39px */
  --fs-h3:      1.953rem; /* 31px */
  --fs-h4:      1.563rem; /* 25px */
  --fs-body-lg: 1.25rem;  /* 20px — lead paragraph */
  --fs-body:    1rem;     /* 16px — default */
  --fs-small:   0.875rem; /* 14px — meta, labels */
  --fs-caption: 0.75rem;  /* 12px — legal, captions */

  --lh-tight: 1.1;   /* @kind font */
  --lh-snug:  1.25;  /* @kind font */
  --lh-body:  1.6;   /* @kind font */

  /* ========================================================
     7. SPACE — 8px grid (4 allowed for fine tuning)
     ======================================================== */
  --space-0: 0;
  --space-1: 0.25rem; /* 4 */
  --space-2: 0.5rem;  /* 8 */
  --space-3: 0.75rem; /* 12 */
  --space-4: 1rem;    /* 16 */
  --space-5: 1.5rem;  /* 24 */
  --space-6: 2rem;    /* 32 */
  --space-7: 2.5rem;  /* 40 */
  --space-8: 3rem;    /* 48 */
  --space-9: 4rem;    /* 64 */
  --space-10: 5rem;   /* 80 */
  --space-11: 6rem;   /* 96 */
  --space-12: 8rem;   /* 128 */

  /* ---- Radii ---- */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  /* ---- Elevation (soft, warm-tinted shadows) ---- */
  --shadow-1: 0 1px 2px rgba(16,42,56,0.06), 0 1px 3px rgba(16,42,56,0.08);
  --shadow-2: 0 4px 12px rgba(16,42,56,0.08), 0 2px 4px rgba(16,42,56,0.06);
  --shadow-3: 0 12px 32px rgba(16,42,56,0.14), 0 4px 8px rgba(16,42,56,0.08);

  /* ---- Layout ---- */
  --container: 1200px;
  --prose: 68ch;

  /* ---- Motion ---- */
  --ease-standard:   cubic-bezier(0.2, 0, 0, 1); /* @kind other */
  --ease-decelerate: cubic-bezier(0, 0, 0, 1);   /* @kind other */
  --ease-accelerate: cubic-bezier(0.4, 0, 1, 1); /* @kind other */
  --dur-micro: 100ms; /* @kind other */
  --dur-sm: 150ms;    /* @kind other */
  --dur-md: 250ms;    /* @kind other */
  --dur-lg: 350ms;    /* @kind other */
}

/* ============================================================
   SEMANTIC TYPE CLASSES
   ============================================================ */
.eyebrow {
  font-family: var(--font-eyebrow);
  font-weight: 500;
  font-size: var(--fs-caption);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--rose-700);
}
.h1, h1 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h1); line-height: var(--lh-tight); color: var(--heading); letter-spacing: -0.01em; }
.h2, h2 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h2); line-height: 1.15; color: var(--heading); letter-spacing: -0.005em; }
.h3, h3 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h3); line-height: 1.2; color: var(--heading); }
.h4, h4 { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-h4); line-height: var(--lh-snug); color: var(--heading); }
.display { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-display); line-height: 1.05; color: var(--heading); letter-spacing: -0.015em; }
.lead { font-family: var(--font-body); font-weight: 400; font-size: var(--fs-body-lg); line-height: 1.5; color: var(--fg2); }
.body, p { font-family: var(--font-body); font-weight: 400; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--fg2); }
.small { font-family: var(--font-body); font-size: var(--fs-small); line-height: 1.5; color: var(--fg3); }
.caption { font-family: var(--font-body); font-size: var(--fs-caption); line-height: 1.4; font-weight: 500; color: var(--fg3); }
.cert-chip {
  font-family: var(--font-eyebrow);
  font-weight: 500;
  font-size: var(--fs-caption);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--soma-700);
}