/* ============================================================
   Design tokens — light & dark palettes.
   The sidebar keeps its deep-ink identity in both themes;
   the petrol-teal accent is shared and tuned per theme.

   Shared by the admin console (admin-ui) and the public plugin
   browser (public-ui); both apps serve this folder at /shared so
   the two UIs stay visually in sync from a single source.
   ============================================================ */

:root {
  --font-sans: "Segoe UI Variable Text", "Segoe UI", -apple-system, "Helvetica Neue", sans-serif;
  --font-display: "Segoe UI Variable Display", "Segoe UI", -apple-system, "Helvetica Neue", sans-serif;
  --font-mono: "Cascadia Mono", "Cascadia Code", Consolas, "SF Mono", monospace;

  --radius-card: 12px;
  --radius-ctl: 8px;
  --radius-pill: 999px;

  --ink-1: #14171d;          /* sidebar / constant ink */
  --ink-2: #1b1f27;
  --ink-text: #c9ced8;
  --ink-text-dim: #8b93a3;
  --ink-line: rgba(255, 255, 255, 0.08);

  --ease-swift: cubic-bezier(0.22, 0.9, 0.35, 1);
  --shadow-pop: 0 12px 40px -8px rgba(10, 14, 20, 0.45);

  --transition-theme: background-color 0.25s var(--ease-swift), color 0.25s var(--ease-swift),
    border-color 0.25s var(--ease-swift);
}

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

  --bg: #f2f3f5;
  --bg-glow: radial-gradient(1100px 500px at 78% -10%, rgba(15, 118, 110, 0.07), transparent 60%);
  --surface: #ffffff;
  --surface-2: #f7f8f9;
  --surface-hover: #f1f3f4;

  --text-1: #191c21;
  --text-2: #4b525e;
  --text-3: #7b8392;

  --line-1: #e3e5e9;
  --line-2: #eceef1;

  --accent: #0f766e;
  --accent-strong: #0c5f59;
  --accent-soft: rgba(15, 118, 110, 0.1);
  --accent-line: rgba(15, 118, 110, 0.32);
  --accent-contrast: #ffffff;

  --ok: #15803d;
  --ok-soft: rgba(21, 128, 61, 0.12);
  --warn: #b45309;
  --warn-soft: rgba(180, 83, 9, 0.12);
  --danger: #b91c1c;
  --danger-soft: rgba(185, 28, 28, 0.1);
  --danger-line: rgba(185, 28, 28, 0.35);

  --shadow-card: 0 1px 2px rgba(20, 23, 29, 0.05), 0 4px 16px -6px rgba(20, 23, 29, 0.08);
  --shadow-card-hover: 0 2px 4px rgba(20, 23, 29, 0.06), 0 10px 28px -8px rgba(20, 23, 29, 0.14);

  --chart-grid: #e7e9ec;
  --scroll-thumb: #c9cdd3;
}

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

  --bg: #131519;
  --bg-glow: radial-gradient(1100px 500px at 78% -10%, rgba(45, 212, 191, 0.05), transparent 60%);
  --surface: #1c1f25;
  --surface-2: #22262d;
  --surface-hover: #262b33;

  --text-1: #e9ebee;
  --text-2: #a8aeb9;
  --text-3: #767e8b;

  --line-1: #2c313a;
  --line-2: #252a32;

  --accent: #2fbfae;
  --accent-strong: #4fd6c6;
  --accent-soft: rgba(47, 191, 174, 0.13);
  --accent-line: rgba(47, 191, 174, 0.38);
  --accent-contrast: #0c1413;

  --ok: #4ade80;
  --ok-soft: rgba(74, 222, 128, 0.13);
  --warn: #fbbf24;
  --warn-soft: rgba(251, 191, 36, 0.13);
  --danger: #f87171;
  --danger-soft: rgba(248, 113, 113, 0.12);
  --danger-line: rgba(248, 113, 113, 0.38);

  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.25), 0 4px 18px -6px rgba(0, 0, 0, 0.35);
  --shadow-card-hover: 0 2px 4px rgba(0, 0, 0, 0.3), 0 12px 30px -8px rgba(0, 0, 0, 0.5);

  --chart-grid: #272c34;
  --scroll-thumb: #3a414c;
}