/* ============================================================
   css/glass-tokens.css -- THE ONE SOURCE of the liquid-glass
   material, shared by the landing (main-page/) and the platform.

   Extracted from main-page/index.html (29 Sep 2026, Kemal: "glass
   everywhere, the same as the landing"). The values are the
   landing's own, byte for byte: the nav pill, the dark `.glass`
   step card, the `.glass.light` card, the dark `.ink` section's
   glow and the light `.hw` section's mist wash.

   HOW BOTH SIDES READ IT
     platform  index.html links this file before every other sheet
               that reads it (css/shell-glass.css sections 11-17).
     landing   main-page/index.html is one static file with inline CSS
               (no extra render-blocking request on 4G), so it carries
               a COPY of the :root block below between the markers
               "glass-tokens:begin" / "glass-tokens:end".
               scripts/check-glass-tokens.py fails the build when the
               copy and this file differ; `--write` re-syncs it.
   Edit here, run the script with --write, never edit the copy.

   Every value is a pre-baked gradient, a rim (inset box-shadow) or a
   depth shadow. The only blur here is --gl-pill-blur, which the
   platform spends on the header pill alone (chrome, a few hundred
   pixels, DESIGN.md "glass is chrome, never content").

   The material is the same in both themes (the landing's pill is
   dark ink over light and dark sections alike), so each colour token
   is declared once for light and repeated under the dark root, per
   scripts/check-dark-parity.py ("dark is designed, not inherited").
   ============================================================ */
:root {
  /* glass-tokens:begin */
  --gl-ink-rgb: 5, 50, 58;
  --gl-action-rgb: 18, 157, 165;
  --gl-mint-rgb: 40, 240, 184;
  --gl-mist: #E6F5F6;
  --gl-mist-deep: #D5EEF0;
  /* the nav pill: an ink tint under a soft white sheen, blur + saturate,
     a specular top rim and a 1px inner edge, a low depth shadow */
  --gl-pill-a: .64;
  --gl-pill-sheen: linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .03));
  --gl-pill-tint: var(--gl-pill-sheen), rgba(var(--gl-ink-rgb), var(--gl-pill-a));
  --gl-pill-blur: blur(26px) saturate(1.8);
  --gl-pill-edge: rgba(255, 255, 255, .2);
  --gl-pill-rim: inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 0 0 1px rgba(255, 255, 255, .22);
  --gl-pill-depth: 0 8px 24px -14px rgba(0, 0, 0, .5);
  --gl-pill-solid: rgba(var(--gl-ink-rgb), .92);
  /* a control inside the pill (the landing's language switch) */
  --gl-chip: rgba(255, 255, 255, .08);
  --gl-chip-hover: rgba(255, 255, 255, .16);
  --gl-chip-rim: inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 0 0 1px rgba(255, 255, 255, .16);
  /* the landing's action button (Demo / Masuk): white on #0B7A82 is 5.2:1 */
  --gl-action: #0B7A82;
  --gl-action-hi: #129DA5;
  --gl-action-rim: inset 0 1px 0 rgba(255, 255, 255, .3), 0 0 0 1px rgba(var(--gl-mint-rgb), .5);
  /* the dark glass card (`.glass`, the "how it works" steps) */
  --gl-card-dark: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .05) 55%), rgba(var(--gl-ink-rgb), .34);
  --gl-card-dark-edge: rgba(255, 255, 255, .2);
  --gl-card-dark-rim: inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 -1px 0 rgba(0, 0, 0, .2);
  --gl-card-dark-depth: 0 1px 2px rgba(0, 0, 0, .12), 0 18px 40px -18px rgba(2, 22, 26, .6);
  /* the light glass card (`.glass.light`) */
  --gl-card-light: linear-gradient(180deg, rgba(255, 255, 255, .62), rgba(255, 255, 255, .34)), rgba(230, 245, 246, .2);
  --gl-card-light-edge: rgba(255, 255, 255, .7);
  --gl-card-light-rim: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 -1px 0 rgba(var(--gl-ink-rgb), .08);
  --gl-card-light-depth: 0 1px 2px rgba(var(--gl-ink-rgb), .08), 0 24px 48px -24px rgba(var(--gl-ink-rgb), .45);
  /* the grounds: the dark `.ink` section's glow, the light `.hw` mist */
  --gl-glow-dark: radial-gradient(40rem 22rem at 18% 30%, rgba(var(--gl-action-rgb), .38), rgba(var(--gl-action-rgb), 0) 70%),
                  radial-gradient(34rem 20rem at 82% 78%, rgba(var(--gl-action-rgb), .3), rgba(var(--gl-action-rgb), 0) 70%),
                  radial-gradient(24rem 14rem at 60% 12%, rgba(var(--gl-mint-rgb), .12), rgba(var(--gl-mint-rgb), 0) 70%);
  --gl-wash-light: radial-gradient(36rem 26rem at 20% 38%, rgba(var(--gl-action-rgb), .45), rgba(var(--gl-action-rgb), 0) 70%),
                   radial-gradient(30rem 22rem at 85% 70%, rgba(var(--gl-ink-rgb), .28), rgba(var(--gl-ink-rgb), 0) 70%),
                   radial-gradient(22rem 16rem at 62% 18%, rgba(var(--gl-mint-rgb), .22), rgba(var(--gl-mint-rgb), 0) 70%),
                   linear-gradient(180deg, var(--gl-mist), var(--gl-mist-deep));
  /* glass-tokens:end */
}
html[data-theme="dark"] {
  --gl-mist: #E6F5F6;
  --gl-mist-deep: #D5EEF0;
  --gl-pill-edge: rgba(255, 255, 255, .2);
  --gl-pill-solid: rgba(var(--gl-ink-rgb), .92);
  --gl-chip: rgba(255, 255, 255, .08);
  --gl-chip-hover: rgba(255, 255, 255, .16);
  --gl-action: #0B7A82;
  --gl-action-hi: #129DA5;
  --gl-card-dark-edge: rgba(255, 255, 255, .2);
  --gl-card-light-edge: rgba(255, 255, 255, .7);
}