/* ==========================================================
   Elisio — tokens.css
   Design tokens. Single source of truth for colour, type,
   spacing, radius and motion. A.B. GOVERLA LTD.

   Colour rule: AMBER marks money (CPAs, payouts, the primary
   call to action). LILAC marks structure (links, labels,
   focus, active states). The orb is the only light source.
   ========================================================== */

:root {
  /* ----- Night (backgrounds) ----- */
  --night:      #0F0C24;   /* page base — deep indigo */
  --night-2:    #141030;   /* alternate band */
  --surface:    #1A1540;   /* raised solid surface */
  --surface-2:  #231C52;   /* inputs, hover fills */

  /* ----- Glass (floating elements only) ----- */
  --glass:      rgba(30, 24, 72, 0.55);
  --glass-2:    rgba(40, 32, 92, 0.66);
  --glass-edge: rgba(201, 186, 255, 0.18);
  --glass-hi:   rgba(255, 255, 255, 0.06);   /* top inner highlight */

  /* ----- Text ----- */
  --text:       #F1EEFF;                     /* primary */
  --text-2:     rgba(241, 238, 255, 0.74);   /* secondary — 8.9:1 */
  --text-3:     rgba(241, 238, 255, 0.58);   /* tertiary — 5.4:1 */

  /* ----- Accents ----- */
  --lilac:      #B9A6FF;   /* structure */
  --lilac-deep: #8B73F2;
  --lilac-wash: rgba(185, 166, 255, 0.10);
  --amber:      #FFB547;   /* money */
  --amber-soft: #FFD49A;
  --amber-wash: rgba(255, 181, 71, 0.12);
  --on-amber:   #1A1206;   /* text placed on amber */
  --error:      #FF9C9C;

  /* ----- Lines ----- */
  --line:       rgba(185, 166, 255, 0.16);
  --line-2:     rgba(185, 166, 255, 0.30);

  /* ----- Type families ----- */
  --f-display: 'Sora', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --f-text:    'Manrope', 'Segoe UI', system-ui, -apple-system, sans-serif;

  /* ----- Type scale (modular, ~1.25, fluid at the top) ----- */
  --fs-display: clamp(3rem, 8.2vw, 7.25rem);   /* home hero */
  --fs-h1:      clamp(2.5rem, 5.4vw, 4.5rem);  /* page heroes */
  --fs-h2:      clamp(2rem, 3.6vw, 3.125rem);
  --fs-h3:      clamp(1.25rem, 1.5vw, 1.5rem);
  --fs-lede:    clamp(1.125rem, 1.2vw, 1.3125rem);
  --fs-body:    1.0625rem;
  --fs-small:   0.9375rem;
  --fs-xs:      0.8125rem;
  --fs-figure:  clamp(2.5rem, 5vw, 4.25rem);   /* big numerals */

  /* ----- Spacing (8px base) ----- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
  --s-9: 96px; --s-10: 128px;
  --section: clamp(72px, 10vw, 136px);   /* vertical rhythm between sections */

  /* ----- Layout ----- */
  --wrap:    1240px;
  --narrow:  780px;
  --measure: 68ch;
  --pad:     clamp(16px, 5vw, 64px);
  --header-h: 72px;

  /* ----- Radius (hierarchy: pill > panel > card > control) ----- */
  --r-pill:  999px;
  --r-panel: 28px;
  --r-card:  20px;
  --r-ctl:   12px;

  /* ----- Motion ----- */
  --ease:     cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur:      0.45s;
  --dur-fast: 0.2s;

  --z-header: 100;
  --z-menu:   90;
}

@media (max-width: 760px) {
  :root { --header-h: 64px; }
}