/*
 * Savvy Child — Design Tokens
 *
 * Single source of truth for colour, type, spacing, radius, shadows.
 * Token naming is semantic (--brand-primary, not --color-black) so values
 * can change without changing meaning.
 */

:root {
  /* ─── Brand ─────────────────────────────────────────────────── */
  --brand-primary:        #111111;
  --brand-primary-soft:   #1a1a1a;
  --brand-accent:         #111111;
  --brand-accent-hover:   #2a2a2a;
  --brand-emphasis:       #FFD500;

  /* ─── Surfaces ──────────────────────────────────────────────── */
  --surface-base:         #ffffff;
  --surface-alt:          #f4f4f5;
  --surface-inverse:      #111111;

  /* ─── Text ──────────────────────────────────────────────────── */
  --text-default:         #111111;
  --text-muted:           #5a5a5a;
  --text-on-dark:         #ffffff;
  --text-link:            var(--brand-accent);
  --text-link-hover:      var(--brand-accent-hover);

  /* ─── Borders ───────────────────────────────────────────────── */
  --border-default:       #e5e5e5;
  --border-strong:        #c5c5c5;
  --border-on-dark:       #2a2a2a;

  /* ─── State ─────────────────────────────────────────────────── */
  --state-success:        #16a34a;
  --state-warning:        #d97706;
  --state-danger:         #b91c1c;
  --state-info:           #2563eb;

  /* ─── Typography ────────────────────────────────────────────── */
  /*
   * Loaded from Google Fonts via wp_enqueue_style in functions.php.
   * Pairing: Newsreader (display serif) + Geist (sans body). Documentary
   * editorial direction. Banned by frontend-design philosophy: Inter,
   * Roboto, Arial, Space Grotesk.
   */
  --font-sans:            "Geist", "Geist Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", "Helvetica Neue", sans-serif;
  /* Single-font site (Manik round-2, 2026-07-06): display headings now use the
     same Geist sans as body text, so one font renders throughout. To restore the
     serif display pairing, revert to:
     "Newsreader", "Iowan Old Style", Georgia, "Times New Roman", serif; */
  --font-display:         "Geist", "Geist Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", "Helvetica Neue", sans-serif;
  --font-mono:            ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  --fs-xs:                0.75rem;
  --fs-sm:                0.875rem;
  --fs-base:              1rem;
  --fs-md:                1.125rem;
  --fs-lg:                1.25rem;
  --fs-xl:                1.5rem;
  --fs-2xl:               1.875rem;
  --fs-3xl:               2.5rem;
  --fs-4xl:               3.25rem;
  --fs-hero:              4rem;

  --fw-regular:           400;
  --fw-medium:            500;
  --fw-semibold:          600;
  --fw-bold:              700;

  --lh-tight:             1.15;
  --lh-snug:              1.3;
  --lh-normal:            1.5;
  --lh-loose:             1.7;

  --tracking-tight:       -0.01em;
  --tracking-normal:      0;
  --tracking-wide:        0.02em;
  --tracking-uppercase:   0.08em;

  /* ─── Spacing (4px base) ────────────────────────────────────── */
  --space-1:              0.25rem;
  --space-2:              0.5rem;
  --space-3:              0.75rem;
  --space-4:              1rem;
  --space-5:              1.5rem;
  --space-6:              2rem;
  --space-7:              3rem;
  --space-8:              4rem;
  --space-9:              6rem;
  --space-10:             8rem;

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

  /* ─── Shadow ────────────────────────────────────────────────── */
  --shadow-sm:            0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md:            0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg:            0 12px 32px rgba(0, 0, 0, 0.12);

  /* ─── Breakpoints (JS reference) ────────────────────────────── */
  --bp-mobile:            480px;
  --bp-tablet:            768px;
  --bp-desktop:           1024px;
  --bp-wide:              1440px;

  /* ─── Layout ────────────────────────────────────────────────── */
  --container-max:        1200px;
  --container-padding:    var(--space-5);
}

/*
 * Astra + Elementor bridge — keeps default theme/plugin chrome in sync
 * with our tokens. No double bookkeeping.
 */
:root {
  --ast-global-color-0:   var(--brand-primary);
  --ast-global-color-1:   var(--brand-accent-hover);
  --ast-global-color-2:   var(--text-default);
  --ast-global-color-3:   var(--text-muted);
  --ast-global-color-4:   var(--surface-base);
  --ast-global-color-5:   var(--surface-alt);
  --ast-global-color-6:   var(--surface-inverse);
  --ast-global-color-7:   var(--text-on-dark);
  --ast-global-color-8:   var(--border-default);

  --e-global-color-primary:   var(--brand-primary);
  --e-global-color-secondary: var(--brand-accent);
  --e-global-color-text:      var(--text-default);
  --e-global-color-accent:    var(--brand-accent-hover);
}