/* Chirp — design tokens. The whole system in one place.
 * Rounded, chunky, physical-key buttons — the consumer-app archetype. */


:root {
  /* ---- Brand palette (dossier row 4: reserved color per currency) ---- */
  --green:        #58cc02;  /* Feather Green — primary */
  --green-dark:   #4aa601;  /* darker bottom-border green */
  --green-tint:   #d7ffb8;  /* success flood */
  --green-deep:   #3f8b00;
  --xp:           #ffc800;  /* XP yellow */
  --xp-dark:      #e6a800;
  --streak:       #ff9600;  /* streak flame orange */
  --streak-dark:  #e07d00;
  --heart:        #ff4b4b;  /* hearts red */
  --heart-dark:   #d63a3a;
  --heart-tint:   #ffdfe0;  /* failure flood */
  --gem:          #1cb0f6;  /* gems blue */
  --gem-dark:     #1493d0;
  --league:       #ce82ff;  /* leagues purple */
  --league-dark:  #a568cc;
  --gold:         #ffd23f;

  /* ---- Neutrals (Eel / Wolf / Swan / Polar) ---- */
  --ink:          #3c3c3c;  /* Eel — primary text */
  --wolf:         #777777;  /* secondary text */
  --hare:         #afafaf;  /* disabled text */
  --swan:         #e5e5e5;  /* borders */
  --polar:        #f7f7f7;  /* off-white surface */
  --snow:         #ffffff;
  --owl-bg:       #ddf4ff;  /* light blue panel */

  /* ---- Type ---- */
  --font-display: 'Baloo 2', system-ui, sans-serif;
  --font-body:    'Nunito', system-ui, sans-serif;

  /* ---- Radius / depth ---- */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-pill: 999px;
  --btn-drop: 4px;                 /* the physical-key bottom border */

  /* ---- Spacing scale (8-based) ---- */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;

  /* ---- Motion ---- */
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);  /* overshoot */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  --shadow-card: 0 2px 0 rgba(0,0,0,0.05);
  --maxw: 1160px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--snow);
  font-weight: 700;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1,h2,h3,h4 { font-family: var(--font-display); font-weight: 700; margin: 0; line-height: 1.05; }
a { color: inherit; text-decoration: none; }
button { font-family: var(--font-body); cursor: pointer; }
img { max-width: 100%; display: block; }
:focus-visible { outline: 3px solid var(--gem); outline-offset: 2px; border-radius: 6px; }

/* ---- The signature 3D button ---- */
.btn3d {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: none; border-radius: var(--r-md);
  font-family: var(--font-body); font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.8px;
  font-size: 15px; padding: 13px 20px;
  color: #fff; background: var(--green);
  box-shadow: 0 var(--btn-drop) 0 var(--green-dark);
  transition: transform .06s var(--ease-out), box-shadow .06s var(--ease-out), filter .12s;
  user-select: none; position: relative; top: 0;
}
.btn3d:hover { filter: brightness(1.04); }
.btn3d:active { top: var(--btn-drop); box-shadow: 0 0 0 var(--green-dark); }
.btn3d[disabled], .btn3d.is-disabled {
  background: var(--swan); color: var(--hare);
  box-shadow: none; cursor: default; pointer-events: none;
}
.btn3d.gem   { background: var(--gem);    box-shadow: 0 var(--btn-drop) 0 var(--gem-dark); }
.btn3d.gem:active   { box-shadow: 0 0 0 var(--gem-dark); }
.btn3d.red   { background: var(--heart);  box-shadow: 0 var(--btn-drop) 0 var(--heart-dark); }
.btn3d.red:active   { box-shadow: 0 0 0 var(--heart-dark); }
.btn3d.gold  { background: var(--xp);     color: var(--ink); box-shadow: 0 var(--btn-drop) 0 var(--xp-dark); }
.btn3d.gold:active  { box-shadow: 0 0 0 var(--xp-dark); }
.btn3d.ghost {
  background: var(--snow); color: var(--gem);
  border: 2px solid var(--swan); box-shadow: 0 var(--btn-drop) 0 var(--swan);
}
.btn3d.ghost:active { box-shadow: 0 0 0 var(--swan); }
.btn3d.lg { font-size: 17px; padding: 16px 28px; }
.btn3d.wide { width: 100%; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .04s !important; }
}