/* ============================================
   DESIGN TOKENS — Intranet San Ramón
   Fuente: ui-preview/index.html (Design System)
   ============================================ */

:root {
  /* Brand */
  --brand-900: #023059;
  --brand-700: #044a8a;
  --brand-500: #0660b5;
  --brand-300: #5a9fd4;
  --brand-100: #d0e4f5;
  --accent-500: #F2B705;
  --accent-400: #F2A20C;
  --accent-300: #F2CA7E;
  --neutral-100: #F2F2F2;

  /* Semantic */
  --success: #16a34a;
  --warning: #f59e0b;
  --danger: #dc2626;
  --info: #0284c7;

  /* Sizing */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-full: 999px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.06);
  --shadow-md: 0 4px 12px rgba(0,0,0,.08);
  --shadow-lg: 0 8px 32px rgba(0,0,0,.12);
  --sidebar-w: 260px;
  --topbar-h: 56px;
  --transition: .2s ease;
}

/* Light */
[data-theme="light"] {
  --bg: #ffffff;
  --bg-surface: #f8f9fa;
  --bg-elevated: #ffffff;
  --bg-sidebar: var(--brand-900);
  --text: #1a1a2e;
  --text-secondary: #5a5a72;
  --muted: #8e8ea0;
  --border: #e2e2e8;
  --input-bg: #ffffff;
  --table-stripe: #f8f9fb;
  --overlay: rgba(0,0,0,.45);
  --code-bg: #f3f4f6;
  --sidebar-text: #ffffffcc;
  --sidebar-text-active: #ffffff;
  --sidebar-hover: rgba(255,255,255,.08);
  --sidebar-active: rgba(255,255,255,.14);
  --switch-track: #d1d5db;
}

/* Dark */
[data-theme="dark"] {
  --bg: #0f1117;
  --bg-surface: #1a1b26;
  --bg-elevated: #21222e;
  --bg-sidebar: #0c0d14;
  --text: #e4e4e8;
  --text-secondary: #a0a0b2;
  --muted: #6e6e82;
  --border: #2e2e3e;
  --input-bg: #1a1b26;
  --table-stripe: #16171f;
  --overlay: rgba(0,0,0,.7);
  --code-bg: #1a1b26;
  --sidebar-text: #a0a0b2;
  --sidebar-text-active: #ffffff;
  --sidebar-hover: rgba(255,255,255,.05);
  --sidebar-active: rgba(255,255,255,.1);
  --switch-track: #3f3f50;
}

/* ============================================
   RESET & BASE
   ============================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 15px; }
body {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-weight: 400;
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  transition: background var(--transition), color var(--transition);
}