/*
 * design/tokens.css — THE central design-token layer.
 *
 * Source of truth: the APPROVED concave-mirror interactive lesson
 * (../lesson.css). Every colour below is copied 1:1 from its computed
 * values — nothing here is a new palette. This file does not touch or
 * import lesson.css; it exists so every NEW native lesson module (and the
 * public topic pages) can reuse the same language instead of inventing one.
 *
 * The immersive lesson stage is ALWAYS the dark "science-museum exhibit"
 * look, regardless of the visitor's OS light/dark preference — exactly like
 * the frozen concave lesson, which has no light-mode variant. Do not add a
 * `prefers-color-scheme` branch to these stage tokens.
 *
 * Usage:
 *   - Native lesson modules load this file (see lessons/mount-lesson.js).
 *   - Component classes live in design/components.css, built on these tokens.
 *   - Frozen lesson.css / intro.css are NOT modified and do NOT read this file.
 */

:root {
  /* ---- 1. raw palette, copied verbatim from lesson.css ---- */
  --stage:         #123f31;   /* deep mint-green lab (radial highlight) */
  --stage-2:       #0d3226;   /* stage base / page background */
  --paper:         #eef6f0;   /* light card surface (result / end card / trail) */
  --paper-ink:     #16362a;   /* text on the paper surface */

  --ink:           #f2fbf4;   /* primary text on the dark stage */
  --ink-soft:      #bfe0cf;   /* secondary text on the dark stage */
  --ink-faint:     #7fae99;   /* muted text on the dark stage */

  --axis:          #3f6f5c;
  --pole:          #ffffff;
  --focus-c:       #ffd271;   /* warm — "rays meet here" */
  --centre-c:      #86e0c6;   /* cool — centre of curvature */

  --ray-in:        #ffe7a6;   /* incident ray — warm pale */
  --ray-out:       #59e6d0;   /* reflected ray — bright aqua (also the "live/ready" accent) */
  --violet:        #c4a6ff;   /* dashed "appears to meet" extensions — never real light */

  /* surface accents used by the paper "result card" (explore-card in lesson.css) */
  --surface-border:        #cfe3d6;
  --surface-border-virtual:#d6c8f2;
  --surface-label:         #7c9a8c;   /* small uppercase label colour on paper */
  --surface-emph-real:     #0c8f6b;
  --surface-emph-virtual:  #7a4fd0;

  /* ---- 2. generic role aliases — reuse the above, never re-declare a colour ---- */
  --app-bg:          var(--stage-2);
  --stage-bg:         var(--stage);
  --surface:          var(--paper);
  --surface-raised:   #ffffff;
  --surface-strong:   var(--stage-2);   /* fixed-dark chrome, e.g. an overlay bar — NEVER theme-flipped */

  --text-primary:        var(--ink);
  --text-secondary:      var(--ink-soft);
  --text-muted:          var(--ink-faint);
  --text-on-surface:       var(--paper-ink);
  --text-on-surface-muted: var(--surface-label);

  --accent-primary:   var(--ray-out);
  --accent-secondary: var(--focus-c);
  --focus-color:      var(--focus-c);
  --centre-color:     var(--centre-c);
  --virtual-color:    var(--violet);
  --ray-in-color:     var(--ray-in);
  --ray-out-color:    var(--ray-out);

  /* ---- 3. typography ---- */
  --font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* semantic sizes — the same role is always the same size across modules */
  --font-size-title:       clamp(1.55rem, 6.6vw, 2.7rem);   /* teleprompter headline */
  --font-size-explanation: clamp(1rem, 4vw, 1.3rem);        /* teaching / support text — comfortably readable on a classroom display */
  --font-size-instruction: clamp(1.02rem, 4.2vw, 1.28rem);  /* "what to do" — must stay highly visible */
  --font-size-label:       0.72rem;                          /* diagram / readout labels */
  --font-size-small:       0.64rem;                          /* meta / eyebrow text */

  --font-weight-title: 800;
  --font-weight-body:  600;

  /* ---- 4. shape + spacing ---- */
  --radius-card:   16px;
  --radius-button: 12px;
  --radius-pill:   999px;

  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;

  --control-height: 46px;
  --card-padding:   14px 16px 12px;
  --card-border:    1px solid var(--surface-border);

  --shadow-card:  0 10px 30px rgba(3, 18, 12, .28);
  --shadow-modal: 0 24px 60px rgba(3, 18, 12, .5);
}