/* ==========================================================================
   Father's House Christian Church — Sacred Modern tokens
   Seal palette: royal blue, globe blue, cross red, platinum, white.
   ========================================================================== */

:root {
  --royal:        #16309B;
  --royal-deep:   #0F2170;
  --cross:        #C91F18;
  --cross-soft:   #E24A42;
  --cross-tint:   #F9EDEC;

  --ink:          #050E1A;
  --navy-900:     #0A1A32;
  --navy-800:     #0D2444;
  --navy-700:     #123A6E;
  --navy-600:     #17518F;

  --blue-600:     #1563A3;
  --blue-500:     #2A86C9;
  --sky-400:      #5BAAD6;
  --sky-300:      #8DC4E4;
  --sky-200:      #C5E0F2;
  --sky-100:      #E3F0F8;
  --sky-50:       #F2F7FB;

  --white:        #FFFFFF;
  --paper:        #F5F7F9;
  --paper-warm:   #F0F3F6;
  --platinum:     #DDE3EA;
  --silver:       #B8C2CE;
  --slate-400:    #84909F;
  --slate-500:    #5C6978;
  --slate-600:    #3E4A58;

  --bg:              var(--paper);
  --bg-alt:          var(--white);
  --bg-deep:         var(--navy-900);
  --text:            #0E1A28;
  --text-muted:      var(--slate-500);
  --text-on-dark:    #EEF4F9;
  --text-on-dark-mut:#A4B7C9;
  --line:            var(--platinum);
  --line-dark:       rgba(255,255,255,.12);
  --accent:          var(--blue-600);
  --accent-2:        var(--sky-400);

  --grad-deep:  linear-gradient(165deg, #071525 0%, #0A1A32 42%, #0C2848 100%);
  --grad-blue:  linear-gradient(135deg, #123A6E 0%, #1563A3 60%, #2A86C9 100%);
  --grad-sky:   linear-gradient(180deg, #F2F7FB 0%, #E3F0F8 100%);
  --grad-hero:  linear-gradient(105deg, rgba(5,14,26,.78) 0%, rgba(5,14,26,.45) 48%, rgba(5,14,26,.25) 100%);
  --grad-rule:  linear-gradient(90deg, var(--cross) 0%, var(--cross) 28%, var(--blue-500) 28%, var(--blue-500) 100%);

  --font-display: "Fraunces", "Georgia", "Times New Roman", serif;
  --font-sans: "Outfit", "Segoe UI", system-ui, -apple-system, sans-serif;

  --step--2: clamp(0.72rem, 0.70rem + 0.08vw, 0.78rem);
  --step--1: clamp(0.86rem, 0.83rem + 0.12vw, 0.94rem);
  --step-0:  clamp(1.02rem, 0.98rem + 0.18vw, 1.12rem);
  --step-1:  clamp(1.18rem, 1.10rem + 0.36vw, 1.36rem);
  --step-2:  clamp(1.42rem, 1.26rem + 0.72vw, 1.85rem);
  --step-3:  clamp(1.78rem, 1.48rem + 1.2vw, 2.55rem);
  --step-4:  clamp(2.2rem, 1.7rem + 2.0vw, 3.45rem);
  --step-5:  clamp(2.7rem, 1.95rem + 3.2vw, 4.6rem);
  --step-6:  clamp(3.1rem, 2.1rem + 4.6vw, 5.8rem);

  --tracking-label: 0.14em;
  --leading-tight: 1.05;
  --leading-snug: 1.22;
  --leading-body: 1.68;

  --gutter: clamp(1.25rem, 4.2vw, 2.75rem);
  --container: 1180px;
  --container-wide: 1380px;
  --container-narrow: 720px;
  --section-y: clamp(4.75rem, 9vw, 9rem);
  --section-y-sm: clamp(3.25rem, 5.5vw, 5.25rem);

  --r-xs: 2px;
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 28px;
  --r-pill: 999px;

  --sh-1: 0 1px 2px rgba(5,14,26,.05);
  --sh-2: 0 8px 24px rgba(5,14,26,.08);
  --sh-3: 0 20px 48px rgba(5,14,26,.12);

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --t-fast: .2s;
  --t-mid: .45s;
  --t-slow: .9s;

  --z-drawer: 90;
  --z-header: 80;
  --z-top: 100;
  --header-h: 76px;
}

@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: .01ms; --t-mid: .01ms; --t-slow: .01ms; }
}