/* Design scale and type from the Kin OS frame, retinted to Hyperliquid.
   The marketing site uses #03211c, #97fce3 and #50d2c1. Spacing, type and motion stay as specified. */

:root {
  --u: clamp(.85px, 100vw / 1470, 1.3px);   /* one design pixel; design frame 1470 × 956 */

  --s4: calc(var(--u) * 4);  --s8: calc(var(--u) * 8);  --s12: calc(var(--u) * 12); --s16: calc(var(--u) * 16);
  --s24: calc(var(--u) * 24); --s32: calc(var(--u) * 32); --s48: calc(var(--u) * 48); --s72: calc(var(--u) * 72);
  --s120: calc(var(--u) * 120); --s192: calc(var(--u) * 192);

  --site: #03211c;
  --bg: #072723; --panel: #0f3933; --card: #134840; --control: #1d5249;

  --glass: rgba(3, 33, 28, .52);
  --glass-light: rgba(248, 249, 249, .08);
  --glass-filter: blur(calc(var(--u) * 24)) saturate(1.4);

  --fill-1: rgba(252, 252, 252, .06);
  --fill-2: rgba(252, 252, 252, .1);
  --fill-3: rgba(252, 252, 252, .16);
  --rule:   rgba(252, 252, 252, .14);
  --chip-blur: blur(calc(var(--u) * 12)) saturate(1.4);

  --l-bg: #e6ebeb;
  --l-surface: rgba(248, 249, 249, .82); --l-surface-2: rgba(255, 255, 255, .6);
  --l-ink-1: #03211c; --l-ink-2: #447259; --l-ink-3: #6d8f86;
  --l-fill-1: rgba(3, 33, 28, .05); --l-fill-2: rgba(3, 33, 28, .09); --l-rule: rgba(3, 33, 28, .1);
  --l-lift: 0 calc(var(--u) * 24) calc(var(--u) * 60) calc(var(--u) * -24) rgba(3, 33, 28, .18);
  --l-glass-filter: blur(calc(var(--u) * 20)) saturate(1.5);

  --ink-1: #f8f9f9; --ink-2: #c5d5d1; --ink-3: #8eaaa3;

  /* #50d2c1 is the app teal; #97fce3 is the logo mint and the hot accent. */
  --lavender: #50d2c1; --yellow: #97fce3; --cyan: #97fce3; --coral: #447259; --steel: #77b694;

  --grad-dawn: linear-gradient(90deg, #011916 0%, #03211c 21%, #072723 32%, #0f3933 42%, #134840 53%, #1d5249 63%, #447259 74%, #50d2c1 84%, #77b694 95%, #97fce3 100%);
  --grad-golden: linear-gradient(90deg, #50d2c1 0%, #77b694 45%, #97fce3 100%);

  --font-text:  "Helvetica Neue", Helvetica, "Inter", Arial, sans-serif;
  --font-pixel: "Geist Pixel Square", "Helvetica Neue", Helvetica, "Inter", sans-serif;
  --font-dots:  "Geist Pixel Circle", "Geist Pixel Square", sans-serif;

  --t-s: calc(var(--u) * 13); --lh-s: 1.3;  --tr-s: 0;
  --t-m: calc(var(--u) * 16); --lh-m: 1.45; --tr-m: -.011em;
  --t-l: calc(var(--u) * 28); --lh-l: 1.15; --tr-l: -.025em;
  --tr-caps: .06em;
  --d-1: min(calc(var(--u) * 176), 12.6vw); --lh-d1: .86;
  --d-2: calc(var(--u) * 56); --lh-d2: 1;

  --r-xs: calc(var(--u) * 6); --r-s: calc(var(--u) * 10); --r-m: calc(var(--u) * 14); --r-l: calc(var(--u) * 20);
  --r-pill: 999px; --btn-h: calc(var(--u) * 44); --gutter: var(--s48);

  --ease-out:  cubic-bezier(.23, 1, .32, 1);
  --ease-expo: cubic-bezier(.16, 1, .3, 1);
  --ease-move: cubic-bezier(.77, 0, .175, 1);
  --dur-press: 160ms; --dur-ui: 240ms; --dur-in: 600ms; --stagger: 60ms;
  --in-blur: calc(var(--u) * 12); --in-y: calc(var(--u) * 16); --press: .97;

  /* Reveal timings live here so the cascade and the bars share one clock. */
  --rv-in: 1200ms; --rv-out: 520ms;

  /* Title ink divisors. main.js remeasures Geist Pixel so the glyphs sit 24px in. */
  --title-em: 9.348;
  --title-em-m: 5.244;
}
@media (max-width: 767px) {
  :root { --u: calc(100vw / 430); --t-s: max(12px, calc(var(--u) * 13)); --t-m: max(15px, calc(var(--u) * 16));
          --t-l: max(22px, calc(var(--u) * 28)); --d-2: calc(var(--u) * 44); --gutter: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  :root { --dur-press: 0ms; --dur-ui: 0ms; --dur-in: 0ms; --stagger: 0ms; --in-blur: 0px; --in-y: 0px; }
}