/* ========================================
   ChurchBuddy — Design Tokens
   Based on WorshipBuddy Design Guidelines v1.0
   ======================================== */

:root {
  /* Typography */
  --font-display: 'Instrument Serif', Georgia, serif;
  --font-body: 'Satoshi', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', 'Monaco', monospace;

  /* Global Palette */
  --bg: #FAFAF9;
  --surface: #F4F4F0;
  --border: #E4E4E7;
  --muted: #71717A;
  --ink: #18181B;
  --dark: #0F172A;

  /* ChurchBuddy — Sage Teal */
  --cb: #0B7261;
  --cb-light: #CCE9E4;
  --cb-dark: #074F43;

  /* WorshipBuddy — Navy */
  --wb: #0C245E;
  --wb-light: #DCE4F8;
  --wb-dark: #0A1A45;

  /* PresenterBuddy — Deep Horizon Teal */
  --pb: #1E6B8A;
  --pb-light: #D0E9F2;
  --pb-dark: #134F67;

  /* Semantic States */
  --success: #22C55E;
  --warning: #F59E0B;
  --error: #EF4444;
  --info: #3B82F6;

  /* Spacing (8px base) */
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 32px;
  --space-xl: 48px;
  --space-2xl: 64px;
  --space-3xl: 96px;

  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
  --shadow-card-hover: 0 8px 24px rgba(0, 0, 0, 0.12);

  /* Motion */
  --duration-micro: 100ms;
  --duration-short: 200ms;
  --duration-medium: 350ms;
  --duration-long: 550ms;
  --ease-enter: cubic-bezier(0.21, 0.47, 0.32, 0.98);
  --ease-hover: ease;

  /* Layout */
  --max-content: 1280px;
  --nav-height: 60px;

  /* Brand aliases (for backward compat) */
  --brand-color: var(--cb);
  --brand-hover: var(--cb-dark);
  --brand-light: var(--cb-light);

  /* Sunday School */
  --ss-brand-color: var(--warning);
  --ss-brand-hover: #D97706;
}

/* Focus ring — global */
*:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(11, 114, 97, 0.2);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}