/* Design tokens — Millennium game HUD (glass + morphism) */

:root {
  /* Brand / ink */
  --ink: #10221f;
  --paper: #e8f3ef;
  --foam: #f4fbf8;
  --text: #eaf6f2;
  --text-dim: rgba(220, 240, 232, 0.72);

  /* Lake palette */
  --teal: #1f9a88;
  --teal-mid: #167a6e;
  --teal-deep: #0f5c54;
  --water: #0d4a46;
  --water-deep: #082e2c;
  --green: #3d8b5a;
  --accent: #c45c26;
  --copper: #d07a45;
  --gold: #e6c35c;
  --gold-deep: #b8892a;
  --danger: #c45b5b;
  --frame: #1c1c1c;

  /* Millennium (game-wrapper) */
  --mill-green-from: #002924;
  --mill-green-to: #016156;
  --mill-orange-from: #B34500;
  --mill-orange-to: #FF881B;
  --wizard-gold: #F4C24B;
  --wizard-gold-deep: #C9A227;
  --lobster-gold-top: #E5D08E;
  --lobster-gold-bot: #C98F46;
  --grad-lobster-gold: linear-gradient(180deg, var(--lobster-gold-top) 0%, var(--lobster-gold-bot) 100%);
  --grad-green-tl: linear-gradient(to top left, var(--mill-green-from), var(--mill-green-to));
  --grad-green-tr: linear-gradient(to top right, var(--mill-green-from), var(--mill-green-to));
  --grad-orange-br: linear-gradient(to bottom right, var(--mill-orange-from), var(--mill-orange-to));
  --grad-wizard-gold: linear-gradient(135deg, var(--wizard-gold-deep) 0%, var(--wizard-gold) 55%, #ffe08a 100%);

  /* Cinema glass surfaces (over live scene — UI only) */
  --glass: rgba(4, 28, 26, 0.55);
  --glass-strong: rgba(4, 18, 16, 0.82);
  --glass-panel: linear-gradient(165deg, rgba(8, 52, 48, 0.72), rgba(2, 18, 16, 0.88));
  --glass-tile: linear-gradient(160deg, rgba(1, 97, 86, 0.62), rgba(0, 41, 36, 0.78));
  --stroke: rgba(255, 255, 255, 0.14);
  --stroke-strong: rgba(220, 245, 230, 0.35);
  --hairline: rgba(255, 255, 255, 0.08);
  --scrim: rgba(2, 8, 10, 0.55);
  --glow-orange: rgba(255, 136, 27, 0.45);
  --glow-gold: rgba(244, 194, 75, 0.4);
  --glow-teal: rgba(1, 97, 86, 0.35);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* Neo / Millennium morphism */
  --neo-light: rgba(255, 255, 255, 0.72);
  --neo-dark: rgba(26, 60, 58, 0.28);
  --neo-face: #e8f4f1;
  --shadow: rgba(0, 0, 0, 0.35);
  --morphism-up: 0px 4px 0px rgba(0, 0, 0, 0.1), 0px 8px 8px rgba(0, 0, 0, 0.4),
    inset 0px 2px 4px rgba(255, 255, 255, 0.25), inset 0px -2px 4px rgba(0, 0, 0, 0.3);
  --morphism-down: inset 0 2px 8px rgba(0, 0, 0, 0.8);
  --shadow-up: var(--morphism-up);
  --shadow-down: var(--morphism-down);

  /* Geometry */
  --radius: 16px;
  --radius-sm: 12px;
  --touch: 44px;
  --hud-pad: clamp(0.45rem, 1.6vw, 0.85rem);
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);

  /* Type — Fredoka display + Nunito body (playful game HUD) */
  --font-ui: "Nunito", "Segoe UI", sans-serif;
  --font-brand: "Fredoka", "Nunito", sans-serif;
  font-family: var(--font-ui);
}