/* ============================================================
   CodeBlaster — Design tokens
   A single source of truth for colour, space, type and motion.
   Tier bands re-map a handful of these tokens (see tiers.css) so
   the same components feel age-appropriate without forking CSS.
   ============================================================ */

:root {
  color-scheme: dark;

  /* --- Palette: deep-space command centre ------------------ */
  --void:            #05070f;
  --hull-900:        #0a0e1b;
  --hull-800:        #101627;
  --hull-700:        #172033;
  --hull-600:        #1f2a40;
  --hull-500:        #2b3852;
  --hull-400:        #3d4d6b;
  --hull-300:        #5a6c8c;

  --ink-100:         #f4f7ff;
  --ink-200:         #dfe6f5;
  --ink-300:         #b6c2da;
  --ink-400:         #8494b4;
  --ink-500:         #62718f;

  /* Accents. Each has a solid, a soft wash and a glow. */
  --beam:            #45c8ff;   /* primary / navigation */
  --beam-soft:       #45c8ff26;
  --beam-deep:       #1189c4;

  --plasma:          #a97bff;   /* secondary / discovery */
  --plasma-soft:     #a97bff26;

  --lime:            #5fe3a1;   /* success */
  --lime-soft:       #5fe3a126;

  --solar:           #ffc857;   /* warning / XP / streaks */
  --solar-soft:      #ffc85726;

  --flare:           #ff6b7a;   /* error */
  --flare-soft:      #ff6b7a26;

  --rose:            #ff8fd1;   /* tier-0 playfulness */
  --rose-soft:       #ff8fd126;

  /* --- Semantic surfaces ----------------------------------- */
  --bg:              var(--void);
  --bg-elevated:     var(--hull-800);
  --surface:         var(--hull-800);
  --surface-2:       var(--hull-700);
  --surface-3:       var(--hull-600);
  --surface-sunken:  var(--hull-900);
  --border:          #ffffff14;
  --border-strong:   #ffffff2b;
  --text:            var(--ink-100);
  --text-muted:      var(--ink-300);
  --text-dim:        var(--ink-400);
  --accent:          var(--beam);
  --accent-contrast: #04121c;
  --success:         var(--lime);
  --warning:         var(--solar);
  --danger:          var(--flare);

  /* --- Type ------------------------------------------------ */
  --font-ui: "Inter var", "Inter", system-ui, -apple-system, "Segoe UI", Roboto,
             "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas,
               "Liberation Mono", monospace;
  --font-display: var(--font-ui);

  --scale: 1;                    /* tier + user text-size multiplier */
  --fs-3xs: calc(0.6875rem * var(--scale));
  --fs-2xs: calc(0.75rem  * var(--scale));
  --fs-xs:  calc(0.8125rem * var(--scale));
  --fs-sm:  calc(0.875rem * var(--scale));
  --fs-md:  calc(1rem     * var(--scale));
  --fs-lg:  calc(1.125rem * var(--scale));
  --fs-xl:  calc(1.375rem * var(--scale));
  --fs-2xl: calc(1.75rem  * var(--scale));
  --fs-3xl: calc(2.25rem  * var(--scale));
  --fs-4xl: calc(3rem     * var(--scale));

  --lh-tight: 1.15;
  --lh-snug:  1.35;
  --lh-body:  1.6;

  /* --- Space (4px base) ------------------------------------ */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;  --sp-4: 1rem;
  --sp-5: 1.25rem;  --sp-6: 1.5rem;   --sp-8: 2rem;     --sp-10: 2.5rem;
  --sp-12: 3rem;    --sp-16: 4rem;

  /* --- Shape ----------------------------------------------- */
  --r-xs: 6px;  --r-sm: 10px;  --r-md: 14px;  --r-lg: 20px;
  --r-xl: 28px; --r-pill: 999px;
  --density: 1;                  /* tier density multiplier */

  /* --- Elevation ------------------------------------------- */
  --shadow-1: 0 1px 2px #0006, 0 1px 3px #0004;
  --shadow-2: 0 4px 12px #00000059, 0 1px 3px #0006;
  --shadow-3: 0 12px 36px #00000073, 0 2px 8px #0006;
  --ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);

  /* --- Motion ---------------------------------------------- */
  --dur-1: 110ms;
  --dur-2: 200ms;
  --dur-3: 340ms;
  --dur-4: 620ms;
  --ease: cubic-bezier(0.32, 0.72, 0.29, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* --- Interaction ----------------------------------------- */
  --hit: 44px;                   /* minimum touch target */
  --layout-max: 1180px;
}

/* ---------- Light theme -------------------------------------- */
html[data-theme="light"] {
  color-scheme: light;
  --bg:              #f2f5fb;
  --bg-elevated:     #ffffff;
  --surface:         #ffffff;
  --surface-2:       #eef2fa;
  --surface-3:       #e2e9f6;
  --surface-sunken:  #e7ecf6;
  --border:          #0d18300f;
  --border-strong:   #0d183024;
  --text:            #0d1730;
  --text-muted:      #45536f;
  --text-dim:        #63719096;
  --beam-deep:       #0a6da0;
  --accent:          #0f7fb8;
  --accent-contrast: #ffffff;
  --success:         #12855a;
  --warning:         #96650a;
  --danger:          #c02c3c;
  --beam-soft:       #0f7fb81f;
  --plasma-soft:     #6f42c11f;
  --lime-soft:       #12855a1f;
  --solar-soft:      #96650a1f;
  --flare-soft:      #c02c3c1f;
  --shadow-1: 0 1px 2px #0d173012;
  --shadow-2: 0 6px 16px #0d17301a, 0 1px 2px #0d173010;
  --shadow-3: 0 18px 42px #0d173026;
}

/* ---------- High contrast ------------------------------------ */
html[data-contrast="high"] {
  --border:        #ffffff5c;
  --border-strong: #ffffff96;
  --text-muted:    var(--ink-100);
  --text-dim:      var(--ink-200);
  --surface:       #06090f;
  --surface-2:     #0d1320;
  --surface-3:     #141d2e;
}
html[data-contrast="high"][data-theme="light"] {
  --border:        #0d173066;
  --border-strong: #0d1730a6;
  --text-muted:    #0d1730;
  --text-dim:      #26324a;
}

/* ---------- Reduced motion ----------------------------------- */
@media (prefers-reduced-motion: reduce) {
  :root { --dur-1: 0.01ms; --dur-2: 0.01ms; --dur-3: 0.01ms; --dur-4: 0.01ms; }
}
html[data-motion="reduced"] { --dur-1: 0.01ms; --dur-2: 0.01ms; --dur-3: 0.01ms; --dur-4: 0.01ms; }