/* ============================================================
   CATEWHEEL — Design Tokens
   ------------------------------------------------------------
   Every value here is sampled from CateWheel.png: the sky
   gradient, the cloud white, the tyre black, the electric rim
   blue and the gold of the coin hub. The system is pixel-art
   game UI — hard shadows, thick dark outlines, high saturation.
   ============================================================ */

:root {
  /* ---- Sky — straight off the artwork ----------------------*/
  --sky-900: #0654c6;
  --sky-800: #0860d8;
  --sky-700: #1068e0;
  --sky-600: #1878e8;
  --sky-500: #1f85f0;
  --sky-400: #40b8f8;
  --sky-300: #68c8f8;
  --sky-200: #a8dcfb;
  --sky-100: #cfeafd;
  --sky-050: #e8f5fe;

  /* ---- Cloud ----------------------------------------------*/
  --cloud: #f8f8f8;
  --cloud-pure: #ffffff;
  --cloud-shade: #cfe0f5;
  --cloud-deep: #a9c4e4;

  /* ---- Tyre / ink — the outline colour ---------------------*/
  --ink-900: #10131f;
  --ink-800: #1f2334;
  --ink-700: #24283a;
  --ink-600: #363c52;
  --ink-400: #5b6480;

  /* ---- Gold — the coin hub --------------------------------*/
  --gold-600: #b8760c;
  --gold-500: #e69716;
  --gold-400: #eeaf2a;
  --gold-300: #fbc94a;
  --gold-200: #fde193;
  --gold-100: #ffeec2;

  /* ---- Rim — electric blue accent -------------------------*/
  --rim: #0f87fd;
  --rim-deep: #0a5fc4;

  /* ---- Signals --------------------------------------------*/
  --win: #22c55e;
  --win-deep: #15803d;
  --lose: #f0554d;
  --lose-deep: #b91c1c;

  /* ---- Semantic -------------------------------------------*/
  --fg: var(--ink-900);
  --fg-soft: var(--ink-600);
  --fg-faint: var(--ink-400);
  --on-sky: var(--cloud-pure);

  /* ---- Type -----------------------------------------------*/
  --font-display: "Outfit", ui-sans-serif, system-ui, sans-serif;
  --font-sans: "Outfit", ui-sans-serif, system-ui, sans-serif;
  --font-pixel: "Silkscreen", "Courier New", monospace;
  --font-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;

  --t-hero: clamp(3rem, 9.5vw, 8rem);
  --t-d1: clamp(2.1rem, 5vw, 3.8rem);
  --t-d2: clamp(1.5rem, 3vw, 2.3rem);
  --t-body: clamp(1rem, 1.05vw, 1.1rem);
  --t-small: 0.85rem;
  --t-pixel: 0.6rem;

  /* ---- Space ----------------------------------------------*/
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.25rem;
  --s-6: 1.5rem;
  --s-8: 2rem;
  --s-10: 2.5rem;
  --s-12: 3rem;
  --s-16: 4rem;

  --shell: 1200px;
  --measure: 60ch;

  /* Full height of the sticky bar: inner height PLUS its bottom
     border. The deck subtracts this, so the two must be defined
     together or the hero sits a few pixels past the fold. */
  --bar-inner: 66px;
  --bar: calc(var(--bar-inner) + var(--edge));

  /* ---- Pixel UI -------------------------------------------
     Hard offset shadows, never blurred. This single decision
     is most of what makes the interface read as game art
     rather than a generic gradient site.                    */
  --edge: 3px;
  --pop-1: 0 3px 0 var(--ink-900);
  --pop-2: 0 5px 0 var(--ink-900);
  --pop-3: 0 8px 0 var(--ink-900);
  --pop-soft: 0 5px 0 rgba(16, 19, 31, 0.22);

  /* depth used *under* a popped element so it sits on the sky */
  --drop: 0 14px 30px rgba(6, 84, 198, 0.28);
  --drop-lg: 0 26px 60px rgba(6, 84, 198, 0.34);

  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-pill: 999px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ============================================================
   Reset
   ============================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  background: var(--sky-700);
}

body,
h1,
h2,
h3,
h4,
p,
figure,
dl,
dd,
table,
th,
td {
  margin: 0;
  padding: 0;
}

ul[class],
ol[class] {
  list-style: none;
  margin: 0;
  padding: 0;
}

img,
svg,
canvas {
  display: block;
  max-width: 100%;
}

/* The width/height attributes on <img> are presentational hints, and
   aspect-ratio is ignored when BOTH dimensions resolve to a length.
   Without this, setting only a CSS width leaves the attribute height
   in force and the image renders at the wrong shape. */
img {
  height: auto;
}

button,
input {
  font: inherit;
  color: inherit;
}

table {
  border-collapse: collapse;
  width: 100%;
}

a {
  color: inherit;
}

::selection {
  background: var(--gold-300);
  color: var(--ink-900);
}

:focus-visible {
  outline: 3px solid var(--ink-900);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

/* pixel-art images must never be smoothed */
.pixelated {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* The UA rule is only `[hidden] { display: none }`, which ANY author
   `display` beats on specificity — a `display: inline-grid` button stayed
   visible after being marked hidden. Restore the intent. */
[hidden] {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}