/* CodeQuest Kids — design tokens
   Extracted from the approved prototype (CodeQuest Kids v2.dc.html).
   Palette derives from the UDIS logo; structure from the Modernist design
   system (flat fills, zero corner radius, heavy 3px rules, Archivo only).
   Copy these into your codebase's token layer rather than hard-coding hexes. */

:root {
  /* ---- Brand / ink ---- */
  --cq-ink:            #16283d; /* all text, all borders, wall tiles */
  --cq-ink-soft:       #4a6b8a; /* kickers, secondary copy */
  --cq-ink-muted:      #7d93a8; /* disabled text */

  /* ---- Accents ---- */
  --cq-blue:           #1a5f9e; /* primary action, active mission, step numerals */
  --cq-green:          #62b43c; /* Forward button, win state, earned badges */
  --cq-yellow:         #ffc426; /* stars, highlight/hover, running step */
  --cq-orange:         #ee5b2b; /* lava + error states ONLY */
  --cq-orange-dark:    #b83d16; /* lava hazard stripes */

  /* ---- Grounds ---- */
  --cq-bg:             #eef4fa; /* page ground */
  --cq-surface:        #ffffff; /* panels, cards, path tiles */
  --cq-surface-sunken: #dfeaf5; /* board mat, code text on ink */
  --cq-start-tile:     #d8f0c8; /* robot start square */
  --cq-locked:         #e4ecf4; /* locked world fill */
  --cq-locked-edge:    #b9c8d8;
  --cq-locked-text:    #6b8299;
  --cq-robot-sky:      #7fc4f5; /* "Rover" visor, code line counter */

  /* ---- Type ---- */
  --cq-font: "Archivo", system-ui, sans-serif;           /* headings AND body */
  --cq-font-mono: ui-monospace, SFMono-Regular, Menlo, monospace; /* code only */
  /* weights: 900 for every heading, label and button; 700 for body copy */
  --cq-h1: clamp(38px, 6vw, 78px);   /* line-height .9  · letter-spacing -3px */
  --cq-h2: clamp(22px, 3vw, 32px);   /* line-height 1.1 · letter-spacing -1px */
  --cq-h3: 28px;                     /* mission name */
  --cq-panel-title: 26px;
  --cq-stat: 54px;                   /* stat numerals, line-height 1 */
  --cq-lead: clamp(18px, 2vw, 23px); /* hero paragraph, weight 700 */
  --cq-body: 18px;                   /* mission brief, plan rows */
  --cq-ui: 16px;                     /* secondary buttons, status strip */
  --cq-label: 13px;                  /* uppercase labels, ls 1.4-1.8px */
  --cq-kicker: 12px;                 /* uppercase kickers, ls 1.6px */
  --cq-code: 15px;                   /* line-height 1.7 */

  /* ---- Structure ---- */
  --cq-radius: 0;            /* never round a corner */
  --cq-rule: 3px solid var(--cq-ink);  /* panel borders, section dividers */
  --cq-rule-thin: 2px solid var(--cq-ink); /* small chips only */
  --cq-gap-hairline: 3px;    /* ink shows through as a seam between cells */
  --cq-pad-panel: 18px;
  --cq-pad-tight: 14px;
  --cq-gap-section: 38px;
  --cq-max-width: 1440px;
  --cq-page-pad: 20px;

  /* ---- Touch targets (mixed ages 6-12) ---- */
  --cq-hit-primary: 78px;    /* Run my plan */
  --cq-hit-command: 74px;    /* Forward / step count */
  --cq-hit-turn: 66px;       /* Turn left / right */
  --cq-hit-secondary: 56px;
  --cq-hit-min: 44px;        /* absolute floor */

  /* ---- Jaunty theme ----
     Every decorative box is rotated a fraction of a degree, alternating
     direction. The maze grid and the whole Command builder stay square. */
  --cq-tilt-card: 1deg;      /* world/mission cards, panels: 0.4-1.4deg */
  --cq-tilt-chip: 1.6deg;    /* small chips, tags, badges */
  --cq-tilt-numeral: 3deg;   /* step numerals, world/mission numbers */

  /* ---- Motion ---- */
  --cq-move: left .28s ease, top .28s ease; /* robot travel between tiles */
  --cq-turn: transform .2s ease;            /* robot rotation */
  --cq-step-default: 420ms;                 /* one queue command; 150-900ms range */
}

/* Focus is themed, never the browser default */
:focus-visible { outline: 3px solid var(--cq-yellow); outline-offset: 2px; }
::selection { background: var(--cq-yellow); }

@keyframes cq-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes cq-pop { from { transform: scale(.94); opacity: 0; } to { transform: scale(1); opacity: 1; } }