/* Tokens de diseño — FASE98A Design System Foundation
   Conserva aliases legacy (Etapa A / Fase H).
   --bg-sidebar permanece #0d0f12 (inmutable) */
:root,
[data-theme="light"] {
  /* ——— Superficies (legacy) ——— */
  --bg-app: #f3f5f7;
  --bg-page: #f3f5f7;
  --bg-sidebar: #0d0f12;
  --bg-card: #ffffff;
  --bg-elevated: #ffffff;
  --bg-input: #f0f2f5;
  --bg-hover: rgba(13, 15, 18, 0.045);

  /* ——— Texto (legacy) ——— */
  --text-primary: #12151a;
  --text-main: #12151a;
  --text: #12151a;
  --text-muted: #5f6b7a;
  --text-secondary: #5f6b7a;
  --text-inverse: #ffffff;
  --text-on-sidebar: #9ca3af;
  --text-label: #6b7280;
  --text-aux: #8b95a5;

  /* ——— Acentos marca ed-Nova ——— */
  --accent-lime: #b8f000;
  --accent-blue: #1d75ff;
  --accent-blue-hover: #1563e0;
  --accent-blue-active: #0f52c4;
  --accent-blue-soft: rgba(29, 117, 255, 0.12);
  --accent-success: #16a34a;
  --accent-danger: #ef4444;
  --accent-warning: #f59e0b;
  --accent-info: #1d75ff;

  /* ——— Bordes y sombras ——— */
  --border-subtle: rgba(13, 15, 18, 0.07);
  --border-strong: rgba(13, 15, 18, 0.14);
  --border: rgba(13, 15, 18, 0.07);
  --border-light: rgba(13, 15, 18, 0.07);
  --shadow-sm: 0 1px 2px rgba(13, 15, 18, 0.04), 0 1px 3px rgba(13, 15, 18, 0.03);
  --shadow-md: 0 2px 8px rgba(13, 15, 18, 0.06), 0 1px 2px rgba(13, 15, 18, 0.04);
  --shadow-lg: 0 8px 28px rgba(13, 15, 18, 0.09), 0 2px 6px rgba(13, 15, 18, 0.04);

  /* ——— Radios ——— */
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  /* ——— Tipografía ——— */
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-base: 15px;
  --fs-md: 16px;
  --fs-lg: 18px;
  --fs-xl: 22px;
  --fs-2xl: 28px;
  --lh-tight: 1.25;
  --lh-base: 1.5;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* ——— Espaciado oficial ——— */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;

  /* ——— Controles / botones ——— */
  --control-height: 44px;
  --control-height-sm: 36px;
  --btn-height: 44px;
  --btn-height-sm: 36px;
  --table-row-height: 48px;

  /* ——— Shell ——— */
  --sidebar-width: 72px;
  --sidebar-width-expanded: 228px;
  --topbar-height: 64px;

  /* ——— Movimiento ——— */
  --transition-theme: 0.25s ease;
  --transition-fast: 0.15s ease;
  --transition-ui: 0.2s ease;

  --focus-ring: 0 0 0 3px rgba(29, 117, 255, 0.28);

  /* ——— Status soft backgrounds ——— */
  --success-bg: rgba(22, 163, 74, 0.12);
  --warning-bg: rgba(245, 158, 11, 0.14);
  --danger-bg: rgba(239, 68, 68, 0.12);
  --info-bg: rgba(29, 117, 255, 0.12);

  /* ============================================================
     FASE98A — Tokens semánticos (fuente de verdad para components)
     ============================================================ */
  --color-primary: var(--accent-blue);
  --color-primary-hover: var(--accent-blue-hover);
  --color-primary-active: var(--accent-blue-active);
  --color-primary-soft: var(--accent-blue-soft);

  --color-accent: var(--accent-lime);

  --color-bg: var(--bg-app);
  --color-surface: var(--bg-card);
  --color-surface-subtle: var(--bg-input);
  --color-surface-elevated: var(--bg-elevated);

  --color-border: var(--border-subtle);
  --color-border-strong: var(--border-strong);

  --color-text: var(--text-primary);
  --color-text-muted: var(--text-muted);
  --color-text-subtle: var(--text-aux);
  --color-text-inverse: var(--text-inverse);
  --color-text-label: var(--text-label);

  --color-success: var(--accent-success);
  --color-success-bg: var(--success-bg);

  --color-warning: var(--accent-warning);
  --color-warning-bg: var(--warning-bg);

  --color-danger: var(--accent-danger);
  --color-danger-bg: var(--danger-bg);

  --color-info: var(--accent-info);
  --color-info-bg: var(--info-bg);

  --color-focus: var(--accent-blue);
  --color-focus-ring: var(--focus-ring);

  /* Z-index scale (foundation) */
  --z-modal: 200;
  --z-toast: 9999;
  --z-confirm: 10050;
  --z-calendar: 1300;
  --z-modal-over-calendar: 1400;
}

[data-theme="dark"] {
  --bg-app: #0e1016;
  --bg-page: #0e1016;
  --bg-sidebar: #0d0f12;
  --bg-card: #171a22;
  --bg-elevated: #1e222c;
  --bg-input: #1a1e27;
  --bg-hover: rgba(255, 255, 255, 0.055);

  --text-primary: #eef1f5;
  --text-main: #eef1f5;
  --text: #eef1f5;
  --text-muted: #8b95a5;
  --text-secondary: #8b95a5;
  --text-inverse: #0d0f12;
  --text-on-sidebar: #9ca3af;
  --text-label: #9aa3b2;
  --text-aux: #7a8494;

  --accent-blue-hover: #3b8aff;
  --accent-blue-active: #5a9cff;
  --accent-blue-soft: rgba(29, 117, 255, 0.18);
  --accent-success: #22c55e;

  --border-subtle: rgba(255, 255, 255, 0.07);
  --border-strong: rgba(255, 255, 255, 0.13);
  --border: rgba(255, 255, 255, 0.07);
  --border-light: rgba(255, 255, 255, 0.07);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.22);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.28);
  --shadow-lg: 0 10px 32px rgba(0, 0, 0, 0.38);

  --focus-ring: 0 0 0 3px rgba(29, 117, 255, 0.4);

  --success-bg: rgba(34, 197, 94, 0.16);
  --warning-bg: rgba(245, 158, 11, 0.18);
  --danger-bg: rgba(239, 68, 68, 0.16);
  --info-bg: rgba(29, 117, 255, 0.18);

  /* Semánticos re-resuelven vía aliases legacy arriba */
  --color-primary-hover: var(--accent-blue-hover);
  --color-primary-active: var(--accent-blue-active);
  --color-primary-soft: var(--accent-blue-soft);
  --color-success: var(--accent-success);
  --color-success-bg: var(--success-bg);
  --color-warning-bg: var(--warning-bg);
  --color-danger-bg: var(--danger-bg);
  --color-info-bg: var(--info-bg);
  --color-focus-ring: var(--focus-ring);
}