/* Sula design tokens ------------------------------------------------------
   ONE system, linked first on every page. If a value is not in here it does
   not exist on the site. The point is not the specific numbers, it is that
   there is a small fixed set of them: a page reads "designed" when a few
   decisions were made once and applied without exception, and reads generic
   when every component answered locally.
   ------------------------------------------------------------------------ */
:root{
  /* ---- type -------------------------------------------------------------
     Space Grotesk is display only. Body sits on the system stack so it
     renders at native weight instead of being synthesised. */
  --font-display:"Space Grotesk",system-ui,sans-serif;
  --font-body:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  --t-display:clamp(40px,6.4vw,72px);  /* h1   700 / 1.02 / -.032em */
  --t-h2:clamp(30px,3.6vw,44px);       /* h2   700 / 1.08 / -.022em */
  --t-h3:24px;                         /* h3   600 / 1.25 / -.012em */
  --t-lead:19px;                       /* hero sub, section sub  400 / 1.5 */
  --t-body:16px;                       /* 400 / 1.6 */
  --t-sm:14px;                         /* 400 / 1.55  secondary, captions, legal */
  --t-xs:12px;
  /* measure in ch so it stays correct at every font size */
  --m-display:16ch;
  --m-lead:46ch;
  --m-prose:62ch;

  /* ---- spacing: 4px base, ten steps, nothing between -------------------
     Hierarchy comes from proximity: inside a component s1-s4, between
     components s5-s6, header to content s7, between sections s9-s10. */
  --s1:4px;  --s2:8px;  --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px;

  /* ---- surfaces: on dark, elevation is lightness, not shadow -----------
     The brand's second colour is a VERY DARK GREY, so these are neutral: the
     old scale carried a blue tint (#0b0d12 sits at hue 220) which read as
     navy next to a warm accent and fights a green one. Same lightness steps,
     hue removed. */
  --bg:#0c0d0e;
  --surface-1:#141517;   /* cards, nav, footer */
  --surface-2:#1a1c1e;   /* raised: active states, popovers, secondary buttons */
  --surface-3:#212326;   /* inputs, code, hover fills */

  --line-1:rgba(255,255,255,.06);
  --line-2:rgba(255,255,255,.10);
  --line-3:rgba(255,255,255,.16);

  /* ---- text: not pure white, which halates on near-black --------------- */
  --text-1:#f4f5f7;
  --text-2:#a1a8b5;      /* 8.3:1 on --bg */
  --text-3:#7b8494;
  /* ---- one accent, four roles ------------------------------------------
     Frequency is the discipline, not hue. The GRADIENT appears at most once
     per viewport plus the logo. Everything else takes a solid step. */
  --accent-fill:#b3fb37;
  /* --accent-fill-2 existed only to be the far stop of --accent-grad and was
     never used flat anywhere. --accent-grad is now the flat fill: the token
     stays so the ~250 downstream consumers keep resolving, but the system no
     longer offers "gradient" as a blessed value. */
  --accent-grad:var(--accent-fill);
  --accent-text:#bef264;               /* accent AS TEXT on dark, ~11.5:1 */
  --accent-ink:#16210a;                /* text ON accent fill, ~6.7:1.
                                          white on #84cc16 is 2.80:1 and fails */
  --accent-line:rgba(179,251,55,.42);
  --accent-wash:rgba(179,251,55,.10);
  /* ---- glow (2026-09-16): light lives ON elements, never behind sections --
     One hue family (H82 to H84). --accent-fill is the button ground; the
     sheen is the same hue one step lighter at the top and one step darker at
     the foot. The glow is ONE recipe reused verbatim: a 1px same-hue edge so
     the bloom has a crisp boundary, a short bloom, a downward pool. Every
     token here is a box-shadow, a text-shadow or a button gradient. None may
     be used as a background on a section or a card. --e-accent stays neutral:
     style.css .card:hover consumes it and a glow on every card is exactly
     what this is not. */
  --accent-rgb:179,251,55;
  --accent-fill-hi:#befc55;
  --accent-fill-lo:#abf726;
  --sheen-fill:linear-gradient(180deg,#befc55 0%,#b3fb37 55%,#abf726 100%);
  --sheen-top:inset 0 1px 0 rgba(255,255,255,.32),inset 0 -1px 0 rgba(0,0,0,.12);
  --accent-glow:0 0 0 1px rgba(179,251,55,.30),0 0 22px -2px rgba(179,251,55,.38),0 8px 24px -10px rgba(179,251,55,.55);
  --accent-glow-strong:0 0 0 1px rgba(179,251,55,.45),0 0 32px -2px rgba(179,251,55,.55),0 12px 30px -10px rgba(179,251,55,.72);
  --accent-glow-soft:0 0 0 1px rgba(179,251,55,.22),0 0 14px -3px rgba(179,251,55,.32);
  --accent-glow-ring:0 0 0 1px rgba(179,251,55,.30),0 0 16px -3px rgba(179,251,55,.32);
  --accent-halo:0 0 18px rgba(190,242,100,.20),0 0 56px rgba(179,251,55,.26);
  --sweep:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.24) 50%,transparent 62%);

  /* ---- radii: applied concentrically (inner = outer - pad) --------------
     Nest them: container --r-xl, card --r-lg, badge --r-md, input --r-sm.
     --r-xl was missing while 16px was hand-written 17 times, so the outer
     step could not be expressed in tokens at all. */
  --r-sm:6px;    /* inputs, the innermost step */
  --r-md:8px;    /* badges, chips, small controls */
  --r-lg:12px;   /* cards */
  --r-xl:16px;   /* sections and panels that CONTAIN cards */
  --r-2xl:24px;  /* large set-pieces: hero panels, modals, the composer */
  --r-full:999px;

  /* ---- elevation: neutral, three layers, one light direction -----------
     Exactly one coloured shadow survives, on the primary button, where it
     works as brand rather than as depth. */
  --e-1:0 1px 2px rgba(0,0,0,.30),0 2px 6px rgba(0,0,0,.22);
  --e-2:0 1px 2px rgba(0,0,0,.32),0 4px 10px rgba(0,0,0,.26),0 12px 28px rgba(0,0,0,.20);
  --e-3:0 2px 4px rgba(0,0,0,.34),0 8px 20px rgba(0,0,0,.28),0 24px 56px rgba(0,0,0,.24);
  /* Neutral elevation. These were coloured halos, the default "cool" look of
     AI-generated UI; colour belongs in the fill, not in a bloom behind it. */
  --e-accent:0 8px 24px -10px rgba(0,0,0,.5);
  /* pop: the secondary colour. Reserved for money moments only: offers,
     discounts, savings, OUR PICK. Never on ordinary buttons or nav, or it
     stops standing out. Chosen 2026-08-21 against violet and cyan. */
  --pop:#ff2d78;
  --pop-ink:#2b0514;
  --pop-text:#ff7aa8;
  --pop-line:rgba(255,45,120,.45);
  --pop-wash:rgba(255,45,120,.12);
  --pop-grad:var(--pop);
  --e-pop:0 8px 24px -10px rgba(0,0,0,.5);

  /* ---- numerals --------------------------------------------------------
     Proportional digits make a column of figures ragged and make a live
     readout jitter as it updates. Any number that sits in a column, or that
     changes in place, takes .tnum. */
  --num-tabular:tabular-nums;

  /* ---- motion ---------------------------------------------------------- */
  --dur-fast:120ms;
  --dur-base:200ms;
  --dur-slow:320ms;
  --ease-out:cubic-bezier(.2,0,0,1);
}

/* ---- buttons: three variants, three sizes, no others -------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  font-family:var(--font-body);font-size:var(--t-sm);font-weight:600;
  border-radius:var(--r-full);border:1px solid transparent;cursor:pointer;
  padding:11px 20px;text-decoration:none;white-space:nowrap;
  transition:background var(--dur-fast) var(--ease-out),
             border-color var(--dur-fast) var(--ease-out),
             transform var(--dur-fast) var(--ease-out)}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:2px solid var(--accent-text);outline-offset:2px}
/* Primary: a light source. Same-hue sheen, 1px inner top highlight, one glow
   recipe, a light sweep on hover. Secondary and ghost stay matte: the glow is
   what marks the primary. One hover language for every primary on the site:
   lift 1px, glow intensifies, brightness 1.05, sweep 500ms; press compresses. */
.btn.primary{position:relative;isolation:isolate;overflow:hidden;
  background:var(--sheen-fill);color:var(--accent-ink);border-color:transparent;
  box-shadow:var(--sheen-top),var(--accent-glow);
  transition:transform var(--dur-fast) var(--ease-out),box-shadow var(--dur-base) var(--ease-out),
             filter var(--dur-base) var(--ease-out)}
.btn.primary::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:inherit;
  background:var(--sweep);transform:translateX(-120%);opacity:0;transition:opacity var(--dur-fast)}
.btn.primary:hover{background:var(--sheen-fill);color:var(--accent-ink);filter:brightness(1.05);
  transform:translateY(-1px);box-shadow:var(--sheen-top),var(--accent-glow-strong)}
.btn.primary:hover::after{opacity:1;transform:translateX(120%);
  transition:transform .5s var(--ease-out),opacity var(--dur-fast)}
.btn.primary:active{transform:translateY(1px) scale(.985);filter:none;box-shadow:var(--sheen-top),var(--accent-glow-soft)}
/* the ring is --text-1, not lime: a lime ring on a lime, lime-lit fill merges
   into the bloom. Near-white on dark, near-black on light. */
.btn.primary:focus-visible{outline:2px solid var(--text-1);outline-offset:3px}
.btn.primary:disabled,.btn.primary[aria-disabled="true"]{transform:none;filter:none;box-shadow:var(--sheen-top)}
.btn.primary:disabled::after{content:none}
.btn.secondary{background:var(--surface-2);color:var(--text-1);border-color:var(--line-2)}
.btn.secondary:hover{background:var(--surface-3);border-color:var(--line-3)}
.btn.ghost{background:transparent;color:var(--text-2)}
.btn.ghost:hover{background:var(--surface-2);color:var(--text-1)}
.btn.sm{padding:8px 14px;font-size:var(--t-xs);text-transform:none;letter-spacing:0}
.btn.lg{padding:15px 28px;font-size:var(--t-body)}
.btn.block{width:100%}

/* ---- numerals: one class, applied wherever figures align or update ---- */

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
  .btn.primary::after{content:none}
  .btn.primary:hover,.btn.primary:active{transform:none}
}

/* ---- light theme ---------------------------------------------------------
   Dark stays the default and the brand; this block wins when the visitor
   picks light (data-theme="light" on <html>, stored as vc_theme, shared
   with the app). Same roles, lightness flipped: elevation goes back to
   being shadow, accent AS TEXT darkens so it still reads on white. */
:root[data-theme="light"]{
  color-scheme:light;
  --bg:#fafafa;
  --surface-1:#ffffff;
  --surface-2:#f3f4f6;
  --surface-3:#e9ebef;
  --line-1:rgba(15,23,42,.08);
  --line-2:rgba(15,23,42,.12);
  --line-3:rgba(15,23,42,.18);
  --text-1:#0f172a;
  --text-2:#334155;
  --text-3:#475569;
  --accent-text:#3f6212;               /* ~7:1 on white */
  --accent-line:rgba(101,163,13,.45);
  --accent-wash:rgba(132,204,22,.14);
  /* light is the same system with the light direction flipped. The fill stays
     lime-500: a brighter lime on white is a washed fill and a lost edge. The
     brightness comes from the sheen and the glow; the glow is DARKER than the
     page (a bright glow is invisible on white) and pools downward; the sheen
     carries a 1px deep-green inset edge so the button holds its silhouette
     (3.18:1 against the page). Accent text stays dark green. */
  --accent-fill:#84cc16;
  --accent-rgb:132,204,22;
  --accent-fill-hi:#9be22a;
  --accent-fill-lo:#76b814;
  --sheen-fill:linear-gradient(180deg,#9be22a 0%,#84cc16 55%,#76b814 100%);
  --sheen-top:inset 0 1px 0 rgba(255,255,255,.45),inset 0 0 0 1px rgba(63,98,18,.45);
  --accent-glow:0 6px 18px -6px rgba(101,163,13,.45),0 0 16px -4px rgba(132,204,22,.30);
  --accent-glow-strong:0 10px 26px -8px rgba(77,124,15,.55),0 0 22px -4px rgba(132,204,22,.45);
  --accent-glow-soft:0 4px 12px -4px rgba(101,163,13,.35);
  --accent-glow-ring:0 0 0 1px rgba(101,163,13,.45),0 0 12px -3px rgba(132,204,22,.30);
  --accent-halo:0 0 12px rgba(132,204,22,.22),0 0 30px rgba(132,204,22,.12);
  --sweep:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.34) 50%,transparent 62%);
  --e-1:0 1px 2px rgba(15,23,42,.06),0 2px 6px rgba(15,23,42,.05);
  --e-2:0 1px 2px rgba(15,23,42,.06),0 4px 10px rgba(15,23,42,.06),0 12px 28px rgba(15,23,42,.06);
  --e-3:0 2px 4px rgba(15,23,42,.06),0 8px 20px rgba(15,23,42,.08),0 24px 56px rgba(15,23,42,.08);
  --pop-text:#c9145c;
  --pop-line:rgba(219,27,98,.35);
  --pop-wash:rgba(219,27,98,.09);
}