/* ==========================================================================
   Night Grid — Renewable Energy Idler
   In-repo visual tokens. Hex/CSS source of truth for Night Grid.
   Implement against this file. Do not invent a second palette.
   Mirrors the Godot Theme; shared by game HUD, game page, wiki, and blog.
   ========================================================================== */

:root {
  /* --- Core palette (locked) ------------------------------------------- */
  --grid-void: #0B1220;
  --grid-panel: #121A2B;
  --grid-raised: #1A2540;
  --solar: #F0B429;
  --copper: #C4845A;
  --wind: #3DCDC0;
  --leaf: #7CB342;
  --paper: #F4EDE0;
  --ink: #E8EEF7;
  --ink-dim: #8B9BB4;
  --ink-on-paper: #1A2438;
  --ember: #E85D4C;
  --watt: #FFE08A;

  /* --- Derived tints/shades (not a new brand; 3 only) ------------------ */
  --solar-deep: #C49218;   /* pressed / sun-down solar */
  --wind-mist: #64D7CD;    /* wind hover, ghost fill */
  --grid-inset: #0E1626;   /* recessed wells between void and panel */

  /* --- Alpha helpers (same hues) --------------------------------------- */
  --copper-hairline: rgba(196, 132, 90, 0.40);
  --solar-hairline: rgba(240, 180, 41, 1);
  --wind-hairline: rgba(61, 205, 192, 0.70);
  --ember-hairline: rgba(232, 93, 76, 0.80);
  --watt-glow: rgba(255, 224, 138, 0.45);
  --void-60: rgba(11, 18, 32, 0.60);
  --paper-ink-link: var(--wind);

  /* --- Semantic aliases ------------------------------------------------ */
  --color-bg: var(--grid-void);
  --color-surface: var(--grid-panel);
  --color-surface-raised: var(--grid-raised);
  --color-surface-inset: var(--grid-inset);
  --color-cta: var(--solar);
  --color-cta-hover: var(--watt);
  --color-cta-pressed: var(--solar-deep);
  --color-cta-text: var(--ink-on-paper);
  --color-accent: var(--wind);
  --color-accent-hover: var(--wind-mist);
  --color-danger: var(--ember);
  --color-success: var(--leaf);
  --color-text: var(--ink);
  --color-text-dim: var(--ink-dim);
  --color-text-on-cta: var(--ink-on-paper);
  --color-text-on-paper: var(--ink-on-paper);
  --color-reading: var(--paper);
  --color-live: var(--watt);
  --color-chrome: var(--copper);

  /* --- Type ------------------------------------------------------------ */
  --font-display: "Syne", sans-serif;
  --font-ui: "Atkinson Hyperlegible", sans-serif;
  --font-body: "Source Serif 4", serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  --fs-display-xl: 40px;
  --fs-display-l: 32px;
  --fs-display-m: 24px;
  --fs-ui: 16px;
  --fs-ui-sm: 14px;
  --fs-ui-xs: 12px;
  --fs-body: 18px;
  --fs-hud-resource: 20px;

  --lh-body: 1.6;
  --lh-ui: 1.35;
  --lh-display: 1.15;

  --trk-display: -0.02em;
  --trk-ui: 0;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;

  /* --- Space (8px grid) ------------------------------------------------ */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --space-6: 48px;

  --pad-panel: 16px;
  --gap-section: 24px;

  /* --- Chrome ---------------------------------------------------------- */
  --radius-panel: 8px;
  --radius-hud: 4px;
  --radius-button: 8px;

  --border-width: 1px;
  --stroke-icon-24: 2px;
  --stroke-icon-16: 1.5px;

  --shadow-ambient: 0 8px 24px rgba(0, 0, 0, 0.35);
  --shadow-none: none;

  --panel-bg: var(--grid-panel);
  --panel-border: var(--copper-hairline);
  --panel-border-focus: var(--solar);
  --panel-radius: var(--radius-panel);

  /* --- Buttons --------------------------------------------------------- */
  --btn-primary-bg: var(--solar);
  --btn-primary-fg: var(--ink-on-paper);
  --btn-primary-hover-bg: var(--watt);
  --btn-primary-pressed-bg: var(--solar-deep);

  --btn-secondary-bg: transparent;
  --btn-secondary-fg: var(--wind);
  --btn-secondary-border: var(--wind);
  --btn-secondary-hover-fg: var(--wind-mist);

  --btn-danger-bg: transparent;
  --btn-danger-fg: var(--ember);
  --btn-danger-border: var(--ember);

  --btn-pad-y: 10px;
  --btn-pad-x: 16px;
  --btn-height: 40px;

  /* --- Resources / HUD ------------------------------------------------- */
  --resource-fg: var(--watt);
  --resource-tick: var(--copper);
  --resource-glow: 0 0 12px var(--watt-glow);

  /* --- Wiki / blog reading --------------------------------------------- */
  --well-bg: var(--paper);
  --well-fg: var(--ink-on-paper);
  --well-link: var(--wind);
  --well-heading: var(--ink-on-paper);
  --well-radius: var(--radius-panel);
}

/* Dark glass panel — web cards and game HUD share this. */
.ng-panel {
  background: var(--panel-bg);
  border: var(--border-width) solid var(--panel-border);
  border-radius: var(--panel-radius);
  box-shadow: var(--shadow-ambient);
  padding: var(--pad-panel);
  color: var(--color-text);
}

.ng-panel:focus-within,
.ng-panel.is-active {
  border-color: var(--panel-border-focus);
}

.ng-chip {
  border-radius: var(--radius-hud);
  padding: 4px 8px;
  background: var(--grid-raised);
  border: var(--border-width) solid var(--copper-hairline);
}

.ng-btn {
  font-family: var(--font-ui);
  font-size: var(--fs-ui);
  letter-spacing: var(--trk-ui);
  line-height: var(--lh-ui);
  border-radius: var(--radius-button);
  padding: var(--btn-pad-y) var(--btn-pad-x);
  min-height: var(--btn-height);
  cursor: pointer;
  border-width: var(--border-width);
  border-style: solid;
}

.ng-btn-primary {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-fg);
  border-color: var(--btn-primary-bg);
}
.ng-btn-primary:hover { background: var(--btn-primary-hover-bg); border-color: var(--btn-primary-hover-bg); }
.ng-btn-primary:active { background: var(--btn-primary-pressed-bg); border-color: var(--btn-primary-pressed-bg); }

.ng-btn-secondary {
  background: var(--btn-secondary-bg);
  color: var(--btn-secondary-fg);
  border-color: var(--btn-secondary-border);
}
.ng-btn-secondary:hover { color: var(--btn-secondary-hover-fg); border-color: var(--btn-secondary-hover-fg); }

.ng-btn-danger {
  background: var(--btn-danger-bg);
  color: var(--btn-danger-fg);
  border-color: var(--btn-danger-border);
}

.ng-resource {
  font-family: var(--font-mono);
  font-size: var(--fs-hud-resource);
  font-weight: var(--fw-medium);
  color: var(--resource-fg);
  text-shadow: var(--resource-glow);
  letter-spacing: 0.02em;
}

.ng-well {
  background: var(--well-bg);
  color: var(--well-fg);
  border-radius: var(--well-radius);
  padding: var(--space-4);
}
.ng-well h1, .ng-well h2, .ng-well h3 {
  font-family: var(--font-display);
  letter-spacing: var(--trk-display);
  color: var(--well-heading);
}
.ng-well p, .ng-well li {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}
.ng-well a { color: var(--well-link); }

.ng-header {
  background: var(--grid-raised);
  border-bottom: var(--border-width) solid var(--copper-hairline);
  color: var(--ink);
  font-family: var(--font-ui);
}