/* ─────────────────────────  styles/tokens.css  ──────────────────────────
   Ekklesia · Design tokens — the single source of truth.
   Loaded FIRST in includes/header.php so every page consumes from here.

   Why a tokens file?
     Before this, every stylesheet redeclared :root and the values drifted
     (e.g. --ek-bg-light in login.css vs --ek-bg in index.css vs --ek-page
     in header.css). Centralising tokens means every card, button, and
     surface across the app reaches for the same scales, so pages feel
     like one product instead of a collage of admin templates.

   What's in here:
     • Color  — green/gold/peach tint scales (50→900) + neutral grays
     • Type   — Inter (UI) + Fraunces (display) + a size ramp
     • Space  — 4px-based scale
     • Radius — from sharp pills (xs) to soft cards (3xl)
     • Shadow — single ladder, warm-tinted (not pure black)
     • Motion — durations + easing curves
   ─────────────────────────────────────────────────────────────────── */

:root{

  /* ─────────────────  COLOR — brand tint scales  ─────────────────── */
  /* Deep evergreen (sanctuary) — primary brand */
  --ek-green-50:        #eaf2ee;
  --ek-green-100:       #cfdfd6;
  --ek-green-200:       #a8c4b5;
  --ek-green-300:       #7aa692;
  --ek-green-400:       #4a8870;
  --ek-green-500:       #1f6651;
  --ek-green-600:       #144a3a;
  --ek-green-700:       #0d2f25;     /* legacy --ek-green       */
  --ek-green-800:       #072018;     /* legacy --ek-green-dark  */
  --ek-green-900:       #03130e;

  /* Liturgical gold — accent brand */
  --ek-gold-50:         #fbf6e9;
  --ek-gold-100:        #f4e8c4;
  --ek-gold-200:        #ebd592;
  --ek-gold-300:        #dabb5e;
  --ek-gold-400:        #c7a44a;     /* legacy --ek-gold        */
  --ek-gold-500:        #b89034;
  --ek-gold-600:        #a3812f;     /* legacy --ek-gold-dark   */
  --ek-gold-700:        #846724;
  --ek-gold-800:        #5f4a18;
  --ek-gold-900:        #3a2d0e;

  /* Peach — warmth, celebration, welcomes, anniversaries */
  --ek-peach-50:        #fff5ef;
  --ek-peach-100:       #ffe6d6;
  --ek-peach-200:       #ffc7a3;
  --ek-peach-300:       #ffa978;
  --ek-peach-400:       #ff8c54;
  --ek-peach-500:       #f06a2f;
  --ek-peach-600:       #d35417;
  --ek-peach-700:       #a23f0e;
  --ek-peach-800:       #732c08;
  --ek-peach-900:       #421705;

  /* Semantic state — blue (info), red (danger), amber (warn), emerald (success) */
  --ek-info-500:        #2563eb;
  --ek-info-600:        #1d4ed8;
  --ek-danger-500:      #d92d20;
  --ek-danger-600:      #b42318;     /* legacy --ek-red         */
  --ek-warn-500:        #f59e0b;
  --ek-warn-600:        #d97706;
  --ek-success-500:     #16a34a;
  --ek-success-600:     #15803d;

  /* Neutral — warm-tinted grays (not pure cool gray) */
  --ek-gray-0:          #ffffff;
  --ek-gray-50:         #f8faf8;
  --ek-gray-100:        #eef2ef;
  --ek-gray-200:        #dde4df;
  --ek-gray-300:        #c5cfc8;
  --ek-gray-400:        #98a59c;
  --ek-gray-500:        #6b7973;
  --ek-gray-600:        #4f5b56;
  --ek-gray-700:        #384340;
  --ek-gray-800:        #232c29;
  --ek-gray-900:        #11181a;

  /* ─────────────────  COLOR — semantic aliases  ──────────────────── */
  /* Pages should reach for these, not raw scales, wherever possible. */
  --ek-bg:              var(--ek-gray-50);            /* page background    */
  --ek-bg-elevated:     var(--ek-gray-0);             /* card / sheet bg    */
  --ek-bg-muted:        var(--ek-gray-100);           /* subtle stripe / hover */
  --ek-bg-tint:         var(--ek-green-50);           /* tinted info area   */
  --ek-bg-warm:         var(--ek-peach-50);           /* welcome / celebrate*/

  --ek-fg:              var(--ek-gray-900);           /* primary text       */
  --ek-fg-muted:        var(--ek-gray-600);           /* secondary text     */
  --ek-fg-subtle:       var(--ek-gray-500);           /* tertiary / hints   */
  --ek-fg-inverse:      var(--ek-gray-0);             /* text on dark bg    */

  --ek-border:          var(--ek-gray-200);
  --ek-border-strong:   var(--ek-gray-300);

  --ek-brand:           var(--ek-green-700);          /* primary action     */
  --ek-brand-hover:     var(--ek-green-600);
  --ek-brand-strong:    var(--ek-green-800);

  --ek-accent:          var(--ek-gold-400);           /* secondary action   */
  --ek-accent-hover:    var(--ek-gold-500);

  --ek-warm:            var(--ek-peach-400);          /* celebrate accent   */

  /* ───────  Legacy aliases (don't remove — pages still reference them) ─── */
  --ek-green:           var(--ek-green-700);
  --ek-green-dark:      var(--ek-green-800);
  --ek-gold:            var(--ek-gold-400);
  --ek-gold-dark:       var(--ek-gold-600);
  --ek-blue:            var(--ek-info-500);
  --ek-red:             var(--ek-danger-600);
  --ek-text:            var(--ek-fg-inverse);
  --ek-body:            var(--ek-fg);
  --ek-muted:           var(--ek-fg-muted);
  --ek-surface:         var(--ek-bg-elevated);
  --ek-page:            var(--ek-bg);
  --ek-bg-light:        var(--ek-bg);

  /* ─────────────────  TYPOGRAPHY  ─────────────────────────────────── */
  /* Inter for UI, Fraunces for display moments (verses, hero titles).
     Both loaded in includes/header.php with font-display:swap. */
  --ek-font-ui:         "Inter", "Segoe UI", "Roboto", "Helvetica Neue", system-ui, sans-serif;
  --ek-font-display:    "Fraunces", "Iowan Old Style", "Georgia", "Times New Roman", serif;
  --ek-font:            var(--ek-font-ui);            /* legacy alias       */

  /* Size ramp — modular scale tuned for app density + reading comfort */
  --ek-text-xs:         0.75rem;     /* 12px — chips, captions      */
  --ek-text-sm:         0.875rem;    /* 14px — secondary body       */
  --ek-text-base:       1rem;        /* 16px — body                 */
  --ek-text-lg:         1.125rem;    /* 18px — emphasized body      */
  --ek-text-xl:         1.25rem;     /* 20px — card titles          */
  --ek-text-2xl:        1.5rem;      /* 24px — section heads        */
  --ek-text-3xl:        1.875rem;    /* 30px — page titles          */
  --ek-text-4xl:        2.5rem;      /* 40px — KPI values, hero     */
  --ek-text-5xl:        3.25rem;     /* 52px — display moments      */

  /* Weights — restrained set to avoid render churn */
  --ek-weight-regular:  400;
  --ek-weight-medium:   500;
  --ek-weight-semibold: 600;
  --ek-weight-bold:     700;
  --ek-weight-black:    800;

  /* Line heights */
  --ek-leading-tight:   1.15;
  --ek-leading-snug:    1.3;
  --ek-leading-normal:  1.5;
  --ek-leading-relaxed: 1.65;

  /* Tracking */
  --ek-track-tight:     -0.02em;
  --ek-track-normal:    0;
  --ek-track-wide:      0.02em;
  --ek-track-wider:     0.06em;

  /* ─────────────────  SPACING  ────────────────────────────────────── */
  /* 4px base. Use these instead of raw px so vertical rhythm is consistent. */
  --ek-space-0:         0;
  --ek-space-1:         0.25rem;     /* 4px  */
  --ek-space-2:         0.5rem;      /* 8px  */
  --ek-space-3:         0.75rem;     /* 12px */
  --ek-space-4:         1rem;        /* 16px */
  --ek-space-5:         1.25rem;     /* 20px */
  --ek-space-6:         1.5rem;      /* 24px */
  --ek-space-8:         2rem;        /* 32px */
  --ek-space-10:        2.5rem;      /* 40px */
  --ek-space-12:        3rem;        /* 48px */
  --ek-space-16:        4rem;        /* 64px */
  --ek-space-20:        5rem;        /* 80px */
  --ek-space-24:        6rem;        /* 96px */

  /* ─────────────────  RADIUS  ─────────────────────────────────────── */
  --ek-radius-xs:       4px;
  --ek-radius-sm:       6px;
  --ek-radius-md:       10px;        /* default for inputs, buttons       */
  --ek-radius-lg:       14px;        /* cards, panels                     */
  --ek-radius-xl:       18px;        /* hero, big surfaces                */
  --ek-radius-2xl:      24px;        /* feature surfaces                  */
  --ek-radius-pill:     999px;       /* buttons, badges, segmented ctrls  */

  /* ─────────────────  SHADOW  ─────────────────────────────────────── */
  /* Warm-tinted (a hint of green) so elevation feels of-a-piece with the
     palette rather than borrowed from a stock admin template. */
  --ek-shadow-xs:       0 1px 2px rgba(7, 32, 24, .06);
  --ek-shadow-sm:       0 2px 6px rgba(7, 32, 24, .08);
  --ek-shadow-md:       0 8px 20px rgba(7, 32, 24, .08);
  --ek-shadow-lg:       0 16px 40px rgba(7, 32, 24, .12);
  --ek-shadow-xl:       0 28px 60px rgba(7, 32, 24, .16);
  --ek-shadow-inset:    inset 0 1px 0 rgba(255, 255, 255, .06);
  --ek-shadow-focus:    0 0 0 4px rgba(199, 164, 74, .25);

  /* ─────────────────  LAYOUT  ─────────────────────────────────────── */
  --ek-sidebar-width:   260px;
  --ek-topbar-height:   56px;
  --ek-bottomnav-h:     72px;
  --ek-content-max:     1280px;

  /* ─────────────────  MOTION  ─────────────────────────────────────── */
  --ek-duration-fast:   .12s;
  --ek-duration-base:   .24s;        /* legacy --ek-transition target    */
  --ek-duration-slow:   .4s;
  --ek-ease:            cubic-bezier(.2, .8, .2, 1);
  --ek-ease-out:        cubic-bezier(0, 0, .2, 1);
  --ek-transition:      var(--ek-duration-base) var(--ek-ease);

  /* ─────────────────  Z-INDEX  ────────────────────────────────────── */
  --ek-z-sidebar:       1030;
  --ek-z-bottomnav:     990;
  --ek-z-fab:           1005;
  --ek-z-topbar:        1100;
  --ek-z-dropdown:      1200;
  --ek-z-modal:         1300;
  --ek-z-toast:         1400;
}

/* ───────────────  Body defaults that consume the tokens  ──────────── */
html, body {
  font-family: var(--ek-font-ui);
  font-feature-settings: "cv11", "ss01", "ss03";   /* Inter stylistic alts */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--ek-fg);
  background: var(--ek-bg);
  line-height: var(--ek-leading-normal);
  text-rendering: optimizeLegibility;
}

/* Display class — apply to verses, welcomes, KPI values that deserve voice */
.ek-display {
  font-family: var(--ek-font-display);
  font-weight: var(--ek-weight-semibold);
  letter-spacing: var(--ek-track-tight);
  line-height: var(--ek-leading-tight);
  font-optical-sizing: auto;
}

/* Body-link defaults — calmer than browser blue */
a {
  color: var(--ek-brand);
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
}
a:hover { color: var(--ek-brand-hover); }

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