/* ===========================================================================
   SSTGC — design tokens
   The only file that holds a raw value. Everything else references these.

   Deliberately aligned to the member portal's portal-theme.css so the two
   properties read as one temple rather than two vendors. Where a value differs
   it is because the public site is read at arm's length on a phone, not at a
   desk — larger base type, looser line height, bigger tap targets.
   =========================================================================== */

:root {

  /* ── Saffron ─────────────────────────────────────────────────────────────
     Not the #FF6600 of the old site. That is a web-safe primary from a decade
     ago; at large fills it reads as a highlighter. This is the cloth: burnt,
     grounded, and dark enough to carry white text at AA contrast, which the
     old orange never managed.                                                */
  --saffron-50:  #fef9f5;
  --saffron-100: #fdf0e4;
  --saffron-200: #f5e6d8;
  --saffron-400: #f0991d;
  --saffron-500: #d97706;
  --saffron-600: #b85a00;   /* primary — matches the portal exactly */
  --saffron-700: #9a4d00;
  --saffron-800: #7c3d00;

  /* ── Ink ─────────────────────────────────────────────────────────────────
     Warm-neutral rather than blue-grey. Against saffron a cool grey turns
     faintly violet; this stays quiet.                                        */
  --ink-900: #18181b;
  --ink-700: #3f3f46;
  --ink-500: #71717a;
  --ink-300: #a1a1aa;
  --ink-200: #d4d4d8;
  --ink-100: #e4e4e7;
  --ink-50:  #fafafa;
  --white:   #ffffff;

  /* ── Ground ──────────────────────────────────────────────────────────────
     Deep maroon.

     Two revisions to get here. First was #16181d, taken from the member
     portal's admin sidebar — wrong for a temple, since black carries
     inauspicious associations and this is the largest field of colour on the
     site. Second was #3b1a17, chosen by reasoning about hue rather than
     looking at it: too much orange in the mix, so at full width it read as
     milk chocolate rather than maroon.

     #2e1218 is deeper and rotated toward red. It reads as the inner sanctum
     lit by lamps, which is the reference, and it gives saffron enough contrast
     to sit on it as an accent rather than blending in.                       */
  --ground:      #2e1218;
  --ground-soft: #43202a;
  --ground-line: rgba(255, 232, 220, .11);

  /* Text on the ground. The previous values were pulled from the same red
     family as the ground itself, so they read as faded pink rather than warm
     neutral. These are desaturated toward sand — warm enough not to go cold
     against maroon, neutral enough to read as text.                          */
  --on-ground:        #f2e7de;
  --on-ground-soft:   #cbbcb0;
  --on-ground-muted:  #a08e83;

  /* ── Semantic ────────────────────────────────────────────────────────────*/
  --brand:        var(--saffron-600);
  --brand-hover:  var(--saffron-700);
  --brand-tint:   var(--saffron-50);
  --brand-line:   var(--saffron-200);

  --text:         var(--ink-700);
  --text-strong:  var(--ink-900);
  --text-soft:    var(--ink-500);
  --text-invert:  var(--white);

  --surface:      var(--white);
  --surface-sunk: var(--ink-50);
  --line:         var(--ink-100);
  --line-strong:  var(--ink-200);

  --success: #16a34a;
  --warning: #d97706;
  --danger:  #dc2626;

  /* ── Type ────────────────────────────────────────────────────────────────
     One family. Weight and size carry hierarchy; a second face would give the
     temple two voices across its website and its portal.                     */
  --font: 'Poppins', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Fluid scale — clamp() so the phone and the desktop each get a sensible
     size without a breakpoint for every step. */
  --t-xs:   0.78rem;
  --t-sm:   0.875rem;
  --t-base: 1rem;
  --t-lg:   1.09rem;
  --t-xl:   clamp(1.18rem, 1.1rem + 0.4vw,  1.32rem);
  --t-2xl:  clamp(1.42rem, 1.3rem + 0.6vw,  1.68rem);
  --t-3xl:  clamp(1.72rem, 1.5rem + 1.1vw,  2.25rem);
  --t-4xl:  clamp(2.1rem,  1.7rem + 2vw,    3rem);

  --lh-tight: 1.24;
  --lh-snug:  1.42;
  --lh-body:  1.68;

  --track-tight: -0.021em;
  --track-wide:   0.06em;

  /* ── Space — 4px base ────────────────────────────────────────────────────*/
  --s-1:  0.25rem;
  --s-2:  0.5rem;
  --s-3:  0.75rem;
  --s-4:  1rem;
  --s-5:  1.25rem;
  --s-6:  1.5rem;
  --s-8:  2rem;
  --s-10: 2.5rem;
  --s-12: 3rem;
  --s-16: 4rem;
  --s-20: 5rem;
  --s-24: 6rem;

  /* Section rhythm, fluid — no breakpoint needed to keep bands proportionate */
  /* Reduced. At the wider setting a laptop showed about one and a half
     sections per screen, so the page read as a series of separate pages. The
     colour change between bands does most of the separating anyway. */
  --band:       clamp(2rem, 1.4rem + 2.6vw, 3.4rem);
  --band-tight: clamp(1.5rem, 1.1rem + 1.6vw, 2.2rem);

  /* ── Shape ───────────────────────────────────────────────────────────────*/
  --r-sm:   6px;
  --r:      10px;
  --r-lg:   14px;
  --r-full: 999px;

  --shadow:      0 1px 2px rgba(24, 24, 27, .06);
  --shadow-lift: 0 6px 20px -6px rgba(24, 24, 27, .14);
  --shadow-deep: 0 18px 48px -16px rgba(24, 24, 27, .22);

  /* ── Layout ──────────────────────────────────────────────────────────────*/
  --measure:    66ch;      /* readable line length for prose */
  --page:       1200px;
  --page-tight: 880px;
  --gutter:     clamp(1.25rem, 0.9rem + 1.6vw, 2.5rem);

  /* ── Motion ──────────────────────────────────────────────────────────────*/
  --ease: cubic-bezier(.22, .61, .36, 1);
  --fast: .14s;
  --med:  .26s;
}

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