/* ============================================================================
   THANAL DESIGN TOKENS — the single source of truth.
   Framework-agnostic plain CSS. Consumed by:
     • Tailwind (via assets/thanal-theme.js, which references the *-rgb channels)
     • hand-written CSS (assets/thanal.css)
     • page/chart/portal JS
     • the separate membership-automation / admin-dashboard project
   See DESIGN-SYSTEM.md. Palette is CLOSED: brand-green + gold + neutrals. No blue.

   Colours are exposed twice on purpose:
     --ts-*-rgb  : space-separated channels, so Tailwind can do  rgb(var / <alpha>)
                   and opacity modifiers (bg-brand/80) keep working.
     --ts-*      : ready-to-use hex, for plain CSS/JS that doesn't need alpha.
   Keep the two in sync (same colour) if you ever change a value.
   ============================================================================ */
:root {
  /* ---- Brand green family ---- */
  --ts-brand-rgb:            12 71 44;      --ts-brand:            #0C472C;
  --ts-brand-700-rgb:        10 58 36;      --ts-brand-700:        #0A3A24;
  --ts-brand-600-rgb:        21 90 61;      --ts-brand-600:        #155A3D;
  --ts-brand-tint-rgb:       233 241 236;   --ts-brand-tint:       #E9F1EC;
  --ts-leaf-rgb:             91 160 107;    --ts-leaf:             #5BA06B;
  --ts-brand-highlight:      #17603F;   /* hero-gradient highlight only */
  --ts-brand-dark:           #06231A;   /* hero-gradient deep end only  */

  /* ---- Gold family ---- */
  --ts-gold-rgb:             201 162 39;    --ts-gold:             #C9A227;
  --ts-gold-light-rgb:       230 197 102;   --ts-gold-light:       #E6C566;
  --ts-gold-dark-rgb:        154 123 26;    --ts-gold-dark:        #9A7B1A;
  --ts-gold-100-rgb:         247 238 210;   --ts-gold-100:         #F7EED2;

  /* ---- Neutrals ---- */
  --ts-cream-rgb:            247 249 246;   --ts-cream:            #F7F9F6;
  --ts-ink:                  #1E293B;   /* body text  (slate-800) */
  --ts-ink-soft:             #64748B;   /* secondary  (slate-500) */
  --ts-hairline:             rgba(148,163,184,.28); /* 1px editorial borders */

  /* ---- Radii ---- */
  --ts-radius-card:          1rem;      /* 16px  rounded-2xl */
  --ts-radius-feature:       1.5rem;    /* 24px  rounded-3xl */
  --ts-radius-pill:          9999px;

  /* ---- Shadow scale ---- */
  --ts-shadow-sm:      0 1px 2px rgba(6,35,26,.06), 0 1px 3px rgba(6,35,26,.05);
  --ts-shadow-md:      0 4px 12px -4px rgba(6,35,26,.12);
  --ts-shadow-lg:      0 18px 34px -18px rgba(6,35,26,.28);
  --ts-shadow-feature: 0 22px 45px -18px rgba(6,35,26,.30);

  /* ---- Motion ---- */
  --ts-ease:        cubic-bezier(0.16, 1, 0.3, 1);
  --ts-dur-fast:    180ms;
  --ts-dur-enter:   320ms;
  --ts-float-dur:   6s;

  /* ---- Fluid type scale (clamp: 360px → 1280px) ---- */
  --ts-fs-display:  clamp(2.25rem, 1.6rem + 2.8vw, 3.5rem);
  --ts-fs-h2:       clamp(1.6rem, 1.25rem + 1.6vw, 2.25rem);
  --ts-fs-h3:       clamp(1.15rem, 1.02rem + 0.6vw, 1.4rem);
  --ts-fs-body:     clamp(0.95rem, 0.9rem + 0.2vw, 1.05rem);
  --ts-fs-sm:       0.8125rem;
  --ts-fs-eyebrow:  0.72rem;
}