/* ==========================================================================
   CleanTrak design tokens
   Derivado del design-system A11Y PRO (misma estructura), con paleta de
   semaforo de 5 estados propia. Modo oscuro nativo para turnos nocturnos.
   ========================================================================== */

:root {
  /* Semaforo de 5 estados (documento tecnico 1.1) */
  --status-untracked: #2B6CB0;
  --status-idle: #718096;
  --status-progress: #DD6B20;
  --status-approved: #2F855A;
  --status-emergency: #C53030;

  --status-untracked-bg: rgba(43, 108, 176, 0.12);
  --status-idle-bg: rgba(113, 128, 150, 0.12);
  --status-progress-bg: rgba(221, 107, 32, 0.12);
  --status-approved-bg: rgba(47, 133, 90, 0.12);
  --status-emergency-bg: rgba(197, 48, 48, 0.12);

  /* Marca CleanTrak */
  --primary: #0d7c71;
  --primary-hover: #0a645c;
  --primary-light: #e0f2f0;

  /* Neutrales (mismos primitivos del ecosistema) */
  --color-white: #ffffff;
  --color-black: #121214;
  --gray-100: #f1f3f5;
  --gray-200: #e9ecef;
  --gray-300: #dee2e6;
  --gray-400: #ced4da;
  --gray-500: #adb5bd;
  --gray-600: #4b5563;
  --gray-800: #343a40;
  --white: var(--color-white);
  --dark: var(--color-black);

  /* Semanticos */
  --color-bg: var(--white);
  --color-bg-surface: var(--gray-100);
  --color-text: var(--gray-800);
  --color-text-muted: var(--gray-600);
  --color-border: var(--gray-300);
  --color-primary: var(--primary);
  --color-primary-hover: var(--primary-hover);
  --color-focus: var(--primary);

  /* Tipografia + espaciado */
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --font-size-base: 1rem;
  --line-height-base: 1.6;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.1);
  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --focus-outline: 3px solid var(--color-focus);
}

[data-theme="dark"] {
  --primary: #2dd4bf;
  --primary-hover: #14b8a6;
  --primary-light: #134e4a;

  --color-bg: #0f172a;
  --color-bg-surface: #1e293b;
  --color-text: #e2e8f0;
  --color-text-muted: #94a3b8;
  --color-border: #334155;
  --color-focus: #2dd4bf;

  --status-untracked-bg: rgba(96, 165, 250, 0.15);
  --status-idle-bg: rgba(148, 163, 184, 0.15);
  --status-progress-bg: rgba(251, 146, 60, 0.15);
  --status-approved-bg: rgba(74, 222, 128, 0.15);
  --status-emergency-bg: rgba(248, 113, 113, 0.15);

  --status-untracked: #60a5fa;
  --status-idle: #94a3b8;
  --status-progress: #fb923c;
  --status-approved: #4ade80;
  --status-emergency: #f87171;
}

@media (forced-colors: active) {
  :root {
    --color-bg: Canvas;
    --color-bg-surface: Canvas;
    --color-text: CanvasText;
    --color-text-muted: CanvasText;
    --color-border: ButtonBorder;
    --color-primary: LinkText;
    --color-primary-hover: LinkText;
    --color-focus: Highlight;
    --shadow-sm: none;
    --shadow-md: none;
    --shadow-lg: none;
  }
}