/* static/css/tokens.css - Design Tokens + Modo Claro/Oscuro */

:root {
  /* === Colores fijos (no cambian con el tema) === */
  --color-primary: #d4940a;
  --color-primary-hover: #b87d08;
  --color-primary-light: rgba(212, 148, 10, 0.1);
  --color-success: #2d8a4e;
  --color-danger: #c0392b;
  --color-warning: #d4940a;
  --color-info: #2980b9;

  /* === Colores de tema: MODO CLARO (default) === */
  --color-body-bg: #f5f5f0;
  --color-surface: #ffffff;
  --color-surface-raised: #ffffff;
  --color-border: #e8e5df;
  --color-text: #2d2a26;
  --color-text-muted: #8a8580;
  --color-sidebar-bg: #1a1d23;
  --color-sidebar-text: rgba(255, 255, 255, 0.8);
  --color-sidebar-hover: rgba(255, 255, 255, 0.08);
  --color-sidebar-active: rgba(212, 148, 10, 0.15);
  --color-navbar-bg: #ffffff;
  --color-navbar-border: #e8e5df;
  --color-card-shadow: rgba(0, 0, 0, 0.08);
  --color-table-hover: rgba(212, 148, 10, 0.05);
  --color-input-bg: #ffffff;
  --color-input-border: #d1cdc7;

  /* === Tipografia === */
  --font-family: 'DM Sans', system-ui, -apple-system, sans-serif;

  /* === Layout === */
  --sidebar-width: 260px;
  --navbar-height: 64px;

  /* === Radii === */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;

  /* === Shadows === */
  --shadow-sm: 0 1px 3px var(--color-card-shadow);
  --shadow-md: 0 2px 8px var(--color-card-shadow);
  --shadow-lg: 0 4px 16px var(--color-card-shadow);

  /* === Transitions === */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-theme: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* === MODO OSCURO via data-theme === */
[data-theme="dark"] {
  --color-body-bg: #121417;
  --color-surface: #1e2128;
  --color-surface-raised: #262a33;
  --color-border: #2e323b;
  --color-text: #e4e2de;
  --color-text-muted: #8a8a8f;
  --color-sidebar-bg: #0d0f12;
  --color-navbar-bg: #1e2128;
  --color-navbar-border: #2e323b;
  --color-card-shadow: rgba(0, 0, 0, 0.3);
  --color-table-hover: rgba(212, 148, 10, 0.08);
  --color-input-bg: #262a33;
  --color-input-border: #3a3f4a;
  color-scheme: dark;

  /* Override Bootstrap root variables for dark mode */
  --bs-body-bg: #121417;
  --bs-body-color: #e4e2de;
  --bs-border-color: #2e323b;
  --bs-emphasis-color: #e4e2de;
  --bs-secondary-bg: #262a33;
  --bs-secondary-color: #8a8a8f;
  --bs-tertiary-bg: #1e2128;
  --bs-tertiary-color: #8a8a8f;
  --bs-light-rgb: 38, 42, 51;
  --bs-dark-rgb: 228, 226, 222;
}

/* === Respetar preferencia del SO si no hay seleccion manual === */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-body-bg: #121417;
    --color-surface: #1e2128;
    --color-surface-raised: #262a33;
    --color-border: #2e323b;
    --color-text: #e4e2de;
    --color-text-muted: #8a8a8f;
    --color-sidebar-bg: #0d0f12;
    --color-navbar-bg: #1e2128;
    --color-navbar-border: #2e323b;
    --color-card-shadow: rgba(0, 0, 0, 0.3);
    --color-table-hover: rgba(212, 148, 10, 0.08);
    --color-input-bg: #262a33;
    --color-input-border: #3a3f4a;
    color-scheme: dark;

    /* Override Bootstrap root variables */
    --bs-body-bg: #121417;
    --bs-body-color: #e4e2de;
    --bs-border-color: #2e323b;
    --bs-emphasis-color: #e4e2de;
    --bs-secondary-bg: #262a33;
    --bs-secondary-color: #8a8a8f;
    --bs-tertiary-bg: #1e2128;
    --bs-tertiary-color: #8a8a8f;
    --bs-light-rgb: 38, 42, 51;
    --bs-dark-rgb: 228, 226, 222;
  }
}