/* ================================================================
   FAITHSTACK — Design Token System v2.0
   Phase 1 Brand: The Ascend Identity

   Import this BEFORE shared.css for full token coverage.
   All tokens are CSS custom properties consumed site-wide.
================================================================ */

:root {

  /* ── BRAND CORE ──────────────────────────────────────────────── */
  --fs-midnight:       #0D1B2E;   /* primary dark — deepest navy */
  --fs-midnight-soft:  #152440;   /* elevated surface on dark */
  --fs-midnight-muted: #1E3255;   /* muted dark bg */

  --fs-canvas:         #FAFAF8;   /* main background — warm near-white */
  --fs-surface:        #F3F2EE;   /* secondary surface / cards */
  --fs-surface-warm:   #E9E7E1;   /* border-warm / inputs */

  --fs-gold:           #C2951C;   /* primary accent — burnished gold */
  --fs-gold-light:     #D8AE3A;   /* hover / highlight gold */
  --fs-gold-dark:      #9A7410;   /* deep gold for text on light */
  --fs-gold-glow:      rgba(194, 149, 28, 0.10);

  --fs-violet:         #6C4EC7;   /* secondary accent — spiritual indigo */
  --fs-violet-light:   #8A6CD8;   /* hover / highlight violet */
  --fs-violet-dark:    #4E35A0;   /* deep violet for text */
  --fs-violet-glow:    rgba(108, 78, 199, 0.10);

  /* ── TEXT ────────────────────────────────────────────────────── */
  --fs-text-primary:   #1C1C2E;   /* headings, strong text */
  --fs-text-body:      #3A3A52;   /* body copy */
  --fs-text-secondary: #5A5A78;   /* labels, subtitles */
  --fs-text-muted:     #8A8AAA;   /* placeholders, metadata */
  --fs-text-inverse:   #FAFAF8;   /* text on dark backgrounds */

  /* ── BORDERS ─────────────────────────────────────────────────── */
  --fs-border:         #E4E2DC;   /* default border */
  --fs-border-warm:    #DCD9D0;   /* warm subtle border */
  --fs-border-strong:  #C8C5BC;   /* emphasized border */

  /* ── TYPOGRAPHY ──────────────────────────────────────────────── */
  --fs-font-display:   'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
  --fs-font-body:      'Inter', system-ui, -apple-system, sans-serif;
  --fs-font-mono:      'JetBrains Mono', 'Fira Code', monospace;

  /* Type scale */
  --fs-text-xs:        0.72rem;   /* 11.5px */
  --fs-text-sm:        0.825rem;  /* 13.2px */
  --fs-text-base:      0.9375rem; /* 15px */
  --fs-text-md:        1.0625rem; /* 17px */
  --fs-text-lg:        1.25rem;   /* 20px */
  --fs-text-xl:        1.5rem;    /* 24px */
  --fs-text-2xl:       1.875rem;  /* 30px */
  --fs-text-3xl:       2.25rem;   /* 36px */
  --fs-text-4xl:       3rem;      /* 48px */
  --fs-text-hero:      clamp(2.5rem, 5vw, 4rem);

  /* Line heights */
  --fs-leading-tight:  1.1;
  --fs-leading-snug:   1.35;
  --fs-leading-body:   1.65;
  --fs-leading-loose:  1.85;

  /* ── SPACING ─────────────────────────────────────────────────── */
  --fs-space-1:   0.25rem;   /* 4px */
  --fs-space-2:   0.5rem;    /* 8px */
  --fs-space-3:   0.75rem;   /* 12px */
  --fs-space-4:   1rem;      /* 16px */
  --fs-space-5:   1.25rem;   /* 20px */
  --fs-space-6:   1.5rem;    /* 24px */
  --fs-space-8:   2rem;      /* 32px */
  --fs-space-10:  2.5rem;    /* 40px */
  --fs-space-12:  3rem;      /* 48px */
  --fs-space-16:  4rem;      /* 64px */
  --fs-space-20:  5rem;      /* 80px */
  --fs-space-24:  6rem;      /* 96px */

  /* ── BORDER RADIUS ───────────────────────────────────────────── */
  --fs-radius-sm:   6px;
  --fs-radius-md:   10px;
  --fs-radius-lg:   14px;
  --fs-radius-xl:   20px;
  --fs-radius-2xl:  28px;
  --fs-radius-full: 9999px;

  /* ── SHADOWS ─────────────────────────────────────────────────── */
  --fs-shadow-xs:   0 1px 2px rgba(13, 27, 46, 0.04);
  --fs-shadow-sm:   0 1px 4px rgba(13, 27, 46, 0.06), 0 1px 2px rgba(13, 27, 46, 0.04);
  --fs-shadow-md:   0 4px 12px rgba(13, 27, 46, 0.08), 0 2px 4px rgba(13, 27, 46, 0.04);
  --fs-shadow-lg:   0 8px 24px rgba(13, 27, 46, 0.10), 0 4px 8px rgba(13, 27, 46, 0.06);
  --fs-shadow-xl:   0 16px 48px rgba(13, 27, 46, 0.14), 0 8px 16px rgba(13, 27, 46, 0.08);
  --fs-shadow-gold: 0 4px 18px rgba(194, 149, 28, 0.30);
  --fs-shadow-violet: 0 4px 18px rgba(108, 78, 199, 0.25);

  /* ── TRANSITIONS ─────────────────────────────────────────────── */
  --fs-ease:        cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --fs-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --fs-duration-fast:   120ms;
  --fs-duration-base:   200ms;
  --fs-duration-slow:   350ms;

  /* ── Z-INDEX ─────────────────────────────────────────────────── */
  --fs-z-base:    0;
  --fs-z-raised:  10;
  --fs-z-overlay: 100;
  --fs-z-nav:     200;
  --fs-z-modal:   400;
  --fs-z-toast:   500;

}

/* ── BACKWARD COMPAT ALIASES ─────────────────────────────────────
   These map old variable names → new values so existing
   pages update automatically without touching their HTML.
   Remove in Phase 3 once all pages use --fs-* tokens.
─────────────────────────────────────────────────────────────────── */
:root {
  --white:          var(--fs-canvas);
  --sand:           var(--fs-surface);
  --sand-dark:      var(--fs-surface-warm);

  --gold:           var(--fs-gold);
  --gold-light:     var(--fs-gold-light);
  --gold-dark:      var(--fs-gold-dark);
  --gold-glow:      var(--fs-gold-glow);

  --navy:           var(--fs-midnight);
  --navy-mid:       var(--fs-midnight-soft);
  --navy-light:     var(--fs-midnight-muted);

  --text:           var(--fs-text-primary);
  --text-secondary: var(--fs-text-secondary);
  --text-muted:     var(--fs-text-muted);

  --border:         var(--fs-border);
  --border-warm:    var(--fs-border-warm);

  --cream:          var(--fs-canvas);
  --cream-dark:     var(--fs-surface);
  --text-primary:   var(--fs-text-primary);

  /* New violet alias for components that want to use it */
  --violet:         var(--fs-violet);
  --violet-light:   var(--fs-violet-light);
  --violet-dark:    var(--fs-violet-dark);
  --violet-glow:    var(--fs-violet-glow);
}