/* Tema */

:root {
  color-scheme: light;

  /* Superfici */
  --bg: #f7f3ff;
  --surface: #ffffff;
  --surface-2: #efe7ff;
  --input-bg: #fcfaff;
  --code-bg: #f6f0ff;

  /* Testo */
  --ink: #231735;
  --muted: #75628f;

  /* Bordi e ombre */
  --line: #d9c9f5;
  --shadow: 0 18px 50px rgba(76, 42, 125, 0.11);

  /* Accenti */
  --accent: #7c3aed;
  --accent-2: #9333ea;
  --accent-contrast: #ffffff;

  /* Stati */
  --warning: #b45309;
  --danger: #be123c;
  --good: #047857;

  /* Evidenziazioni del tableau */
  --pivot: #facc15;
  --entering: #ede9fe;
  --leaving: #fae8ff;

  /* Componenti */
  --remove-bg: #fff1f5;
  --remove-border: #fecdd3;
  --callout-bg: #f3e8ff;
  --callout-ink: #6b21a8;
  --reduced-bg: #fbf7ff;
  --reduced-ink: var(--accent-2);

  /* Grafico */
  --graph-grid: #e7d9ff;
  --graph-axis: #4c2a7d;
  --graph-feasible: rgba(124, 58, 237, 0.16);
  --graph-feasible-stroke: rgba(124, 58, 237, 0.58);
  --graph-constraint: #7d6a99;
  --graph-path: #a855f7;
  --graph-optimal: #ec4899;

  /* Transizioni */
  --speed: 0.25s;
}

/* Tema scuro */

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

  --bg: #0f0a1f;
  --surface: #1a1230;
  --surface-2: #24183f;
  --input-bg: #1f1636;
  --code-bg: #201532;

  --ink: #f1eaff;
  --muted: #b7a6d8;

  --line: #3b2a5f;
  --shadow: 0 18px 50px rgba(0, 0, 0, 0.42);

  --accent: #a78bfa;
  --accent-2: #c084fc;
  --accent-contrast: #160c27;

  --warning: #fbbf24;
  --danger: #f87171;
  --good: #34d399;

  --pivot: #facc15;
  --entering: rgba(167, 139, 250, 0.18);
  --leaving: rgba(216, 180, 254, 0.14);

  --remove-bg: rgba(248, 113, 113, 0.1);
  --remove-border: rgba(248, 113, 113, 0.3);
  --callout-bg: rgba(192, 132, 252, 0.12);
  --callout-ink: #e9d5ff;
  --reduced-bg: var(--surface-2);
  --reduced-ink: var(--accent-2);

  --graph-grid: #3b2a5f;
  --graph-axis: #b7a6d8;
  --graph-feasible: rgba(167, 139, 250, 0.16);
  --graph-feasible-stroke: rgba(192, 132, 252, 0.52);
  --graph-constraint: #a99ac6;
  --graph-path: #c084fc;
  --graph-optimal: #f472b6;
}