/* ==========================================================================
   Designtokens
   Färger, radier, skuggor och typsnitt för ljust och mörkt tema. Egen fil så att
   inloggningssidan (som inte laddar bundle.css) använder samma värden som appen.
   ========================================================================== */

/* --- Tokens: ljust tema ------------------------------------------------- */

:root {
  --font-sans:
    "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;

  --bg: #f3f4f8;
  --text: #0f172a;
  --text-muted: #5b6b80;
  --text-subtle: #94a3b8;

  --surface: rgba(255, 255, 255, 0.78);
  --surface-solid: #ffffff;
  --surface-sunken: rgba(241, 245, 249, 0.9);
  --line: rgba(15, 23, 42, 0.08);
  --line-strong: rgba(15, 23, 42, 0.14);

  --primary: #db2777;
  --primary-hover: #be185d;
  --primary-glow: rgba(219, 39, 119, 0.1);
  --accent-soft: rgba(219, 39, 119, 0.1);
  --accent-ring: rgba(219, 39, 119, 0.22);
  --accent-gradient: linear-gradient(135deg, #ec4899, #db2777 60%, #be185d);

  --success: #059669;
  --success-soft: rgba(5, 150, 105, 0.12);
  --danger: #dc2626;
  --danger-soft: rgba(220, 38, 38, 0.1);
  --info: #0369a1;
  --info-soft: rgba(14, 165, 233, 0.12);
  --violet: #6d28d9;
  --violet-soft: rgba(139, 92, 246, 0.13);

  --radius-lg: 22px;
  --radius-md: 14px;
  --radius-sm: 10px;

  --shadow-card:
    0 1px 2px rgba(15, 23, 42, 0.04), 0 12px 32px -12px rgba(15, 23, 42, 0.12);
  --shadow-raised:
    0 1px 2px rgba(15, 23, 42, 0.05), 0 18px 40px -16px rgba(15, 23, 42, 0.2);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --spot-color: rgba(219, 39, 119, 0.09);
  --chart-band: rgba(219, 39, 119, 0.06);

  /* Äldre variabelnamn som resten av CSS:en använder */
  --card-bg: var(--surface);
  --border: var(--line-strong);
  --shadow: var(--shadow-card);
}

/* --- Tokens: mörkt tema -------------------------------------------------- */

html[data-theme="dark"],
html[data-theme="dark"] body {
  --bg: #050814;
  --text: #f1f5f9;
  --text-muted: #94a3b8;
  --text-subtle: #64748b;

  --surface: rgba(15, 23, 42, 0.72);
  --surface-solid: #0f172a;
  --surface-sunken: rgba(2, 6, 23, 0.55);
  --line: rgba(148, 163, 184, 0.12);
  --line-strong: rgba(148, 163, 184, 0.22);

  --primary-glow: rgba(236, 72, 153, 0.16);
  --spot-color: rgba(236, 72, 153, 0.14);
  --chart-band: rgba(236, 72, 153, 0.11);
  --accent-soft: rgba(236, 72, 153, 0.16);
  --accent-ring: rgba(236, 72, 153, 0.32);

  --success: #34d399;
  --success-soft: rgba(52, 211, 153, 0.14);
  --danger: #f87171;
  --danger-soft: rgba(248, 113, 113, 0.14);
  --info: #7dd3fc;
  --info-soft: rgba(56, 189, 248, 0.14);
  --violet: #c4b5fd;
  --violet-soft: rgba(167, 139, 250, 0.16);

  --shadow-card:
    0 1px 2px rgba(0, 0, 0, 0.3), 0 16px 40px -16px rgba(0, 0, 0, 0.6);
  --shadow-raised:
    0 1px 2px rgba(0, 0, 0, 0.35), 0 22px 48px -18px rgba(0, 0, 0, 0.7);

  --card-bg: var(--surface);
  --border: var(--line-strong);
  --shadow: var(--shadow-card);
}