/* ==========================================================================
   colors.css — EVERY colour of Cave Grid lives in this file.

   Dark mode is the default (:root). Light mode overrides the same tokens
   under [data-theme="light"] (toggle at the bottom of the left panel).
   Change a value here and it updates everywhere.
   ========================================================================== */

:root {
  color-scheme: dark;

  /* ---- Accent ----------------------------------------------------------- */
  --accent: hsl(330 100% 50%);
  --accent-hover: hsl(330 100% 60%);
  --accent-soft: hsl(330 100% 50% / 0.16);   /* pressed buttons, active items */
  --accent-text: hsl(330 100% 72%);          /* accent used as text on dark bg */
  --on-accent: hsl(0 0% 100%);               /* text on an accent background */

  /* ---- App chrome (bars, panels, popovers) ------------------------------ */
  --bg-app: hsl(228 14% 8%);
  --bg-bar: hsl(228 13% 11%);         /* toolbar, formula bar, bottom bar, panel */
  --bg-elevated: hsl(228 13% 15%);    /* popovers, menus, dialogs */
  --bg-input: hsl(228 14% 7%);        /* text fields */
  --bg-hover: hsl(228 12% 19%);
  --bg-pressed: hsl(228 12% 23%);
  --line: hsl(228 10% 19%);           /* separators, outlines */
  --line-strong: hsl(228 10% 30%);
  --text: hsl(228 15% 90%);
  --text-muted: hsl(228 10% 62%);
  --text-faint: hsl(228 8% 44%);
  --danger: hsl(0 85% 64%);
  --danger-soft: hsl(0 85% 64% / 0.14);
  --shadow: 0 10px 30px hsl(228 30% 2% / 0.55), 0 0 0 1px hsl(228 10% 22%);
  --backdrop: hsl(228 30% 2% / 0.55);

  /* ---- Grid ------------------------------------------------------------- */
  --grid-bg: hsl(228 14% 6%);
  --grid-line: hsl(228 10% 16%);
  --grid-text: hsl(228 15% 90%);
  --grid-header-bg: hsl(228 13% 11%);
  --grid-header-text: hsl(228 9% 55%);
  --grid-header-hl-bg: hsl(330 100% 50% / 0.16);
  --grid-header-hl-text: hsl(330 100% 74%);
  --grid-selection-border: var(--accent);
  --grid-selection-fill: hsl(330 100% 50% / 0.12);
  --grid-cell-border: hsl(228 15% 78%);   /* borders added with the toolbar */
  --grid-error: hsl(0 85% 66%);
  --grid-preview: hsl(330 100% 65%);      /* dashed fill / move preview */
  --grid-editor-bg: hsl(228 14% 9%);

  /* ---- Formula reference highlights (while editing) --------------------- */
  --ref-1: hsl(200 90% 60%);
  --ref-2: hsl(140 65% 52%);
  --ref-3: hsl(40 95% 58%);
  --ref-4: hsl(275 80% 70%);
  --ref-5: hsl(15 90% 62%);
  --ref-6: hsl(175 70% 50%);
}

[data-theme="light"] {
  color-scheme: light;

  --accent-soft: hsl(330 100% 50% / 0.10);
  --accent-text: hsl(330 100% 42%);

  --bg-app: hsl(228 20% 96%);
  --bg-bar: hsl(0 0% 100%);
  --bg-elevated: hsl(0 0% 100%);
  --bg-input: hsl(228 20% 97%);
  --bg-hover: hsl(228 20% 93%);
  --bg-pressed: hsl(228 20% 89%);
  --line: hsl(228 15% 88%);
  --line-strong: hsl(228 12% 75%);
  --text: hsl(228 20% 15%);
  --text-muted: hsl(228 10% 40%);
  --text-faint: hsl(228 8% 60%);
  --danger: hsl(0 75% 48%);
  --danger-soft: hsl(0 75% 48% / 0.10);
  --shadow: 0 10px 30px hsl(228 30% 20% / 0.15), 0 0 0 1px hsl(228 15% 86%);
  --backdrop: hsl(228 30% 10% / 0.3);

  --grid-bg: hsl(0 0% 100%);
  --grid-line: hsl(228 15% 90%);
  --grid-text: hsl(228 20% 12%);
  --grid-header-bg: hsl(228 20% 97%);
  --grid-header-text: hsl(228 10% 45%);
  --grid-header-hl-bg: hsl(330 100% 50% / 0.10);
  --grid-header-hl-text: hsl(330 100% 40%);
  --grid-selection-fill: hsl(330 100% 50% / 0.08);
  --grid-cell-border: hsl(228 20% 20%);
  --grid-error: hsl(0 75% 45%);
  --grid-preview: hsl(330 100% 45%);
  --grid-editor-bg: hsl(0 0% 100%);

  --ref-1: hsl(210 90% 45%);
  --ref-2: hsl(140 70% 32%);
  --ref-3: hsl(35 95% 42%);
  --ref-4: hsl(275 65% 50%);
  --ref-5: hsl(10 80% 48%);
  --ref-6: hsl(180 80% 30%);
}