/* ==========================================================================
   NIFIAN — Design Tokens
   Structural language adapted from the Advisory (Framer) reference:
   warm near-black sections, mono uppercase eyebrows, tight display headings,
   pill buttons, 20px card radius. Palette is NIFIAN's own.
   ========================================================================== */

:root {
  /* ---- Brand palette --------------------------------------------------- */
  --green-950: #071F19;   /* deepest — footer, darkest bands */
  --green-900: #0B2E26;   /* primary dark surface (the "near-black") */
  --green-800: #0F3A30;   /* raised card on dark */
  --green-700: #12694F;   /* emerald — interactive, secondary fills */
  --green-600: #1A8462;   /* hover state on emerald */

  --gold:       #C9A227;  /* accent — ONLY on dark surfaces */
  --gold-bright:#E3BE44;  /* hover / highlight on dark */
  --gold-ink:   #8A6D12;  /* AA-safe gold for text on light (4.89:1) */

  /* ---- Neutrals -------------------------------------------------------- */
  --white: #FFFFFF;
  --bone:  #F7F5EF;       /* alternating light section background */
  --bone-deep: #EFEBE1;   /* subtle light card */
  --ink:   #101614;       /* body text on light */
  --muted: #5A6763;       /* secondary text on light (5.88:1) */
  --line:  #E2DDD2;       /* borders on light */

  --on-dark:       rgba(255,255,255,0.94);
  --on-dark-muted: rgba(255,255,255,0.66);
  --on-dark-line:  rgba(255,255,255,0.14);

  /* ---- Semantic -------------------------------------------------------- */
  --surface:       var(--white);
  --surface-alt:   var(--bone);
  --surface-dark:  var(--green-900);
  --text:          var(--ink);
  --text-muted:    var(--muted);
  --border:        var(--line);
  --accent:        var(--gold);
  --focus:         var(--gold);
  --danger:        #B3261E;

  /* ---- Typography ------------------------------------------------------ */
  --font-display: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* Fluid type scale — matches reference (H1 40→80, H2 30→48, H3 20→24) */
  --fs-display: clamp(2.75rem, 6.4vw, 5rem);      /* 44 → 80 */
  --fs-h1:      clamp(2.375rem, 5.4vw, 4.25rem);  /* 38 → 68 */
  --fs-h2:      clamp(1.875rem, 3.6vw, 3rem);     /* 30 → 48 */
  --fs-h3:      clamp(1.25rem, 1.9vw, 1.5rem);    /* 20 → 24 */
  --fs-h4:      clamp(1.0625rem, 1.4vw, 1.1875rem);
  --fs-lead:    clamp(1.0625rem, 1.5vw, 1.25rem); /* 17 → 20 */
  --fs-body:    clamp(1.0625rem, 1vw, 1.125rem);  /* 17 → 18 */
  --fs-sm:      0.9375rem;
  --fs-xs:      0.8125rem;
  --fs-eyebrow: 0.8125rem;

  --lh-tight: 1.06;
  --lh-head:  1.18;
  --lh-body:  1.62;

  --ls-display: -0.022em;
  --ls-head:    -0.014em;
  --ls-eyebrow:  0.10em;

  /* ---- Spacing (4/8 rhythm) -------------------------------------------- */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;  --sp-4: 1rem;
  --sp-5: 1.5rem;   --sp-6: 2rem;     --sp-7: 3rem;     --sp-8: 4rem;
  --sp-9: 5rem;     --sp-10: 7.5rem;

  --section-y: clamp(4rem, 8vw, 7.5rem);
  --section-y-sm: clamp(3rem, 5vw, 4.5rem);

  /* ---- Layout ---------------------------------------------------------- */
  --container: 1240px;
  --container-narrow: 760px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);

  /* ---- Shape ----------------------------------------------------------- */
  --r-pill: 99px;
  --r-xl:  32px;
  --r-lg:  20px;
  --r-md:  14px;
  --r-sm:  10px;

  /* ---- Elevation (one shadow, used sparingly) --------------------------- */
  --shadow-card:  0 12px 32px rgba(11,46,38,0.10);
  --shadow-float: 0 24px 60px rgba(7,31,25,0.18);

  /* ---- Motion ---------------------------------------------------------- */
  --dur-fast: 160ms;
  --dur:      240ms;
  --dur-slow: 420ms;
  --ease-out: cubic-bezier(0.16, 0.84, 0.44, 1);
  --ease-in:  cubic-bezier(0.55, 0, 1, 0.45);

  /* ---- Z-index scale --------------------------------------------------- */
  --z-base: 0;
  --z-raised: 10;
  --z-sticky: 40;
  --z-header: 100;
  --z-overlay: 500;
  --z-modal: 1000;
}

/* Respect reduced motion globally — every animation in site.js also checks. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}