/* ============================================================
   BRAND THEME — the ONE place to set colors.
   Every other stylesheet references these custom properties.
   Change a value here; the entire site updates.
   ============================================================ */

:root {
  /* ─── IDENTITY (replace with your brand) ─────────────────────── */
  --brand-primary:        #e8612d;
  --brand-primary-dark:   #c84e1f;
  --brand-primary-light:  var(--brand-primary-light);
  --brand-secondary:      #1e3a5f;
  --brand-secondary-2:    #0f172a;
  --brand-accent:         #f59e0b;
  --brand-accent-bg:      var(--brand-accent-bg);
  --brand-accent-fg:      var(--brand-accent-fg);

  /* ─── SURFACES ─────────────────────────────────────────────── */
  --brand-surface:        #ffffff;
  --brand-surface-alt:    #f8fafc;
  --brand-surface-border: #e2e8f0;

  /* ─── TEXT ─────────────────────────────────────────────────── */
  --brand-text:           #1e293b;
  --brand-text-muted:     #64748b;
  --brand-text-faint:     var(--brand-text-faint);
  --neutral-bg:           var(--neutral-bg);
  --neutral-fg:           var(--neutral-fg);

  /* ─── STATES ───────────────────────────────────────────────── */
  --brand-success:        var(--brand-success);  --brand-success-bg:    var(--brand-success-bg);
  --brand-success-fg:     var(--brand-success-fg);  --brand-success-dark:  var(--brand-success-dark);
  --brand-success-soft:   var(--brand-success-soft);  --brand-success-light: var(--brand-success-light);

  --brand-warning:        #f59e0b;  --brand-warning-bg:    var(--brand-warning-bg);
  --brand-warning-fg:     var(--brand-warning-fg);

  --brand-danger:         var(--brand-danger);  --brand-danger-bg:     var(--brand-danger-bg);
  --brand-danger-fg:      var(--brand-danger-fg);  --brand-danger-soft:   var(--brand-danger-soft);
  --brand-danger-light:   var(--brand-danger-light);

  --brand-info:           #3b82f6;  --brand-info-bg:       var(--brand-info-bg);
  --brand-info-fg:        var(--brand-info-fg);

  --brand-purple:         #8b5cf6;  --brand-purple-bg:     var(--brand-purple-bg);
  --brand-purple-fg:      var(--brand-purple-fg);

  --brand-teal:           #14b8a6;

  /* ─── ADMIN DARK THEME ─────────────────────────────────────── */
  --admin-bg:           #0b1220;
  --admin-surface:      #101a2e;
  --admin-text:         #e2e8f0;
  --admin-text-soft:    #cbd5e1;
  --admin-text-muted:   var(--brand-text-faint);
  --admin-text-faint:   #64748b;
  --admin-border:       rgba(255,255,255,.08);
  --admin-info:         #60a5fa;
  --admin-success:      #4ade80;
  --admin-success-soft: #34d399;
  --admin-warning:      #fbbf24;
  --admin-orange:       #fb923c;
  --admin-purple:       #a78bfa;
  --admin-danger:       #f87171;

  /* ─── TYPOGRAPHY ───────────────────────────────────────────── */
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;

  /* ─── LAYOUT ───────────────────────────────────────────────── */
  --section-py: 90px;
  --radius:    12px;
}

body.admin { background: var(--admin-bg); color: var(--admin-text); }

/* Themed heroes / hero wave */
.hero-wave-fill { fill: var(--brand-surface-alt); }
/* Brand text appears in primary color across component halves */
.brand-color { color: var(--brand-primary); }

/* ── ACCESSIBILITY ─────────────────────────────────────────────── */
.skip-link {
  position: absolute; top: -100px; left: 16px;
  background: var(--brand-primary); color: var(--brand-surface);
  padding: 10px 18px; border-radius: 8px;
  font-weight: 700; font-size: 14px;
  z-index: 9999; text-decoration: none;
  transition: top .2s ease;
}
.skip-link:focus { top: 16px; }
/* Respect user motion preference */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}
/* Forced-colors mode (Windows High Contrast) */
@media (forced-colors: active) {
  :focus-visible { outline: 3px solid Highlight; outline-offset: 2px; }
}