/* ══════════════════════════════════════════════════════════════
   AMY HARPER / PLURAL CREATIONS — DESIGN TOKENS v1.0
   Source of truth: amy-harper-visual-identity.md
   Do not add colors outside this block.
   ══════════════════════════════════════════════════════════════ */

@font-face { font-family: "Cabin"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/cabin-500.woff2") format("woff2"); }
@font-face { font-family: "Cabin"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/cabin-600.woff2") format("woff2"); }
@font-face { font-family: "Cabin"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/cabin-700.woff2") format("woff2"); }
@font-face { font-family: "Carlito"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/carlito-400.woff2") format("woff2"); }
@font-face { font-family: "Carlito"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/carlito-700.woff2") format("woff2"); }
@font-face { font-family: "Carlito"; font-style: italic; font-weight: 400; font-display: swap; src: url("fonts/carlito-400-italic.woff2") format("woff2"); }

:root {
  /* ── PRIMITIVES ─────────────────────────────────────────── */
  --ah-navy-950: #0D1B2A;
  --ah-navy-900: #142639;
  --ah-navy-800: #1B2F4E;
  --ah-navy-700: #2A4A70;

  --ah-blue-700: #1E5F99;
  --ah-blue-600: #2E6DA4;
  --ah-blue-100: #EBF5FF;
  --ah-blue-50:  #F0F4F8;

  --ah-teal-700: #0E6C78;
  --ah-teal-600: #0A7E8C;
  --ah-teal-300: #4CC3D0;
  --ah-teal-50:  #E0F4F5;

  --ah-gold-800: #7A5C0D;
  --ah-gold-700: #A67C0A;
  --ah-gold-500: #D4A017;
  --ah-gold-300: #E8B923;
  --ah-gold-50:  #FDF5DC;

  --ah-white:     #FFFFFF;
  --ah-off-white: #F8F9FA;
  --ah-mist:      #DCE3EA;
  --ah-slate-500: #64748B;
  --ah-slate-300: #8AAAC0;
  --ah-ink-900:   #1A1A1A;

  --ah-green-800: #166534;
  --ah-green-300: #4ADE80;
  --ah-green-50:  #DCFCE7;
  --ah-red-700:   #B42318;
  --ah-red-300:   #FDA29B;
  --ah-red-50:    #FEF3F2;

  /* ── TYPE ───────────────────────────────────────────────── */
  --ah-font-display: "Cabin", "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
  --ah-font-body:    "Carlito", "Calibri", "Segoe UI", system-ui, sans-serif;
  --ah-font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --ah-text-hero:    clamp(2.5rem, 1.6rem + 3.6vw, 3.5rem);
  --ah-text-h1:      clamp(2rem, 1.5rem + 2vw, 2.5rem);
  --ah-text-h2:      clamp(1.5rem, 1.3rem + 0.9vw, 1.75rem);
  --ah-text-h3:      1.25rem;
  --ah-text-stat:    clamp(2.25rem, 1.5rem + 3vw, 3rem);
  --ah-text-lg:      1.125rem;
  --ah-text-base:    1rem;
  --ah-text-sm:      0.875rem;
  --ah-text-xs:      0.8125rem;
  --ah-text-eyebrow: 0.6875rem;

  --ah-leading-tight:   1.1;
  --ah-leading-snug:    1.25;
  --ah-leading-normal:  1.5;
  --ah-leading-relaxed: 1.65;

  --ah-tracking-hero:    -0.02em;
  --ah-tracking-normal:  0;
  --ah-tracking-eyebrow: 0.22em;

  --ah-weight-regular: 400;
  --ah-weight-bold:    700;

  /* ── SPACE (8px base, 4px half-step) ────────────────────── */
  --ah-space-1:  0.25rem;
  --ah-space-2:  0.5rem;
  --ah-space-3:  0.75rem;
  --ah-space-4:  1rem;
  --ah-space-5:  1.5rem;
  --ah-space-6:  2rem;
  --ah-space-7:  2.5rem;
  --ah-space-8:  3rem;
  --ah-space-9:  4rem;
  --ah-space-10: 6rem;

  /* ── RADIUS ─────────────────────────────────────────────── */
  --ah-radius-none: 0;
  --ah-radius-sm:   2px;
  --ah-radius-md:   4px;
  --ah-radius-lg:   8px;
  --ah-radius-pill: 999px;

  /* ── ELEVATION (light theme only) ───────────────────────── */
  --ah-shadow-sm: 0 1px 3px rgba(13, 27, 42, 0.08);
  --ah-shadow-md: 0 3px 8px rgba(13, 27, 42, 0.12);
  --ah-shadow-lg: 0 8px 24px rgba(13, 27, 42, 0.14);

  /* ── LAYOUT ─────────────────────────────────────────────── */
  --ah-container:   1280px;
  --ah-measure:     68ch;
  --ah-gutter:      var(--ah-space-5);
  --ah-stripe:      4px;
  --ah-bar-height:  52px;

  /* ── MOTION ─────────────────────────────────────────────── */
  --ah-duration-fast: 120ms;
  --ah-duration-base: 180ms;
  --ah-duration-slow: 260ms;
  --ah-ease: cubic-bezier(0.2, 0, 0, 1);
}

/* Semantic tokens are scoped to .ah-scope, not :root/html, so this
   rollout (homepage only) cannot affect any other page's styling
   while the rest of the site is still on the old system. */

.ah-scope,
.ah-scope[data-theme="light"] {
  --surface-page:          var(--ah-off-white);
  --surface-raised:        var(--ah-white);
  --surface-sunken:        var(--ah-blue-50);
  --surface-accent:        var(--ah-teal-50);
  --surface-accent-warm:   var(--ah-gold-50);
  --surface-card-a:        var(--ah-blue-100);
  --surface-card-b:        var(--ah-gold-50);
  --surface-inverse:       var(--ah-navy-950);

  --text-primary:     var(--ah-ink-900);
  --text-heading:     var(--ah-navy-800);
  --text-subheading:  var(--ah-blue-600);
  --text-muted:       var(--ah-slate-500);
  --text-accent:      var(--ah-teal-600);
  --text-stat:        var(--ah-gold-800);
  --text-on-accent:   var(--ah-white);
  --text-on-gold:     var(--ah-navy-950);
  --text-inverse:     var(--ah-white);

  --border-subtle:    var(--ah-mist);
  --border-strong:    var(--ah-slate-500);
  --border-accent:    var(--ah-teal-600);

  --action-primary:        var(--ah-teal-600);
  --action-primary-hover:  var(--ah-teal-700);
  --action-primary-text:   var(--ah-white);
  --action-secondary-border: var(--ah-blue-700);
  --action-secondary-text:   var(--ah-blue-700);

  --highlight-fill:     var(--ah-gold-500);
  --highlight-graphic:  var(--ah-gold-700);

  --link:        var(--ah-teal-600);
  --link-hover:  var(--ah-teal-700);
  --focus-ring:  var(--ah-blue-700);

  --success-text: var(--ah-green-800);
  --success-fill: var(--ah-green-50);
  --danger-text:  var(--ah-red-700);
  --danger-fill:  var(--ah-red-50);

  --elevation-1: var(--ah-shadow-sm);
  --elevation-2: var(--ah-shadow-md);
  --elevation-3: var(--ah-shadow-lg);
}

.ah-scope[data-theme="dark"] {
  --surface-page:          var(--ah-navy-950);
  --surface-raised:        var(--ah-navy-900);
  --surface-sunken:        var(--ah-navy-800);
  --surface-accent:        var(--ah-navy-800);
  --surface-accent-warm:   var(--ah-navy-800);
  --surface-card-a:        var(--ah-navy-800);
  --surface-card-b:        var(--ah-navy-800);
  --surface-inverse:       var(--ah-white);

  --text-primary:     var(--ah-white);
  --text-heading:     var(--ah-white);
  --text-subheading:  var(--ah-teal-300);
  --text-muted:       var(--ah-slate-300);
  --text-accent:      var(--ah-teal-300);
  --text-stat:        var(--ah-gold-500);
  --text-on-accent:   var(--ah-navy-950);
  --text-on-gold:     var(--ah-navy-950);
  --text-inverse:     var(--ah-ink-900);

  --border-subtle:    var(--ah-navy-700);
  --border-strong:    var(--ah-slate-300);
  --border-accent:    var(--ah-teal-300);

  --action-primary:        var(--ah-teal-300);
  --action-primary-hover:  var(--ah-teal-50);
  --action-primary-text:   var(--ah-navy-950);
  --action-secondary-border: var(--ah-slate-300);
  --action-secondary-text:   var(--ah-white);

  --highlight-fill:     var(--ah-gold-500);
  --highlight-graphic:  var(--ah-gold-500);

  --link:        var(--ah-teal-300);
  --link-hover:  var(--ah-teal-50);
  --focus-ring:  var(--ah-gold-500);

  --success-text: var(--ah-green-300);
  --success-fill: var(--ah-navy-800);
  --danger-text:  var(--ah-red-300);
  --danger-fill:  var(--ah-navy-800);

  --elevation-1: none;
  --elevation-2: none;
  --elevation-3: none;
}

/* ══════════════════════════════════════════════════════════════
   BASE + COMPONENTS — scoped to .ah-scope, reusable sitewide
   ══════════════════════════════════════════════════════════════ */

.ah-scope {
  color-scheme: light dark;
  background: var(--surface-page);
  color: var(--text-primary);
  font-family: var(--ah-font-body);
  font-size: var(--ah-text-base);
  line-height: var(--ah-leading-relaxed);
}
.ah-scope * { box-sizing: border-box; }
.ah-scope img { max-width: 100%; display: block; }
.ah-scope h1, .ah-scope h2, .ah-scope h3 {
  font-family: var(--ah-font-display);
  font-weight: var(--ah-weight-bold);
  color: var(--text-heading);
  margin: 0;
  text-wrap: balance;
}
.ah-scope p { max-width: var(--ah-measure); margin: 0; }

.ah-scope [id] { scroll-margin-top: 100px; }

.ah-container { max-width: var(--ah-container); margin: 0 auto; padding: 0 var(--ah-space-5); }
@media (min-width: 768px) { .ah-container { padding: 0 var(--ah-space-6); } }

/* eyebrow — signature element */
.ah-eyebrow {
  font-family: var(--ah-font-body);
  font-weight: var(--ah-weight-bold);
  font-size: var(--ah-text-eyebrow);
  letter-spacing: var(--ah-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-accent);
  display: block;
  margin-bottom: var(--ah-space-3);
}
.ah-eyebrow-rule {
  width: 64px; height: 2px;
  background: var(--highlight-graphic);
  border: none;
  margin: var(--ah-space-2) 0 var(--ah-space-5);
}

/* buttons */
.ah-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--ah-space-2);
  min-height: 44px; padding: 12px 24px;
  font-family: var(--ah-font-display); font-weight: 600; font-size: var(--ah-text-base);
  border-radius: var(--ah-radius-md); border: 1px solid transparent;
  cursor: pointer; text-decoration: none;
  transition: background var(--ah-duration-base) var(--ah-ease), border-color var(--ah-duration-base) var(--ah-ease), filter var(--ah-duration-base) var(--ah-ease);
}
.ah-btn-primary { background: var(--action-primary); color: var(--action-primary-text); }
.ah-btn-primary:hover { background: var(--action-primary-hover); }
.ah-btn-primary:active { filter: brightness(0.92); }
.ah-btn-secondary { background: transparent; border-color: var(--action-secondary-border); color: var(--action-secondary-text); }
.ah-btn-highlight { background: var(--highlight-fill); color: var(--text-on-gold); }

/* links */
.ah-link {
  color: var(--link);
  text-underline-offset: 0.15em; text-decoration-thickness: 1px; text-decoration-line: underline;
  transition: color var(--ah-duration-base) var(--ah-ease);
}
.ah-link:hover { color: var(--link-hover); text-decoration-thickness: 2px; }

/* focus */
.ah-scope a:focus-visible, .ah-scope button:focus-visible, .ah-scope input:focus-visible {
  outline: 2px solid var(--focus-ring); outline-offset: 2px;
}

/* card */
.ah-card {
  background: var(--surface-raised);
  border-radius: var(--ah-radius-md);
  padding: var(--ah-space-5);
  box-shadow: var(--elevation-2);
  border: 1px solid transparent;
}
.ah-scope[data-theme="dark"] .ah-card { border-color: var(--border-subtle); }
.ah-card-stripe-teal { border-left: var(--ah-stripe) solid var(--border-accent); border-radius: var(--ah-radius-md) 0 0 var(--ah-radius-md); }
.ah-card-stripe-gold { border-left: var(--ah-stripe) solid var(--highlight-fill); border-radius: var(--ah-radius-md) 0 0 var(--ah-radius-md); }

/* section label bar */
.ah-bar {
  height: var(--ah-bar-height); display: flex; align-items: center;
  padding: 0 var(--ah-space-5);
  font-family: var(--ah-font-body); font-weight: 700; font-size: var(--ah-text-eyebrow);
  letter-spacing: var(--ah-tracking-eyebrow); text-transform: uppercase;
}

/* form */
.ah-field { margin-bottom: var(--ah-space-4); }
.ah-field label { display: block; font-family: var(--ah-font-body); font-weight: 700; font-size: var(--ah-text-sm); color: var(--text-heading); margin-bottom: var(--ah-space-2); }
.ah-field input {
  width: 100%; min-height: 44px; padding: 0 var(--ah-space-4);
  border-radius: var(--ah-radius-md); border: 1px solid var(--border-strong);
  background: var(--surface-raised); color: var(--text-primary);
  font-family: var(--ah-font-body); font-size: var(--ah-text-base);
}
.ah-field input::placeholder { color: var(--text-muted); }

/* ══════════════════════════════════════════════════════════════
   Elementor Pro form widget — real functional form, restyled
   in place with token primitives (this lives outside .ah-scope,
   so semantic tokens aren't available; primitives are global).
   ══════════════════════════════════════════════════════════════ */
.elementor-widget-form .elementor-field-label {
  /* was screen-reader-only in the old markup: spec requires a visible label */
  position: static !important; width: auto !important; height: auto !important;
  clip: auto !important; clip-path: none !important; overflow: visible !important;
  margin: 0 0 var(--ah-space-2) !important;
  font-family: var(--ah-font-body); font-weight: 700; font-size: var(--ah-text-sm);
  color: var(--ah-white);
}
.elementor-widget-form .elementor-field-textual {
  background: var(--ah-navy-900) !important;
  border: 1px solid var(--ah-slate-300) !important;
  border-radius: var(--ah-radius-md) !important;
  color: var(--ah-white) !important;
  min-height: 44px;
  font-family: var(--ah-font-body) !important;
}
.elementor-widget-form .elementor-field-textual::placeholder { color: var(--ah-slate-300); }
.elementor-widget-form .elementor-field-textual:focus {
  outline: 2px solid var(--ah-gold-500) !important; outline-offset: 2px;
  border-color: var(--ah-gold-500) !important;
}
.elementor-widget-form .elementor-button {
  background: var(--ah-teal-300) !important;
  color: var(--ah-navy-950) !important;
  border-radius: var(--ah-radius-md) !important;
  font-family: var(--ah-font-display) !important;
  font-weight: 600 !important;
  min-height: 44px;
}
.elementor-widget-form .elementor-button:hover { background: var(--ah-teal-50) !important; }

/* ══════════════════════════════════════════════════════════════
   Royal Elementor Addons grid widget — the real dynamic blog
   post loop, restyled in place with token primitives so new
   posts published later stay on-brand automatically.
   ══════════════════════════════════════════════════════════════ */
.wpr-grid-item {
  background: var(--ah-navy-900) !important;
  border-radius: var(--ah-radius-md) !important;
  border-left: var(--ah-stripe) solid var(--ah-teal-300) !important;
  padding: var(--ah-space-5) !important;
}
.wpr-grid-item-title, .wpr-grid-item-title a {
  font-family: var(--ah-font-display) !important;
  font-weight: 600 !important;
  color: var(--ah-white) !important;
}
.wpr-grid-item-read-more a {
  color: var(--ah-teal-300) !important;
  font-family: var(--ah-font-body) !important;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
.wpr-grid-filters-item {
  font-family: var(--ah-font-body) !important;
  color: var(--ah-slate-300) !important;
}
.wpr-grid-filters-item.wpr-active-filter { color: var(--ah-teal-300) !important; }

/* ══════════════════════════════════════════════════════════════
   Single blog post template (Astra native, not Elementor) —
   restyled globally via primitives so every post, including
   future ones, stays on-brand without per-post editing.
   ══════════════════════════════════════════════════════════════ */
body.single-post {
  background: var(--ah-navy-950) !important;
  color: var(--ah-white) !important;
}
body.single-post #page,
body.single-post .site-content,
body.single-post .ast-container,
body.single-post #primary,
body.single-post #primary.content-area,
body.single-post #main,
body.single-post article { background: transparent !important; }

body.single-post .entry-header { padding-top: var(--ah-space-8); }
body.single-post .entry-title {
  font-family: var(--ah-font-display) !important;
  font-weight: 700 !important;
  color: var(--ah-white) !important;
  font-size: var(--ah-text-h1) !important;
  line-height: var(--ah-leading-tight) !important;
  max-width: var(--ah-measure);
}
body.single-post .entry-meta {
  font-family: var(--ah-font-body) !important;
  color: var(--ah-slate-300) !important;
  font-size: var(--ah-text-sm) !important;
}
body.single-post .entry-meta a { color: var(--ah-slate-300) !important; }

body.single-post .entry-content {
  font-family: var(--ah-font-body) !important;
  color: var(--ah-white) !important;
  font-size: var(--ah-text-base) !important;
  line-height: var(--ah-leading-relaxed) !important;
  max-width: var(--ah-measure);
}
body.single-post .entry-content p { margin-bottom: var(--ah-space-5); color: var(--ah-white); }
body.single-post .entry-content h2 {
  font-family: var(--ah-font-display) !important; font-weight: 700 !important;
  color: var(--ah-teal-300) !important; font-size: var(--ah-text-h2) !important;
  margin: var(--ah-space-7) 0 var(--ah-space-4) !important;
}
body.single-post .entry-content h3 {
  font-family: var(--ah-font-display) !important; font-weight: 600 !important;
  color: var(--ah-white) !important; font-size: var(--ah-text-h3) !important;
  margin: var(--ah-space-6) 0 var(--ah-space-3) !important;
}
body.single-post .entry-content a {
  color: var(--ah-teal-300) !important;
  text-decoration: underline; text-underline-offset: 0.15em;
}
body.single-post .entry-content ul, body.single-post .entry-content ol {
  color: var(--ah-white); margin-bottom: var(--ah-space-5);
}
body.single-post .entry-content img { border-radius: var(--ah-radius-md); }
body.single-post .entry-content blockquote {
  border-left: var(--ah-stripe) solid var(--ah-teal-300);
  background: var(--ah-navy-900);
  padding: var(--ah-space-5); margin: var(--ah-space-6) 0;
  font-style: italic; color: var(--ah-slate-300);
}

/* reveal (fade-and-rise-8px, once) */
.ah-reveal { opacity: 0; transform: translateY(8px); transition: opacity var(--ah-duration-slow) var(--ah-ease), transform var(--ah-duration-slow) var(--ah-ease); }
.ah-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .ah-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}