/* ============================================================
   THEME — Blueprint Steel (blue accent, dark topbar)
   Default (:root) = LIGHT. Dark lives under [data-theme="dark"].
   Topbar tokens stay dark in BOTH themes (brand anchor).
   A toggle will set data-theme on the root element (wired later).
   Every original variable name is preserved so no other file breaks.
   ============================================================ */

/* ---- LIGHT (default) ---- */
:root,
:root[data-theme="light"] {
  --bg-canvas: #c4cdda;          /* 3D canvas / workspace, toned so it won't blow out */
  --bg-panel: #e2e7ef;           /* panels, dropdowns — lifted off the canvas */
  --bg-panel-hover: #d4dce8;     /* hovered rows / surfaces */
  --bg-toolbar: #e2e7ef;         /* left tool rail (topbar uses its own tokens) */
  --border-subtle: #bcc5d3;      /* hairline dividers — darker than surfaces */
  --border-strong: #a2aebf;      /* stronger borders, outlines */
  --text-primary: #16191d;       /* near-black text */
  --text-secondary: #5e6878;     /* muted labels */
  --text-tertiary: #8a96a8;      /* hints / placeholders */
  --accent: #2f86d4;             /* primary buttons, active tool, links */
  --accent-soft: rgba(47, 134, 212, 0.14);  /* selected-row tint */
  --accent-glow: rgba(47, 134, 212, 0.28);  /* focus ring */
  --danger: #c0392b;             /* destructive actions / errors */
  --danger-soft: rgba(192, 57, 43, 0.10);
  --success: #2ea043;
  --warning: #c77d11;
  --grid-color-1: #d1d8e2;       /* blueprint grid major */
  --grid-color-2: #d8dee7;       /* blueprint grid minor */
  --shadow: 0 4px 16px rgba(22, 25, 29, 0.10);
  --shadow-soft: 0 1px 3px rgba(22, 25, 29, 0.08);

  /* ---- Topbar tokens (dark in both themes) ---- */
  --topbar-bg: #284561;
  --topbar-border: #33547a;
  --topbar-divider: #51678a;
  --topbar-text: #ffffff;
  --topbar-text-muted: #c4d2e4;
  --topbar-text-dim: #7e93ad;
  --topbar-active-bg: rgba(47, 134, 212, 0.28);
  --topbar-active-text: #ffffff;
  --topbar-hover-bg: rgba(255, 255, 255, 0.06);

  /* ---- Dropdown panel (Projects) ---- */
  --dd-surface: #dbe1ea;         /* tinted blue-grey panel */
  --dd-border: #b3c2d6;          /* firmer edge against grey */
  --dd-row: #f2f5f9;             /* soft card — sits on lifted panel */
  --dd-row-border: #c9d2de;
  --dd-dropzone: #dfe6f0;        /* group header surface — same family as rows */
  --dd-dropzone-border: #c3ccd9;
  --dd-heading: #2563b0;
  --dd-count-bg: #d7e3f4;
  --control-surface: #e6ebf2;    /* secondary button/control fill */
  --control-border: #a9bad2;     /* sharp edge for secondary buttons */
  --card-shadow: 0 1px 3px rgba(22, 38, 59, 0.14);  /* crisper lift for controls */
}

/* ---- DARK (activated via data-theme="dark") ---- */
:root[data-theme="dark"] {
  --bg-canvas: #0b0f15;
  --bg-panel: #151b24;
  --bg-panel-hover: #2a3546;
  --bg-toolbar: #151b24;
  --border-subtle: #232c38;
  --border-strong: #2e3947;
  --text-primary: #e7edf5;
  --text-secondary: #a8b6c8;
  --text-tertiary: #7d8da3;
  --accent: #5b9bd9;
  --accent-soft: rgba(91, 155, 217, 0.15);
  --accent-glow: rgba(91, 155, 217, 0.35);
  --danger: #ff6b6b;
  --danger-soft: rgba(255, 107, 107, 0.15);
  --success: #3fb950;
  --warning: #d9a23a;
  --grid-color-1: #161d27;
  --grid-color-2: #11161e;
  --shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  --shadow-soft: 0 2px 8px rgba(0, 0, 0, 0.30);

  /* Topbar stays dark (same anchor); slightly deeper to sit above dark panels */
  --topbar-bg: #101a28;
  --topbar-border: #1d2a3c;
  --topbar-divider: #45597b;
  --topbar-text: #ffffff;
  --topbar-text-muted: #c4d2e4;
  --topbar-text-dim: #7e93ad;
  --topbar-active-bg: #1d3a5c;
  --topbar-active-text: #7fb4f0;
  --topbar-hover-bg: rgba(255, 255, 255, 0.06);

  /* Dropdown panel — dark */
  --dd-surface: #1a222e;
  --dd-border: #333e4d;
  --dd-row: #212a37;
  --dd-row-border: #3a4757;
  --dd-dropzone: #243349;
  --dd-dropzone-border: #2c4a6e;
  --dd-heading: #7fb4f0;
  --dd-count-bg: #1d3a5c;
  --control-surface: #232d3c;
  --control-border: #445266;
  --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}