/* ==========================================================================
   DESIGN TOKENS — CLASS PISCINE dashboard base
   --------------------------------------------------------------------------
   Single source of truth for re-theming this dashboard (and any future
   project built from this same base). Change a value here and it flows
   into every Tailwind utility (bg-brand, rounded-card, shadow-card, ...)
   AND into the legacy stylesheet (style.css), which already references
   --lightcolor / --darkcolor everywhere.
   ========================================================================== */

:root {
  /* Primary accent — buttons, links, active nav item, focus rings */
  --brand: #0080c9;
  --brand-dark: #00669e;
  --brand-soft: #e6f4fb;

  /* Sidebar background (left as the existing teal) */
  --sidebar-bg: #63b9cb;

  /* Surfaces */
  --surface: #ffffff;
  --surface-muted: #f5f7fa;
  --border: #e2e8f0;

  /* Text */
  --text: #1f2937;
  --text-muted: #64748b;

  /* Shape */
  --radius-card: 1rem;
  --radius-control: 0.6rem;
  --shadow-card: 0 1px 2px rgba(15, 23, 42, .06), 0 8px 24px rgba(15, 23, 42, .06);

  /* Type */
  --font-main: "Overpass", ui-sans-serif, system-ui, sans-serif;

  /* Back-compat: style.css references --lightcolor / --darkcolor
     everywhere but never defined them (pre-existing bug — they were
     always empty). Point them at the tokens above so every legacy
     page immediately gets real colors instead of none. */
  --lightcolor: var(--brand);
  --darkcolor: var(--brand-dark);
}

/* ==========================================================================
   DARK THEME — toggled via <html data-theme="dark">, see the themeToggle
   handler in view.php's html_feet(). Overriding just the base tokens here
   is enough: --lightcolor/--darkcolor and every Tailwind color utility
   (bg-brand, text-text-muted, ...) reference these by var(), so they pick
   up the new values live wherever this attribute is set — no per-component
   dark rules needed for anything already built on tokens.
   ========================================================================== */
:root[data-theme="dark"] {
  --brand: #38bdf8;
  --brand-dark: #0ea5e9;
  --brand-soft: rgba(56, 185, 248, 0.16);

  --surface: #111827;
  --surface-muted: #1c2534;
  --border: #2d3748;

  --text: #e5e7eb;
  --text-muted: #94a3b8;

  --shadow-card: 0 1px 2px rgba(0, 0, 0, .5), 0 8px 24px rgba(0, 0, 0, .45);
}

:root[data-theme="dark"] body {
  background: var(--surface-muted);
  color: var(--text);
}