/* Zolak design tokens — DESIGN.md §2. The only place a raw value belongs. */

@font-face {
  font-family: "Retron2000";
  src: url("/static/fonts/Retron2000.ttf") format("truetype");
  font-display: swap;
}

:root {
  color-scheme: dark;

  /* 2.1 Neutral ramp */
  --zlk-ink-0: #08080b;
  --zlk-ink-1: #121218;
  --zlk-ink-2: #1b1b23;
  --zlk-ink-3: #2a2a35;
  --zlk-ink-4: #8a8a9a;
  --zlk-ink-5: #eeeef4;

  /* 2.2 Brand accents */
  --zlk-yellow: #FFF80C;
  --zlk-yellow-dim: #6b6805;
  --zlk-green: #1DB000;
  --zlk-green-bright: #2ee016;
  --zlk-green-dim: #0d4f00;
  --zlk-warn: #f0a637;
  --zlk-danger: #f0576a;

  /* 2.3 Surfaces */
  --zlk-surface-grad: linear-gradient(168deg, #191921 0%, #111117 58%);
  --zlk-card-border: 1px solid rgba(255, 255, 255, 0.06);
  --zlk-inset-highlight: rgba(255, 255, 255, 0.05);
  --zlk-card-shadow: 0 1px 0 var(--zlk-inset-highlight) inset,
                     0 12px 32px -18px rgba(0, 0, 0, 0.9);

  /* The one gradient outside the yellow system (DESIGN.md 2.3): Solana's own
     brand ramp, on Solana's own tile. Hand-writing it in a template is how it
     escaped this file in the first place. */
  --zlk-solana-grad: linear-gradient(135deg, #9945FF 0%, #14F195 100%);

  /* Same exception, for the bitcoin tile: brand yellow deserves its own ramp
     rather than a flat fill, but still lives here as a token, not a
     hand-written gradient() in the template. */
  --zlk-btc-grad: linear-gradient(135deg, #FFF80C 0%, #C9A400 100%);

  /* Third exception: the kiosk's "Learn about crypto" button, blue into violet
     so a first-timer sees it. Starts and ends on the same stop so a 200%-wide
     layer can slide by half its width and loop seamlessly. Deep enough that
     --zlk-ink-5 text stays above 7:1 on every stop. */
  --zlk-explainer-grad: linear-gradient(90deg, #2438e8 0%, #6a2ae0 25%, #3a1d9e 50%, #6a2ae0 75%, #2438e8 100%);

  /* 2.4 Radius */
  --zlk-radius-sm: 8px;
  --zlk-radius-md: 14px;
  --zlk-radius-lg: 20px;
  --zlk-radius-pill: 999px;

  /* 2.4 Spacing — 4px scale */
  --zlk-space-1: 4px;
  --zlk-space-2: 8px;
  --zlk-space-3: 12px;
  --zlk-space-4: 16px;
  --zlk-space-5: 20px;
  --zlk-space-6: 24px;
  --zlk-space-8: 32px;
  --zlk-space-10: 40px;
  --zlk-space-12: 48px;
  --zlk-space-16: 64px;

  /* 2.4 Type scale */
  --zlk-text-2xs: 11px;
  --zlk-text-xs: 13px;
  --zlk-text-sm: 15px;
  --zlk-text-base: 17px;
  --zlk-text-lg: clamp(19px, 2vw, 22px);
  --zlk-text-xl: clamp(24px, 3vw, 32px);
  --zlk-text-2xl: clamp(32px, 5vw, 48px);
  --zlk-text-hero: clamp(72px, 25vw, 320px);

  --zlk-font-display: "Retron2000", "Courier New", monospace;

  /* 2.5 Motion */
  --zlk-duration-fast: 120ms;
  --zlk-duration-base: 220ms;
  --zlk-duration-settle: 640ms;
  --zlk-ease: cubic-bezier(0.2, 0, 0.2, 1);
  /* One warp cycle of the kiosk starfield (DESIGN.md 2.5). Slow on purpose:
     it is a window behind the menu, not a screensaver. */
  --zlk-duration-warp: 18s;
  /* "Place order" jumps to lightspeed before the form submits (DESIGN.md 2.5). */
  --zlk-duration-jump: 600ms;
  /* One pass of the scan line inside the QR well's padding (DESIGN.md 3.5). */
  --zlk-duration-scan: 2.4s;
  /* One slide of the explainer button's blue/violet layer (DESIGN.md 2.5). */
  --zlk-duration-flow: 6s;

  /* The kiosk starfield: four tiled dot layers at co-prime tile sizes, so the
     repeat never lines up into a visible grid. Neutral ramp plus one sparse
     yellow layer -- a star is a point, not a light source (DESIGN.md 6.8). */
  --zlk-starfield:
    radial-gradient(1px 1px at 23% 41%, #eeeef4 50%, transparent 100%) 0 0 / 173px 173px,
    radial-gradient(1px 1px at 71% 13%, #8a8a9a 50%, transparent 100%) 0 0 / 131px 131px,
    radial-gradient(1.5px 1.5px at 57% 77%, #eeeef4 50%, transparent 100%) 0 0 / 251px 251px,
    radial-gradient(1.5px 1.5px at 11% 63%, #FFF80C 50%, transparent 100%) 0 0 / 389px 389px;
  /* The same sky at lightspeed, for the "Place order" jump: hairline rays
     out of the centre at co-prime spacings (7, 11, 17, 29 deg) so the burst
     never reads as a regular sunburst, under a dark core that keeps the
     middle empty -- streaks start out from the centre, not at it. Stretching
     the dot tile instead reads as rain: scaleY 10 shows a tenth of the tile. */
  --zlk-starstreaks:
    radial-gradient(closest-side, #08080b 35%, transparent 100%),
    repeating-conic-gradient(#eeeef4 0 0.12deg, transparent 0.12deg 7deg),
    repeating-conic-gradient(from 3deg, #8a8a9a 0 0.1deg, transparent 0.1deg 11deg),
    repeating-conic-gradient(from 5deg, #eeeef4 0 0.2deg, transparent 0.2deg 17deg),
    repeating-conic-gradient(from 13deg, #FFF80C 0 0.15deg, transparent 0.15deg 29deg);

  /* The explainer's scene backgrounds (DESIGN.md 2.5), one per scene, only
     inside the explainer dialog. Each sits over the opaque --zlk-ink-0 ground
     and stays faint: the caption's contrast is computed without them.
     Scene 1: a --zlk-danger ring whose clear middle shrinks as the lock drops. */
  --zlk-bg-vault: radial-gradient(closest-side, transparent 58%, rgba(240, 87, 106, 0.08) 78%, rgba(240, 87, 106, 0.26) 100%);
  /* Scene 2: a row of blocks joined by one line, an 80px tile, so the row
     slides by exactly one tile and loops without a seam. */
  --zlk-bg-chain:
    linear-gradient(90deg, #1b1b23 0 48px, transparent 48px) 0 50% / 80px 48px repeat-x,
    linear-gradient(#2a2a35, #2a2a35) 0 50% / 100% 2px no-repeat;
  /* Scene 3: sunrise, the bloom's yellow coming up from below the frame. */
  --zlk-bg-dawn: radial-gradient(80% 60% at 50% 100%, rgba(255, 248, 12, 0.22) 0%, rgba(240, 166, 55, 0.08) 45%, rgba(8, 8, 11, 0) 80%);
  /* Scene 4: a vault dial of faint gold rays, darkening outward. */
  --zlk-bg-dial:
    radial-gradient(closest-side, transparent 10%, #08080b 100%),
    repeating-conic-gradient(rgba(255, 248, 12, 0.06) 0 2deg, transparent 2deg 12deg),
    repeating-conic-gradient(from 6deg, rgba(201, 164, 0, 0.05) 0 1deg, transparent 1deg 12deg);
  /* Scene 5: TON-blue messages in flight. All dots on one 240px tile, so a
     diagonal slide of one tile loops without a seam; seven dots per tile
     keep the repeat from reading as a grid. */
  --zlk-bg-lanes:
    radial-gradient(2px 2px at 9% 72%, #0098EA 50%, transparent 100%),
    radial-gradient(1.5px 1.5px at 31% 31%, rgba(0, 152, 234, 0.7) 50%, transparent 100%),
    radial-gradient(1px 1px at 41% 88%, #eeeef4 50%, transparent 100%),
    radial-gradient(1.5px 1.5px at 57% 9%, rgba(0, 152, 234, 0.5) 50%, transparent 100%),
    radial-gradient(2px 2px at 73% 53%, rgba(0, 152, 234, 0.8) 50%, transparent 100%),
    radial-gradient(1px 1px at 88% 21%, #8a8a9a 50%, transparent 100%),
    radial-gradient(1.5px 1.5px at 94% 97%, #0098EA 50%, transparent 100%);
  --zlk-bg-lanes-size: 240px 240px;
  --zlk-bg-ton-glow: radial-gradient(60% 50% at 15% 100%, rgba(0, 152, 234, 0.14) 0%, rgba(0, 152, 234, 0) 100%);
  /* Scene 6: Solana-coloured speed streaks on one 560px tile. */
  --zlk-bg-streaks:
    radial-gradient(90px 1px at 12% 9%, rgba(20, 241, 149, 0.6), transparent),
    radial-gradient(140px 1.5px at 61% 23%, rgba(153, 69, 255, 0.6), transparent),
    radial-gradient(60px 1px at 33% 41%, rgba(238, 238, 244, 0.35), transparent),
    radial-gradient(120px 1px at 87% 52%, rgba(20, 241, 149, 0.45), transparent),
    radial-gradient(80px 1px at 5% 68%, rgba(153, 69, 255, 0.45), transparent),
    radial-gradient(110px 1.5px at 47% 81%, rgba(20, 241, 149, 0.5), transparent),
    radial-gradient(70px 1px at 76% 94%, rgba(153, 69, 255, 0.5), transparent);
  --zlk-bg-streaks-size: 560px 211px;
  /* Scene 7: one soft light per coin -- bitcoin, TON, Solana -- 120 deg apart. */
  --zlk-bg-trio:
    radial-gradient(28% 28% at 50% 18%, rgba(255, 248, 12, 0.12), transparent),
    radial-gradient(28% 28% at 22% 66%, rgba(0, 152, 234, 0.14), transparent),
    radial-gradient(28% 28% at 78% 66%, rgba(153, 69, 255, 0.16), transparent);

  /* 2.6 Touch */
  --zlk-touch-target: 44px;
  --zlk-touch-target-kiosk: 72px;
  --zlk-safe-bottom: env(safe-area-inset-bottom, 0px);

  /* 2.7 Misregistration — the green plate behind display type */
  --zlk-misreg-x: 2px;
  --zlk-misreg-y: 1px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --zlk-duration-fast: 0ms;
    --zlk-duration-base: 0ms;
    --zlk-duration-settle: 0ms;
    --zlk-duration-jump: 0ms;
    --zlk-duration-scan: 0ms;
    --zlk-misreg-x: 0px;
    --zlk-misreg-y: 0px;
  }
}

html {
  scroll-padding-bottom: calc(var(--zlk-touch-target) + var(--zlk-space-8) + var(--zlk-safe-bottom));
}

/* Shared recipe: press physics for every tappable element */
.tappable {
  transition: transform var(--zlk-duration-fast) var(--zlk-ease);
}

@media (hover: hover) {
  .tappable:hover {
    transform: translateY(-1px);
  }
}

.tappable:active {
  transform: scale(0.985);
}

@media (prefers-reduced-motion: reduce) {
  .tappable:hover,
  .tappable:active {
    transform: none;
  }
}

/* Shared recipe: enlarge a small mark's press target without touching layout */
.hit-target {
  position: relative;
}

.hit-target::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: max(100%, var(--zlk-touch-target));
  height: max(100%, var(--zlk-touch-target));
}

/* Shared recipe: one focus ring, everywhere */
:focus-visible {
  outline: 2px solid var(--zlk-yellow);
  outline-offset: 2px;
}

/* Shared recipe: misregistered display type (DESIGN.md §2.7). A plate, not a
   glow — zero blur. Contrast is carried by the glyph alone. */
.zlk-misreg {
  text-shadow: var(--zlk-misreg-x) var(--zlk-misreg-y) 0 var(--zlk-green-bright);
}