/* ==========================================================================
   4Safe Dashboard — Design Tokens
   ⚙ THE FILE TO EDIT FOR REBRANDING. Change these custom properties to
   restyle the whole app: colors, radii, shadows. Light theme is the
   default (:root); dark theme overrides live under [data-theme="dark"].
   ========================================================================== */

:root {
  /* brand */
  --color-primary: #0d9488;
  --color-primary-dark: #0b7d73;
  --color-primary-light: #e6f7f5;
  --color-accent: #2563eb;

  /* surfaces */
  --color-bg: #f3f6f8;
  --color-bg-soft: #eef2f5;
  --color-sidebar-bg: #ffffff;
  --color-topbar-bg: #ffffffe6;
  --color-surface: #ffffff;
  --color-surface-alt: #f7f9fb;

  /* borders */
  --color-border: #e4e9ee;
  --color-border-strong: #d3dbe3;

  /* text */
  --text-primary: #101b28;
  --text-secondary: #57677a;
  --text-muted: #8a97a6;

  /* status */
  --color-success: #16a34a;
  --color-success-bg: #e9f8ee;
  --color-warning: #d97706;
  --color-warning-bg: #fef3e2;
  --color-danger: #dc2626;
  --color-danger-bg: #fdedec;
  --color-info-bg: #eaf2fe;

  /* elevation */
  --shadow: 0 12px 32px -10px rgba(16, 24, 32, 0.08);
  --shadow-lg: 0 30px 60px -15px rgba(0, 0, 0, 0.33);

  /* shape */
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 16px;
  --radius-pill: 20px;

  /* type */
  --font-sans: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* layout */
  --sidebar-width: 258px;
  --sidebar-width-collapsed: 76px;
  --topbar-height: 68px;
}

[data-theme="dark"] {
  --color-primary: #14b8a6;
  --color-primary-dark: #0d9488;
  --color-primary-light: #1c2f3f;
  --color-accent: #38bdf8;

  --color-bg: #0a1420;
  --color-bg-soft: #0d1a29;
  --color-sidebar-bg: #0b1725;
  --color-topbar-bg: #0d1a29e6;
  --color-surface: #111f30;
  --color-surface-alt: #0f1c2c;

  --color-border: #1e3145;
  --color-border-strong: #2a4361;

  --text-primary: #eef4f9;
  --text-secondary: #9db2c7;
  --text-muted: #5f7891;

  --color-success: #34d399;
  --color-success-bg: #0d2b24;
  --color-warning: #fbbf24;
  --color-warning-bg: #2e2410;
  --color-danger: #f87171;
  --color-danger-bg: #301418;
  --color-info-bg: #132538;

  --shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.44);
}