/* ============================================================
   Qissatec — theme tokens
   Brand scale supplied by the client. Page backgrounds are only
   ever #FFFFFF or #E6FCFF; everything else is glass on top.
   ============================================================ */
:root{
  --white:#FFFFFF;
  --c50:#E6FCFF;
  --c100:#B8F7FF;
  --c200:#8AF1FF;
  --c300:#5CECFF;
  --c400:#2EE7FF;
  --c500:#00E1FF;
  --c600:#00B9D1;
  --c700:#0090A3;
  --c800:#006875;
  --c900:#003F47;
  --c950:#00171A;

  /* Text — every value below is WCAG AA checked against a white/glass
     background (min 4.5:1 for normal text). The original ink-45 (.45
     alpha) measured 3.0:1 and ink-30 measured 2.0:1 — both real fails
     that read as "washed out" on text-dense pages (form labels, hints,
     captions). First pass bumped ink-45 to 6.0:1, which still read as
     too light in practice (small mono caps at low alpha stay visually
     thin even once the formula passes) — bumped again to 10.8:1 so
     field labels and captions are unambiguously dark, not just compliant. */
  --ink:var(--c950);
  --ink-75:rgba(0,23,26,.88);   /* 13.3:1 — lede copy, hero subtext, consent */
  --ink-60:rgba(0,23,26,.82);   /* 10.8:1 — secondary body copy, nav links */
  --ink-45:rgba(0,23,26,.95);   /* 15.9:1 — small caps: labels, captions, meta */

  /* Form placeholders. Left unstyled these fall back to the browser's own
     grey — Chrome uses #757575 (4.61:1), which is the lightest text on the
     page and dominates an empty form visually. Set explicitly so it is
     genuinely dark (7.5:1) while still reading as a hint rather than a
     typed value (--ink is 18.5:1). */
  --ink-placeholder:rgba(0,23,26,.80);

  /* Form feedback. #0090A3 (c700) measured 3.8:1 on white — fails for
     status text people are meant to actually read. c800 clears 6.5:1. */
  --alert:#C2410C;
  --ok:#006875;

  /* Filled buttons/badges with white text or icons on top. The original
     c700->c500 gradient put white on top of #00E1FF at its bright end —
     1.6:1, effectively invisible — on every primary button label (Send
     message, Submit story, Get QR Extension) and the step-number badges.
     c800->c900 keeps both stops dark enough that white clears 6.5:1+
     everywhere along the gradient. */
  --grad-fill:linear-gradient(105deg,var(--c800),var(--c900));

  /* Glass */
  --glass:rgba(255,255,255,.55);
  --glass-strong:rgba(255,255,255,.76);
  --glass-edge:rgba(255,255,255,.85);
  --ring:rgba(0,225,255,.38);
  --ring-soft:rgba(0,185,209,.16);
  --blur:saturate(180%) blur(22px);

  /* Elevation — cyan-tinted, never neutral grey */
  --lift-sm:0 8px 24px -14px rgba(0,104,117,.40);
  --lift:0 26px 60px -30px rgba(0,104,117,.55);
  --lift-lg:0 50px 110px -50px rgba(0,63,71,.60);
  --glow:0 0 0 1px var(--ring), 0 20px 60px -24px rgba(0,185,209,.55);

  /* Type */
  --display:'Sora',ui-sans-serif,system-ui,sans-serif;
  --body:'Manrope',ui-sans-serif,system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --arabic:'IBM Plex Sans Arabic',var(--body);

  /* Layout */
  --maxw:1280px;
  --pad:clamp(20px,5vw,68px);
  --r:20px;
  --r-lg:30px;
  --r-xl:42px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --spring:cubic-bezier(.34,1.56,.64,1);
  --hdr-h:78px;
}