/*
 * Design tokens for Cobranzas.
 * Light theme is the base; dark applies via prefers-color-scheme or an explicit data-theme="dark"
 * set by /static/js/theme.js (persisted in localStorage). All colors pass WCAG AA for their pairing:
 * --text / --muted on --bg, --surface and --surface-2; --on-primary on --primary; badge fg on badge bg.
 */
:root {
  color-scheme: light;

  /* Surfaces */
  --bg: #f3f5fa;
  --surface: #ffffff;
  --surface-2: #f6f8fc;
  --surface-3: #eaeef6;
  --border: #dbe1ec;
  --border-strong: #c3ccdc;
  --overlay: rgba(15, 23, 42, 0.45);

  /* Text */
  --text: #0f172a;
  --text-soft: #1e293b;
  --muted: #536079;
  --link: #1d4ed8;

  /* Brand + semantic */
  --primary: #2563eb;
  --primary-hover: #1d4ed8;
  --primary-soft: #e3ecfe;
  --primary-soft-text: #1e40af;
  --on-primary: #ffffff;
  --success: #15803d;
  --success-soft: #dcfce7;
  --success-soft-text: #14532d;
  --warning: #b45309;
  --warning-soft: #fef3c7;
  --warning-soft-text: #78350f;
  --danger: #dc2626;
  --danger-hover: #b91c1c;
  --danger-soft: #fee2e2;
  --danger-soft-text: #7f1d1d;
  --info: #0e7490;
  --info-soft: #cffafe;
  --info-soft-text: #164e63;
  --neutral-soft: #e9edf4;
  --neutral-soft-text: #334155;
  --violet-soft: #ede9fe;
  --violet-soft-text: #4c1d95;
  --whatsapp: #0f7a3f;
  --whatsapp-hover: #0b6634;

  /* Sidebar (dark navy in both themes for a stable brand anchor) */
  --side-bg: #0d1628;
  --side-bg-2: #142039;
  --side-border: #1f2c47;
  --side-text: #c9d3e5;
  --side-muted: #8796b0;
  --side-active-bg: #1d3260;
  --side-active-text: #ffffff;

  /* Focus */
  --focus: #2563eb;
  --focus-ring: 0 0 0 3px rgba(37, 99, 235, 0.35);

  /* Typography */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Consolas, "Liberation Mono", monospace;
  --fs-xs: 0.75rem;
  --fs-sm: 0.8125rem;
  --fs-base: 0.9375rem;
  --fs-md: 1.0625rem;
  --fs-lg: 1.25rem;
  --fs-xl: 1.5rem;
  --fs-2xl: 1.875rem;
  --fs-3xl: 2.25rem;
  --lh-tight: 1.2;
  --lh-base: 1.5;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* Spacing scale (4px base) */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;

  /* Radius */
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow: 0 1px 3px rgba(15, 23, 42, 0.08), 0 4px 12px rgba(15, 23, 42, 0.05);
  --shadow-lg: 0 10px 30px rgba(15, 23, 42, 0.14);

  /* Layout */
  --sidebar-w: 248px;
  --sidebar-w-collapsed: 72px;
  --topbar-h: 60px;
  --content-max: 1440px;

  /* Motion */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur: 160ms;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0a1020;
    --surface: #111a2e;
    --surface-2: #162238;
    --surface-3: #1c2a44;
    --border: #24324f;
    --border-strong: #33446a;
    --overlay: rgba(2, 6, 23, 0.65);
    --text: #e7edf7;
    --text-soft: #d3dcea;
    --muted: #9aa8c0;
    --link: #8db6ff;
    --primary: #2f6fed;
    --primary-hover: #4a83f4;
    --primary-soft: #18294d;
    --primary-soft-text: #b8cfff;
    --on-primary: #ffffff;
    --success: #22c55e;
    --success-soft: #0f2e20;
    --success-soft-text: #86efac;
    --warning: #f59e0b;
    --warning-soft: #33250b;
    --warning-soft-text: #fcd34d;
    --danger: #ef4444;
    --danger-hover: #dc2626;
    --danger-soft: #3a1518;
    --danger-soft-text: #fca5a5;
    --info: #22d3ee;
    --info-soft: #0c2e38;
    --info-soft-text: #a5f3fc;
    --neutral-soft: #1e2a40;
    --neutral-soft-text: #c8d2e3;
    --violet-soft: #261d45;
    --violet-soft-text: #c4b5fd;
    --side-bg: #080e1c;
    --side-bg-2: #0e172b;
    --side-border: #1a2540;
    --focus: #6ea2ff;
    --focus-ring: 0 0 0 3px rgba(110, 162, 255, 0.45);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow: 0 1px 3px rgba(0, 0, 0, 0.45), 0 4px 14px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 12px 34px rgba(0, 0, 0, 0.55);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0a1020;
  --surface: #111a2e;
  --surface-2: #162238;
  --surface-3: #1c2a44;
  --border: #24324f;
  --border-strong: #33446a;
  --overlay: rgba(2, 6, 23, 0.65);
  --text: #e7edf7;
  --text-soft: #d3dcea;
  --muted: #9aa8c0;
  --link: #8db6ff;
  --primary: #2f6fed;
  --primary-hover: #4a83f4;
  --primary-soft: #18294d;
  --primary-soft-text: #b8cfff;
  --on-primary: #ffffff;
  --success: #22c55e;
  --success-soft: #0f2e20;
  --success-soft-text: #86efac;
  --warning: #f59e0b;
  --warning-soft: #33250b;
  --warning-soft-text: #fcd34d;
  --danger: #ef4444;
  --danger-hover: #dc2626;
  --danger-soft: #3a1518;
  --danger-soft-text: #fca5a5;
  --info: #22d3ee;
  --info-soft: #0c2e38;
  --info-soft-text: #a5f3fc;
  --neutral-soft: #1e2a40;
  --neutral-soft-text: #c8d2e3;
  --violet-soft: #261d45;
  --violet-soft-text: #c4b5fd;
  --side-bg: #080e1c;
  --side-bg-2: #0e172b;
  --side-border: #1a2540;
  --focus: #6ea2ff;
  --focus-ring: 0 0 0 3px rgba(110, 162, 255, 0.45);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.45), 0 4px 14px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 12px 34px rgba(0, 0, 0, 0.55);
}