/* ── RD COACHING — DESIGN TOKENS ──────────────────────────────────────────
   Single source of truth for all CSS custom properties.
   All HTML pages must link this file instead of duplicating :root blocks.
   ──────────────────────────────────────────────────────────────────────── */

:root {
  /* ── Section: Dark ── */
  --dark-bg:        #41475b;
  --dark-heading:   #e5cfb5;
  --dark-body:      #ffffff;
  --dark-muted:     #a7afc3;
  --dark-accent:    #e5cfb5;
  --dark-card-bg:   rgba(255,255,255,0.06);
  --dark-divider:   #3d4358;
  --dark-overlay:   rgba(65, 71, 91, 0.45);

  /* ── Section: Soft Light ── */
  --soft-bg:        #f7f0e6;
  --soft-heading:   #41475b;
  --soft-body:      #41475b;
  --soft-muted:     #6b738b;
  --soft-accent:    #41475b;
  --soft-overlay:   rgba(247, 240, 230, 0.55);

  /* ── Section: White ── */
  --white-bg:       #ffffff;
  --white-heading:  #41475b;
  --white-body:     #41475b;
  --white-muted:    #6b738b;
  --white-accent:   #d8be9a;
  --white-divider:  #e8e2d9;

  /* ── Accent / Gold ── */
  --gold-warm:      #e3c299;
  --gold-soft:      #d8be9a;
  --gold-hover:     #d9b487;
  --gold-deep:      #cdb08a;

  /* ── State / Feedback ── */
  --state-error:    #c0392b;
  --state-success:  #27ae60;
  --state-warning:  #e67e22;
  --state-info:     #5d7a9e;

  /* ── Spacing (8px grid) ── */
  --sp-1:  0.25rem;   /* 4px  */
  --sp-2:  0.5rem;    /* 8px  */
  --sp-3:  0.75rem;   /* 12px */
  --sp-4:  1rem;      /* 16px */
  --sp-5:  1.5rem;    /* 24px */
  --sp-6:  2rem;      /* 32px */
  --sp-7:  2.5rem;    /* 40px */
  --sp-8:  3rem;      /* 48px */
  --sp-9:  4rem;      /* 64px */
  --sp-10: 5rem;      /* 80px */
  --sp-11: 5.625rem;  /* 90px */
  --sp-12: 6.25rem;   /* 100px */

  /* ── Max-widths ── */
  --mw-standard: 1060px;
  --mw-narrow:    760px;
  --mw-copy:      640px;
  --mw-sub:       520px;

  /* ── Component: Cards ── */
  --card-radius:        4px;
  --card-border-accent: 3px solid var(--gold-warm);
  --card-padding-v:     var(--sp-8);
  --card-padding-h:     var(--sp-6);

  /* ── Component: Buttons ── */
  --btn-padding:        14px 32px;
  --btn-radius:         4px;

  /* ── Section padding ── */
  --section-padding-desktop: var(--sp-10) var(--sp-7);
  --section-padding-mobile:  60px 20px;
}

/* ── Focus styles ─────────────────────────────────────────────────────────
   :focus-visible scopes to keyboard navigation only (not mouse clicks).
   Scoped per section theme so the ring is always visible.
   ──────────────────────────────────────────────────────────────────────── */

/* Dark sections: gold ring */
.s-dark :focus-visible {
  outline: 2px solid var(--gold-warm);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Light sections: brand-dark ring */
.s-soft :focus-visible,
.s-white :focus-visible {
  outline: 2px solid var(--dark-bg);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Fallback for elements outside a section theme (e.g. nav on dark-bg) */
:focus-visible {
  outline: 2px solid var(--gold-warm);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ── Reduced motion ───────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}