/* ============================================================
   LumoPlans, Design Tokens
   Direction: "Midnight Current". Near-black navy, glass surfaces,
   electric blue light. Feels like a modern fintech product,
   not a deals shop.
   Dominant: night surfaces + light text (90%). Accent: electric
   blue (10%).
   Note: variable names kept from v1 for compatibility.
   --paper* = surfaces, --ink* = text, --lumo* = the accent light.
   ============================================================ */

:root {
  /* ---- Color: surfaces ---- */
  --paper:        #0B0E1A;   /* page background, near-black navy */
  --paper-raised: #12172A;   /* cards, panels */
  --paper-deep:   #161C33;   /* wells, alternate sections */
  --night:        #070910;   /* footer and final CTA, darker still */
  --night-raised: #10141F;   /* cards on the darkest sections */

  /* ---- Color: text ---- */
  --ink:          #EDF0F7;   /* headlines, body */
  --ink-soft:     #C4CADB;   /* secondary text */
  --muted:        #8A91A8;   /* captions, meta */
  --ink-on-night: #EDF0F7;   /* text on darkest surfaces */
  --muted-on-night: #8A91A8;

  /* ---- Color: lines ---- */
  --line:         rgba(237, 240, 247, 0.09);   /* hairlines */
  --line-strong:  rgba(237, 240, 247, 0.18);
  --line-on-night: rgba(237, 240, 247, 0.12);

  /* ---- Color: lumo (the electric light, use sparingly) ---- */
  --lumo:         #4F8DFF;   /* electric blue, key accents */
  --lumo-deep:    #7CAEFF;   /* links and small accent text on dark */
  --lumo-bright:  #38BDF8;   /* cyan edge of the gradient */
  --lumo-soft:    rgba(79, 141, 255, 0.12);    /* blue wash, chips */
  --lumo-glow:    rgba(79, 141, 255, 0.35);

  /* ---- Color: semantic ---- */
  --trust:        #34D399;   /* verification, success */
  --trust-soft:   rgba(52, 211, 153, 0.12);
  --danger:       #F87171;
  --danger-soft:  rgba(248, 113, 113, 0.12);

  /* ---- Typography ---- */
  --font-display: "Sora", Helvetica, sans-serif;
  --font-body:    "Figtree", Helvetica, sans-serif;
  --font-mono:    "JetBrains Mono", Menlo, monospace;

  /* Fluid type scale */
  --text-xs:   0.8125rem;                          /* 13px, meta, legal */
  --text-sm:   0.9375rem;                          /* 15px, captions */
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.0625rem);
  --text-lg:   clamp(1.125rem, 1.05rem + 0.4vw, 1.3125rem);
  --text-xl:   clamp(1.375rem, 1.2rem + 0.9vw, 1.75rem);
  --text-2xl:  clamp(1.75rem, 1.4rem + 1.8vw, 2.5rem);
  --text-3xl:  clamp(2.25rem, 1.7rem + 2.8vw, 3.5rem);
  --text-hero: clamp(2.5rem, 1.8rem + 3.6vw, 4.25rem);

  --leading-tight: 1.08;
  --leading-snug:  1.25;
  --leading-body:  1.65;

  /* ---- Spacing ---- */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-7:  3rem;
  --space-8:  4.5rem;
  --space-section: clamp(4rem, 3rem + 6vw, 8rem);

  --container: 72rem;        /* 1152px */
  --container-narrow: 46rem; /* long-form reading width */

  /* ---- Shape ---- */
  --r-sm:   0.5rem;
  --r-md:   1rem;
  --r-lg:   1.5rem;
  --r-pill: 999px;

  /* ---- Elevation (deep, cool) ---- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35), 0 4px 14px rgba(0, 0, 0, 0.30);
  --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.40), 0 18px 44px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 4px 10px rgba(0, 0, 0, 0.45), 0 36px 90px rgba(0, 0, 0, 0.55);
  --shadow-glow: 0 0 0 1px rgba(79, 141, 255, 0.35), 0 8px 36px var(--lumo-glow);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --speed-fast: 180ms;
  --speed-base: 320ms;
  --speed-slow: 640ms;
}