/* =============================================================================
 * AMA — Design Tokens
 * -----------------------------------------------------------------------------
 * Drop-in repaint of the Biovital parent theme. Override the parent's CSS
 * variables on :root from the child theme, so structural CSS stays untouched.
 *
 * Where this loads: child theme functions.php should enqueue tokens.css
 * AFTER the parent stylesheet so its variables win the cascade.
 *
 * Color philosophy:
 *   - Brand primary  = AMA logo color (placeholder, swap for real hex)
 *   - Brand accent   = secondary/warm tone for CTA contrast
 *   - Sage tints     = inherited from Biovital, kept for ambient warmth
 *   - Text/surface   = WCAG 2.2 AA-compliant pairings (4.5:1+ for body text)
 *
 * IMPORTANT: ALL placeholder values are tagged with /* TODO:logo */ /* — replace
 * once the AMA logo file or hex codes land. Until then, these are sane neutrals
 * that won't embarrass anyone if shown to a stakeholder by mistake.
 * ========================================================================== */

:root {

  /* -- Brand colors --------------------------------------------------------- */
  --ama-primary:        #3a7d6e;            /* TODO:logo — deep sage placeholder */
  --ama-primary-50:     #eaf3f0;
  --ama-primary-100:    #cfe3dc;
  --ama-primary-200:    #a6cfc2;
  --ama-primary-500:    #3a7d6e;            /* same as --ama-primary */
  --ama-primary-600:    #2f6a5d;
  --ama-primary-700:    #25564b;            /* hover */
  --ama-primary-900:    #133329;            /* text on primary tint */

  --ama-accent:         #c98a4b;            /* TODO:logo — warm gold placeholder for CTA contrast */
  --ama-accent-600:     #b3753b;            /* hover */
  --ama-accent-100:     #f5e9d8;

  --ama-on-primary:     #ffffff;            /* text on solid primary */
  --ama-on-accent:      #1a1a1a;

  /* -- Neutrals ------------------------------------------------------------- */
  --ama-bg:             #ffffff;
  --ama-bg-alt:         #f8f6f2;            /* warm off-white, section breaks */
  --ama-bg-tint:        #eef3f1;            /* subtle primary-tinted band */
  --ama-surface:        #ffffff;
  --ama-border:         #e3e0d8;
  --ama-divider:        #ecebe6;

  --ama-text:           #1c1c1c;            /* body — 16:1 on white */
  --ama-text-muted:     #5a5a5a;            /* secondary — 7:1 on white */
  --ama-text-soft:      #7d7d7d;            /* metadata, eyebrow uppercase */
  --ama-link:           var(--ama-primary-600);
  --ama-link-hover:     var(--ama-primary-700);

  /* -- Status colors -------------------------------------------------------- */
  --ama-success:        #2f7a4f;
  --ama-warn:           #b46d00;
  --ama-danger:         #b3261e;
  --ama-info:           #2563b3;

  /* -- Typography ----------------------------------------------------------- */
  /* Biovital pairs a serif heading face with a clean sans body.
     Web-safe fallbacks first; replace the named families when type is finalized. */
  --ama-font-serif:     'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  --ama-font-sans:      'Inter', 'Helvetica Neue', Arial, sans-serif;
  --ama-font-mono:      'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --ama-h1-size:        clamp(2.25rem, 4.5vw, 3.5rem);
  --ama-h2-size:        clamp(1.75rem, 3vw, 2.5rem);
  --ama-h3-size:        clamp(1.375rem, 2.2vw, 1.75rem);
  --ama-h4-size:        1.25rem;
  --ama-body-size:      1.0625rem;          /* 17px — comfortable for medical reading */
  --ama-body-size-sm:   0.9375rem;          /* 15px */
  --ama-eyebrow-size:   0.8125rem;          /* 13px, uppercase */

  --ama-h1-weight:      500;                /* serif looks right at medium, not bold */
  --ama-h2-weight:      500;
  --ama-body-weight:    400;
  --ama-bold-weight:    600;

  --ama-h1-leading:     1.1;
  --ama-h2-leading:     1.15;
  --ama-body-leading:   1.65;
  --ama-tight-leading:  1.3;

  --ama-letter-eyebrow: 0.16em;             /* tracked-out small caps feel */
  --ama-letter-heading: -0.01em;

  /* -- Spacing scale (8-pt baseline, named for clarity) ------------------- */
  --ama-space-1:        0.25rem;             /* 4 */
  --ama-space-2:        0.5rem;              /* 8 */
  --ama-space-3:        0.75rem;             /* 12 */
  --ama-space-4:        1rem;                /* 16 */
  --ama-space-5:        1.5rem;              /* 24 */
  --ama-space-6:        2rem;                /* 32 */
  --ama-space-7:        3rem;                /* 48 */
  --ama-space-8:        4rem;                /* 64 */
  --ama-space-9:        6rem;                /* 96 */
  --ama-space-10:       8rem;                /* 128 */

  --ama-section-y:      clamp(3rem, 7vw, 6rem);   /* vertical padding for major sections */

  /* -- Reading width (prose discipline) ------------------------------------ */
  --ama-reading-w:      760px;
  --ama-narrow-w:       640px;
  --ama-wide-w:         1200px;
  --ama-page-w:         1440px;

  /* -- Radii ---------------------------------------------------------------- */
  --ama-radius-sm:      4px;
  --ama-radius:         8px;
  --ama-radius-lg:      14px;
  --ama-radius-pill:    999px;

  /* -- Shadows -------------------------------------------------------------- */
  --ama-shadow-sm:      0 1px 2px rgba(20, 30, 28, 0.06);
  --ama-shadow:         0 4px 16px rgba(20, 30, 28, 0.08);
  --ama-shadow-lg:      0 12px 32px rgba(20, 30, 28, 0.10);
  --ama-shadow-focus:   0 0 0 3px rgba(58, 125, 110, 0.35);  /* a11y focus ring */

  /* -- Motion --------------------------------------------------------------- */
  --ama-ease:           cubic-bezier(0.2, 0.8, 0.2, 1);
  --ama-dur-fast:       120ms;
  --ama-dur:            220ms;
  --ama-dur-slow:       420ms;

  /* -- Z-index scale -------------------------------------------------------- */
  --ama-z-base:         1;
  --ama-z-sticky:       100;
  --ama-z-overlay:      400;
  --ama-z-modal:        500;
  --ama-z-toast:        600;

  /* -- Biovital parent overrides (write the same variables they consume) --- */
  /* These are the keys the Biovital theme uses internally. Mirror our brand
     tokens into them so structural CSS picks up the repaint automatically.
     Discover the actual list by inspecting the theme; common ones below. */
  --cmsmasters-color-primary:   var(--ama-primary);
  --cmsmasters-color-secondary: var(--ama-accent);
  --cmsmasters-color-text:      var(--ama-text);
  --cmsmasters-color-link:      var(--ama-link);
  --cmsmasters-color-link-hover:var(--ama-link-hover);
  --cmsmasters-color-bg:        var(--ama-bg);
  --cmsmasters-color-bg-alt:    var(--ama-bg-alt);
  --cmsmasters-font-heading:    var(--ama-font-serif);
  --cmsmasters-font-body:       var(--ama-font-sans);
}

/* -- Dark surface overrides for hero/section variants -------------------- */
.ama-on-dark {
  --ama-text:        #f4f1ea;
  --ama-text-muted:  #cfcec7;
  --ama-bg:          #133329;
  --ama-link:        var(--ama-accent-100);
  --ama-link-hover:  #ffffff;
}

/* -- Reduced motion ------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --ama-dur-fast: 0ms;
    --ama-dur:      0ms;
    --ama-dur-slow: 0ms;
  }
}

/* -- Forced-colors (Windows High Contrast) -------------------------------- */
@media (forced-colors: active) {
  :root {
    --ama-shadow-focus: 0 0 0 3px CanvasText;
  }
}

/* -- Reading-width discipline utility ------------------------------------- */
.ama-reading { max-width: var(--ama-reading-w); margin-inline: auto; }
.ama-narrow  { max-width: var(--ama-narrow-w);  margin-inline: auto; }
.ama-wide    { max-width: var(--ama-wide-w);    margin-inline: auto; }

/* -- Eyebrow / kicker pattern (Biovital-style "###### eyebrow") ----------- */
.ama-eyebrow {
  font-family: var(--ama-font-sans);
  font-size: var(--ama-eyebrow-size);
  letter-spacing: var(--ama-letter-eyebrow);
  text-transform: uppercase;
  color: var(--ama-primary-700);
  font-weight: 600;
}

/* -- Pill button (matches Biovital's button shape) ------------------------ */
.ama-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--ama-space-2);
  padding: 0.875rem 1.75rem;
  border-radius: var(--ama-radius-pill);
  font-family: var(--ama-font-sans);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1;
  text-decoration: none;
  transition: background var(--ama-dur) var(--ama-ease),
              color      var(--ama-dur) var(--ama-ease),
              transform  var(--ama-dur) var(--ama-ease);
}
.ama-btn--primary {
  background: var(--ama-primary);
  color: var(--ama-on-primary);
}
.ama-btn--primary:hover { background: var(--ama-primary-700); }
.ama-btn--accent {
  background: var(--ama-accent);
  color: var(--ama-on-accent);
}
.ama-btn--accent:hover  { background: var(--ama-accent-600); }
.ama-btn--ghost {
  background: transparent;
  color: var(--ama-primary);
  box-shadow: inset 0 0 0 1.5px var(--ama-primary);
}
.ama-btn--ghost:hover { background: var(--ama-primary-50); }

.ama-btn:focus-visible {
  outline: none;
  box-shadow: var(--ama-shadow-focus);
}