/* ==========================================================================
   Father's House Christian Church
   tokens.css  -  brand foundations: colour, type, space, motion, elevation
   Palette is derived directly from the FHCC seal: royal blue, globe blue,
   cross red, platinum ring, white field.
   ========================================================================== */

:root {
  /* ---- Core brand ---- */
  --royal:        #16309B;   /* seal lettering blue */
  --royal-deep:   #0F2170;
  --cross:        #D7261C;   /* the red of the cross, used sparingly */
  --cross-soft:   #E8544B;
  --cross-tint:   #FBEDEC;

  /* ---- Navy family (dominant) ---- */
  --ink:          #061223;
  --navy-900:     #0A1E3D;
  --navy-800:     #0E2A52;
  --navy-700:     #123A6E;
  --navy-600:     #17518F;

  /* ---- Globe blue family (secondary) ---- */
  --blue-600:     #1668AE;
  --blue-500:     #2E8FD4;
  --sky-400:      #5DB6E4;
  --sky-300:      #8ECBEE;
  --sky-200:      #BFE0F5;
  --sky-100:      #DCEDF9;
  --sky-50:       #EFF7FC;

  /* ---- Neutrals (platinum ring) ---- */
  --white:        #FFFFFF;
  --paper:        #F8FAFC;
  --paper-warm:   #F3F6FA;
  --platinum:     #E4E9EF;
  --silver:       #C6CDD7;
  --slate-400:    #8B97A6;
  --slate-500:    #64707F;
  --slate-600:    #46525F;

  /* ---- Semantic ---- */
  --bg:              var(--paper);
  --bg-alt:          var(--white);
  --bg-deep:         var(--navy-900);
  --text:            #101F33;
  --text-muted:      var(--slate-500);
  --text-on-dark:    #E8F1F8;
  --text-on-dark-mut:#A9BDD2;
  --line:            var(--platinum);
  --line-dark:       rgba(255,255,255,.14);
  --accent:          var(--blue-600);
  --accent-2:        var(--sky-400);

  /* ---- Gradients ---- */
  --grad-deep:  linear-gradient(155deg, #0A1E3D 0%, #0E2A52 45%, #071528 100%);
  --grad-blue:  linear-gradient(135deg, #123A6E 0%, #1668AE 55%, #2E8FD4 100%);
  --grad-sky:   linear-gradient(135deg, #EFF7FC 0%, #DCEDF9 100%);
  --grad-globe: radial-gradient(circle at 34% 28%, #BFE6FA 0%, #5DB6E4 45%, #1668AE 100%);
  --grad-rule:  linear-gradient(90deg, var(--cross) 0%, var(--cross) 34%, var(--blue-500) 34%, var(--blue-500) 100%);

  /* ---- Type ---- */
  --font-display: "Fraunces", "Georgia", "Times New Roman", serif;
  --font-sans: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, sans-serif;

  --step--2: clamp(0.72rem, 0.70rem + 0.10vw, 0.78rem);
  --step--1: clamp(0.84rem, 0.81rem + 0.14vw, 0.92rem);
  --step-0:  clamp(1.00rem, 0.96rem + 0.18vw, 1.09rem);
  --step-1:  clamp(1.18rem, 1.10rem + 0.36vw, 1.38rem);
  --step-2:  clamp(1.42rem, 1.28rem + 0.64vw, 1.80rem);
  --step-3:  clamp(1.72rem, 1.48rem + 1.04vw, 2.40rem);
  --step-4:  clamp(2.08rem, 1.68rem + 1.72vw, 3.20rem);
  --step-5:  clamp(2.50rem, 1.86rem + 2.72vw, 4.30rem);
  --step-6:  clamp(2.90rem, 1.90rem + 4.30vw, 5.60rem);

  --tracking-label: 0.16em;
  --leading-tight: 1.08;
  --leading-snug: 1.24;
  --leading-body: 1.72;

  /* ---- Space ---- */
  --gutter: clamp(1.15rem, 4vw, 2.5rem);
  --container: 1240px;
  --container-wide: 1440px;
  --container-narrow: 820px;
  --section-y: clamp(4.5rem, 8.5vw, 8.5rem);
  --section-y-sm: clamp(3rem, 5.5vw, 5rem);

  /* ---- Radius ---- */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-xl: 32px;
  --r-pill: 999px;

  /* ---- Elevation ---- */
  --sh-1: 0 1px 2px rgba(10,30,61,.06), 0 2px 6px rgba(10,30,61,.05);
  --sh-2: 0 4px 10px rgba(10,30,61,.07), 0 12px 26px rgba(10,30,61,.07);
  --sh-3: 0 10px 24px rgba(10,30,61,.10), 0 30px 60px rgba(10,30,61,.12);
  --sh-glow: 0 18px 50px rgba(22,104,174,.28);

  /* ---- Motion ---- */
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --t-fast: .18s;
  --t-mid: .38s;
  --t-slow: .7s;

  /* ---- Layers ---- */
  --z-drawer: 90;
  --z-header: 80;
  --z-top: 100;
}

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