/* ==========================================================================
   DATOCHAI DESIGN TOKENS (single source of truth)
   Dark mode overrides live in body.dark-mode.
   ========================================================================== */

:root {
  /* ---- surfaces ---- */
  --color-surface-primary: #ffffff;     /* cards, header, sidebars */
  --color-surface-secondary: #f9f9f9;   /* page background */
  --color-surface-tertiary: #f5f5f5;    /* input fields, subtle areas */

  /* ---- text ---- */
  --color-text-primary: #111111;
  --color-text-secondary: #666666;
  --color-text-inverse: #ffffff;

  /* ---- borders ---- */
  --color-border-primary: #e0e0e0;
  --color-border-secondary: #eaeaea;

  /* ---- accent ---- */
  --color-accent: #cc0000;
  --color-accent-dark: #990000;
  --color-accent-light: rgba(204, 0, 0, 0.1);

  /* ---- functional ---- */
  --color-success: #4caf50;
  --color-warning: #ff9800;
  --color-error: #f44336;

  /* ---- shadows ---- */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 15px 35px rgba(0, 0, 0, 0.12);
  --shadow-accent: 0 4px 12px rgba(204, 0, 0, 0.2);

  /* ---- radii ---- */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 50%;

  /* ---- transitions ---- */
  --transition-fast: 0.2s ease;
  --transition-smooth: 0.3s ease;
}

/* ==========================================================================
   DARK MODE OVERRIDES
   ========================================================================== */
body.dark-mode {
  --color-surface-primary: #1a1a1a;
  --color-surface-secondary: #121212;
  --color-surface-tertiary: #2a2a2a;

  --color-text-primary: #f0f0f0;
  --color-text-secondary: #aaaaaa;

  --color-border-primary: #333333;
  --color-border-secondary: #2a2a2a;

  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 15px 35px rgba(0, 0, 0, 0.6);
}

/* Base body background – all pages inherit this */
body {
  background-color: var(--color-surface-secondary);
  color: var(--color-text-primary);
  transition: background-color var(--transition-smooth), color var(--transition-smooth);
}