/* ==========================================================================
   Theme variables
   --------------------------------------------------------------------------
   Default theme: Forest.
   To switch the whole page to Gold, set data-theme="gold" on <html>
   (or edit/replace the values in the Forest block below).
   Only colors and theme images live here. Layout never references raw colors.
   ========================================================================== */

:root {
  /* --- Brand colors (Forest) --- */
  --color-base: #0d1114;       /* page background */
  --color-main: #6ff0d8;       /* main brand color */
  --color-accent: #17cf91;     /* accent brand color */
  --color-error: #ff7a7a;      /* error text / required mark / key sentences */

  /* --- Neutral colors (shared by all themes) --- */
  --color-surface: #06080f;    /* cards, inputs */
  --color-border: #1a2e45;     /* card borders, progress track */
  --color-text: #f0f5f9;
  --color-text-sub: #dde6ee;
  --color-secondary-hover: #ccddeb;
  --color-input-border: #d2f4f9;
  --color-highlight: #d2f4f9;  /* brightest point of the light effect */
  --color-placeholder: rgba(240, 245, 249, 0.4);
  --color-footer-bg: #000000;

  /* --- Chart colors (Forest) ---
     RULE: when adding more chart colors, keep the TONE (saturation / lightness / brightness)
     of the existing colors and vary only the HUE. Do not introduce darker, paler or more
     saturated colors. Forest and Gold each have their own set; keep both sets the same length
     so the chart can switch themes by changing data-theme only. */
  --chart-1: #17cf91;
  --chart-2: #6ff0d8;
  --chart-3: #5ec8f5;
  --chart-4: #8e9cff;
  --chart-5: #c08bff;
  --chart-6: #ff8fbf;
  --chart-7: #e6f06b;
  --chart-8: #ff9f8f;
  --chart-9: #ffb870;
  --chart-10: #9beb7a;

  /* --- Derived --- */
  --gradient-cta: linear-gradient(98deg, var(--color-main) 0%, var(--color-accent) 60%);
  --cta-hover: #12A171;

  /* --- Fonts --- */
  --font-heading: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --font-body: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

}

/* --------------------------------------------------------------------------
   Gold theme (prepared in advance; not used yet).
   The hero animation switches to Gold automatically.
   -------------------------------------------------------------------------- */
[data-theme="gold"] {
  --color-base: #0f1214;
  --color-main: #e0a93a;
  --color-accent: #ffb21f;
  --color-error: #ff6459;
  --color-highlight: #fff0c2;

  /* --- Chart colors (Gold) ---
     Same RULE as the Forest set above: same tone, different hue only. */
  --chart-1: #e0a93a;
  --chart-2: #e8795f;
  --chart-3: #e06a8c;
  --chart-4: #b778e0;
  --chart-5: #6f8fe8;
  --chart-6: #3fc4a8;
  --chart-7: #b9ce4a;
  --chart-8: #4fb3d9;
  --chart-9: #7ccb5a;
  --chart-10: #d966c9;
}