/* Art direction: Church succession planning → Authoritative, pastoral, trustworthy
   Palette: Warm greens (forest/emerald) + amber accent. Deep, grounded, hopeful.
   Typography: Cormorant (display) + General Sans (body) — "rooted in tradition, equipped for the future"
   Density: Spacious — editorial landing page with generous whitespace */

/* ============================================
   CUSTOM PALETTE — ChurchSuccession Green/Amber
   ============================================ */

:root, [data-theme="light"] {
  /* Typography */
  --font-display: 'Cormorant', 'Georgia', serif;
  --font-body: 'General Sans', 'Helvetica Neue', sans-serif;

  /* Type Scale */
  --text-xs:   clamp(0.75rem,  0.7rem  + 0.25vw, 0.875rem);
  --text-sm:   clamp(0.875rem, 0.8rem  + 0.35vw, 1rem);
  --text-base: clamp(1rem,     0.95rem + 0.25vw, 1.125rem);
  --text-lg:   clamp(1.125rem, 1rem    + 0.75vw, 1.5rem);
  --text-xl:   clamp(1.5rem,   1.2rem  + 1.25vw, 2.25rem);
  --text-2xl:  clamp(2rem,     1.2rem  + 2.5vw,  3.5rem);
  --text-3xl:  clamp(2.5rem,   1rem    + 4vw,    5rem);
  --text-hero: clamp(3rem,     0.5rem  + 7vw,    8rem);

  /* 4px Spacing System */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* Surfaces — Light Mode (warm off-whites with green undertone) */
  --color-bg:               #F8F7F4;
  --color-surface:          #FFFFFF;
  --color-surface-2:        #F2F1ED;
  --color-surface-offset:   #EBE9E4;
  --color-surface-offset-2: #E4E2DC;
  --color-surface-dynamic:  #D8D5CE;
  --color-divider:          #D0CDC6;
  --color-border:           #C4C1BA;

  /* Text — Light Mode */
  --color-text:         #1A1F16;
  --color-text-muted:   #5C6356;
  --color-text-faint:   #9DA395;
  --color-text-inverse: #F0EDE8;

  /* Primary — Deep Forest Green */
  --color-primary:          #1B5E3B;
  --color-primary-hover:    #14492E;
  --color-primary-active:   #0E3621;
  --color-primary-highlight: #D1E5D8;

  /* Secondary — Emerald Green */
  --color-secondary:        #3A8F5C;
  --color-secondary-hover:  #2D7349;
  --color-secondary-active: #225A38;

  /* Accent — Amber/Gold */
  --color-accent:           #D4951A;
  --color-accent-hover:     #B87D14;
  --color-accent-active:    #9A6710;
  --color-accent-highlight: #F5EAD3;

  /* Semantic: Warning / Error / Success */
  --color-warning:          #D4951A;
  --color-warning-hover:    #B87D14;
  --color-warning-active:   #9A6710;
  --color-warning-highlight:#F5EAD3;

  --color-error:            #A13544;
  --color-error-hover:      #882D3A;
  --color-error-active:     #6E2430;
  --color-error-highlight:  #F0D9DC;

  --color-success:          #3A8F5C;
  --color-success-hover:    #2D7349;
  --color-success-active:   #225A38;
  --color-success-highlight:#D1E5D8;

  /* Dark section backgrounds */
  --color-dark-bg:          #1A2E22;
  --color-dark-surface:     #223828;

  /* Radius */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-full: 9999px;

  /* Transitions */
  --transition-interactive: 180ms cubic-bezier(0.16, 1, 0.3, 1);

  /* Shadows (tone-matched to warm green surfaces) */
  --shadow-sm: 0 1px 2px oklch(0.2 0.02 145 / 0.06);
  --shadow-md: 0 4px 12px oklch(0.2 0.02 145 / 0.08);
  --shadow-lg: 0 12px 32px oklch(0.2 0.02 145 / 0.12);

  /* Content widths */
  --content-narrow: 640px;
  --content-default: 960px;
  --content-wide: 1200px;
  --content-full: 100%;
}

/* ============================================
   DARK MODE
   ============================================ */
[data-theme="dark"] {
  /* Surfaces — Dark Mode (deep green-tinted darks) */
  --color-bg:               #0F1A13;
  --color-surface:          #152019;
  --color-surface-2:        #1A2720;
  --color-surface-offset:   #1E2D24;
  --color-surface-offset-2: #243529;
  --color-surface-dynamic:  #2E3F33;
  --color-divider:          #2A3A2F;
  --color-border:           #384A3E;

  /* Text — Dark Mode */
  --color-text:         #D8DDD5;
  --color-text-muted:   #8F978A;
  --color-text-faint:   #5E665A;
  --color-text-inverse: #1A1F16;

  /* Primary — Lighter Green for dark mode */
  --color-primary:          #5CB882;
  --color-primary-hover:    #3FA268;
  --color-primary-active:   #2D8B53;
  --color-primary-highlight:#1E3528;

  /* Secondary */
  --color-secondary:        #6DC98E;
  --color-secondary-hover:  #52B576;
  --color-secondary-active: #3FA268;

  /* Accent — Amber/Gold (lighter for dark) */
  --color-accent:           #E8B44D;
  --color-accent-hover:     #D4A03A;
  --color-accent-active:    #C08C28;
  --color-accent-highlight: #3A3120;

  /* Semantic */
  --color-warning:          #E8B44D;
  --color-warning-hover:    #D4A03A;
  --color-warning-active:   #C08C28;
  --color-warning-highlight:#3A3120;

  --color-error:            #DD6974;
  --color-error-hover:      #C24A59;
  --color-error-active:     #A53142;
  --color-error-highlight:  #3D2226;

  --color-success:          #6DC98E;
  --color-success-hover:    #52B576;
  --color-success-active:   #3FA268;
  --color-success-highlight:#1E3528;

  /* Dark section backgrounds (even deeper) */
  --color-dark-bg:          #0A120D;
  --color-dark-surface:     #0F1A13;

  /* Shadows */
  --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.2);
  --shadow-md: 0 4px 12px oklch(0 0 0 / 0.3);
  --shadow-lg: 0 12px 32px oklch(0 0 0 / 0.4);
}

/* System preference fallback */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --color-bg:               #0F1A13;
    --color-surface:          #152019;
    --color-surface-2:        #1A2720;
    --color-surface-offset:   #1E2D24;
    --color-surface-offset-2: #243529;
    --color-surface-dynamic:  #2E3F33;
    --color-divider:          #2A3A2F;
    --color-border:           #384A3E;
    --color-text:         #D8DDD5;
    --color-text-muted:   #8F978A;
    --color-text-faint:   #5E665A;
    --color-text-inverse: #1A1F16;
    --color-primary:          #5CB882;
    --color-primary-hover:    #3FA268;
    --color-primary-active:   #2D8B53;
    --color-primary-highlight:#1E3528;
    --color-secondary:        #6DC98E;
    --color-secondary-hover:  #52B576;
    --color-secondary-active: #3FA268;
    --color-accent:           #E8B44D;
    --color-accent-hover:     #D4A03A;
    --color-accent-active:    #C08C28;
    --color-accent-highlight: #3A3120;
    --color-warning:          #E8B44D;
    --color-warning-hover:    #D4A03A;
    --color-warning-active:   #C08C28;
    --color-warning-highlight:#3A3120;
    --color-error:            #DD6974;
    --color-error-hover:      #C24A59;
    --color-error-active:     #A53142;
    --color-error-highlight:  #3D2226;
    --color-success:          #6DC98E;
    --color-success-hover:    #52B576;
    --color-success-active:   #3FA268;
    --color-success-highlight:#1E3528;
    --color-dark-bg:          #0A120D;
    --color-dark-surface:     #0F1A13;
    --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.2);
    --shadow-md: 0 4px 12px oklch(0 0 0 / 0.3);
    --shadow-lg: 0 12px 32px oklch(0 0 0 / 0.4);
  }
}