/* ZE VPN Store - token layer. Cobalt.
   Cool near-white paper, one electric cobalt accent sampled from the
   @ZeStoreOrderBot avatar. Genre: modern-minimal. Register: instrument panel.
   Every colour in the page resolves here. No hex, no oklch() outside :root. */

:root {
  /* ---- ground: cool engineered near-white, never #fff ---- */
  --color-paper:      oklch(99%    0.003 250);
  --color-paper-2:    oklch(96.8%  0.005 250);
  --color-ink:        oklch(19%    0.024 258);
  --color-ink-2:      oklch(36%    0.022 258);
  --color-ink-3:      oklch(50%    0.020 258);

  /* ---- accent: cobalt, hue 258 sampled from the bot avatar ---- */
  --color-accent:     oklch(52%    0.19  258);
  --color-accent-ink: oklch(99%    0.003 250);
  --color-focus:      oklch(45%    0.19  262);
  --color-focus-halo: oklch(99%    0.003 250);

  /* ---- rules: ruler-drawn, visible, not hairline-skeletal ---- */
  --color-rule:   oklch(19% 0.024 258 / 0.13);
  --color-rule-2: oklch(19% 0.024 258 / 0.28);
  --color-rule-3: oklch(19% 0.024 258 / 0.06);

  /* ---- type: Space Grotesk display, Inter Tight body, JetBrains Mono ---- */
  --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Inter Tight", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --text-2xs:  0.6875rem;
  --text-xs:   0.8125rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-3xl:  clamp(1.875rem, 1.5rem + 1.9vw, 2.75rem);

  --leading-snug: 1.25;
  --leading-body: 1.6;

  --tracking-display: -0.035em;
  --tracking-body: -0.011em;
  --tracking-label: 0.14em;

  /* ---- space: 4pt grid ---- */
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2.5rem;
  --space-xl:  4rem;

  /* ---- frame ---- */
  --wrap: 60rem;
  --gutter: clamp(1.125rem, 4vw, 2.5rem);

  /* ---- shape: tight radii, the Cobalt register ---- */
  --radius-tile: 0.375rem;
  --radius-core: 0.25rem;

  /* ---- motion: spring-like interpolation for premium micro-interactions ---- */
  --ease-out: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-spring: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-quick: 220ms;
  --dur-base: 700ms;
  --dur-reveal: 900ms;
  --color-accent-soft: oklch(96% 0.025 258);

  /* ---- depth: restrained, diffused, cobalt-tinted ---- */
  --shadow-soft: 0 1.25rem 3rem oklch(19% 0.024 258 / 0.08);
  --shadow-inset: inset 0 1px 1px oklch(99% 0.003 250 / 0.7);

  /* ---- depth: tinted with the ink hue ---- */

  /* ---- hit target ---- */
  --tap: 44px;
}