/*
 * Scope design tokens — sistema neutro estilo Vercel/Geist.
 * Escala de grises + un acento (negro/blanco), azul para links/foco y
 * colores semánticos. Los nombres antiguos (--theme-*, --sandos-*) quedan
 * como alias al final para no romper estilos existentes.
 */
:root {
  color-scheme: light;

  /* Superficies */
  --background-100: #ffffff;
  --background-200: #fafafa;

  /* Escala de grises (100 = más suave, 1000 = texto principal) */
  --gray-100: #f2f2f2;
  --gray-200: #ebebeb;
  --gray-300: #e6e6e6;
  --gray-400: #eaeaea;
  --gray-500: #c9c9c9;
  --gray-600: #a8a8a8;
  --gray-700: #8f8f8f;
  --gray-800: #7d7d7d;
  --gray-900: #666666;
  --gray-1000: #171717;
  --gray-alpha-100: rgba(0, 0, 0, 0.05);
  --gray-alpha-200: rgba(0, 0, 0, 0.08);

  --border: #eaeaea;
  --border-strong: #d4d4d4;
  --text: #171717;
  --text-muted: #666666;
  --text-subtle: #8f8f8f;

  /* Acento único: negro en claro / blanco en oscuro */
  --accent: #171717;
  --accent-hover: #383838;
  --accent-fg: #ffffff;

  /* Azul: links y foco */
  --blue-bg: #f0f7ff;
  --blue-border: #cce3ff;
  --blue-fg: #0060df;
  --blue-solid: #0070f3;
  --link: #0070f3;
  --link-hover: #0060df;

  /* Semánticos */
  --green-bg: #ecfdf3;
  --green-border: #b7ebc9;
  --green-fg: #107d32;
  --green-solid: #16a34a;
  --amber-bg: #fff8eb;
  --amber-border: #ffe0a3;
  --amber-fg: #a35200;
  --amber-solid: #f5a524;
  --red-bg: #fff0f0;
  --red-border: #ffd1d1;
  --red-fg: #cb2a2f;
  --red-solid: #e5484d;
  --purple-bg: #f9f1fe;
  --purple-border: #e9d4fb;
  --purple-fg: #7820bc;
  --purple-solid: #8e4ec6;

  --success-bg: var(--green-bg);
  --success-border: var(--green-border);
  --success-fg: var(--green-fg);
  --success: var(--green-solid);
  --warning-bg: var(--amber-bg);
  --warning-border: var(--amber-border);
  --warning-fg: var(--amber-fg);
  --warning: var(--amber-solid);
  --danger-bg: var(--red-bg);
  --danger-border: var(--red-border);
  --danger-fg: var(--red-fg);
  --danger: var(--red-solid);
  --info-bg: var(--blue-bg);
  --info-border: var(--blue-border);
  --info-fg: var(--blue-fg);
  --info: var(--blue-solid);

  /* Tipografía */
  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --text-xs: 12px;
  --text-sm: 13px;
  --text-base: 14px;
  --text-md: 16px;
  --text-lg: 18px;
  --text-xl: 24px;
  --text-2xl: 32px;
  --leading-tight: 1.25;
  --leading-normal: 1.5;

  /* Espaciado (múltiplos de 4px) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  /* Radios */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 9999px;

  /* Sombras sutiles */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.12);

  /* Foco */
  --focus-ring: 0 0 0 1px var(--background-100), 0 0 0 3px rgba(0, 112, 243, 0.45);

  --overlay: rgba(0, 0, 0, 0.4);
  --transition-fast: 150ms ease;
}

html[data-theme="dark"] {
  color-scheme: dark;

  --background-100: #0a0a0a;
  --background-200: #111111;

  --gray-100: #1a1a1a;
  --gray-200: #1f1f1f;
  --gray-300: #292929;
  --gray-400: #333333;
  --gray-500: #454545;
  --gray-600: #5e5e5e;
  --gray-700: #8f8f8f;
  --gray-800: #7d7d7d;
  --gray-900: #a1a1a1;
  --gray-1000: #ededed;
  --gray-alpha-100: rgba(255, 255, 255, 0.06);
  --gray-alpha-200: rgba(255, 255, 255, 0.09);

  --border: #333333;
  --border-strong: #454545;
  --text: #ededed;
  --text-muted: #a1a1a1;
  --text-subtle: #8f8f8f;

  --accent: #ededed;
  --accent-hover: #cccccc;
  --accent-fg: #0a0a0a;

  --blue-bg: #0a1a2f;
  --blue-border: #0f3058;
  --blue-fg: #52a8ff;
  --blue-solid: #0070f3;
  --link: #52a8ff;
  --link-hover: #7dbcff;

  --green-bg: #0b2116;
  --green-border: #11402a;
  --green-fg: #4ade80;
  --green-solid: #16a34a;
  --amber-bg: #2a1c05;
  --amber-border: #4a3208;
  --amber-fg: #f5b544;
  --amber-solid: #f5a524;
  --red-bg: #2a0e0f;
  --red-border: #521a1c;
  --red-fg: #ff6166;
  --red-solid: #e5484d;
  --purple-bg: #1f1029;
  --purple-border: #3d1f52;
  --purple-fg: #bf7af0;
  --purple-solid: #8e4ec6;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.6);
  --focus-ring: 0 0 0 1px var(--background-100), 0 0 0 3px rgba(82, 168, 255, 0.55);
  --overlay: rgba(0, 0, 0, 0.7);
}

/* ---------- Alias de compatibilidad (nombres antiguos → tokens nuevos) ---------- */
:root {
  --sandos-accent: var(--accent);
  --sandos-accent-hover: var(--accent-hover);
  --sandos-accent-dark: var(--accent);
  --sandos-accent-darker: var(--accent);
  --sandos-accent-soft: var(--gray-100);
  --sandos-accent-muted: var(--gray-200);
  --sandos-accent-border: var(--border);
  --sandos-accent-border-strong: var(--border-strong);
  --sandos-ink: var(--gray-1000);
  --sandos-ink-logo: var(--gray-1000);
  --sandos-shadow-accent: rgba(0, 0, 0, 0.12);
  --sandos-shadow-accent-soft: rgba(0, 0, 0, 0.06);

  --theme-accent: var(--accent);
  --theme-bg: var(--background-200);
  --theme-border: var(--border);
  --theme-link: var(--link);
  --theme-link-hover: var(--link-hover);

  --theme-rail-bg: var(--background-100);
  --theme-rail-icon: var(--gray-900);
  --theme-rail-icon-hover-bg: var(--gray-alpha-100);
  --theme-rail-icon-hover: var(--gray-1000);
  --theme-rail-icon-active-bg: var(--gray-alpha-200);
  --theme-rail-icon-active: var(--gray-1000);

  --theme-topbar-bg: var(--background-100);
  --theme-topbar-bg-start: var(--background-100);
  --theme-topbar-bg-end: var(--background-100);
  --theme-topbar-pattern: none;
  --theme-topbar-border: var(--border);
  --theme-topbar-text: var(--text);
  --theme-topbar-muted: var(--text-muted);
  --theme-topbar-hover: var(--gray-alpha-100);
  --theme-profile-ring: var(--border-strong);
  --theme-nav-icon-bg: var(--gray-100);
  --theme-nav-icon-color: var(--gray-1000);
  --theme-nav-icon-active-bg: var(--gray-200);
  --theme-nav-icon-active-color: var(--gray-1000);

  --theme-body-bg: var(--background-200);
  --theme-body-text: var(--text);
  --theme-sidebar-bg: var(--background-100);
  --theme-sidebar-border: var(--border);
  --theme-sidebar-shadow: none;
  --theme-sidebar-heading: var(--text-muted);
  --theme-nav: var(--gray-900);
  --theme-nav-hover-bg: var(--gray-alpha-100);
  --theme-nav-hover-text: var(--text);
  --theme-topnav-active-color: var(--text);
  --theme-nav-active-bg: var(--gray-alpha-200);
  --theme-nav-active-text: var(--text);
  --theme-flyout-bg: var(--background-100);
  --theme-flyout-border: var(--border);
  --theme-flyout-shadow: var(--shadow-lg);
  --theme-flyout-title: var(--text);
  --theme-flyout-link: var(--text-muted);
  --theme-flyout-link-hover-bg: var(--gray-alpha-100);
  --theme-flyout-link-hover-text: var(--text);
  --theme-flyout-link-active: var(--text);
  --theme-card-bg: var(--background-100);
  --theme-card-bg-alt: var(--background-200);
  --theme-card-border: var(--border);
  --theme-card-shadow: rgba(0, 0, 0, 0.04);
  --theme-heading: var(--text);
  --theme-muted: var(--text-muted);
  --theme-subtle: var(--gray-900);
  --theme-input-bg: var(--background-100);
  --theme-input-border: var(--border);
  --theme-input-text: var(--text);
  --theme-table-head-bg: var(--background-200);
  --theme-table-head-text: var(--text-muted);
  --theme-table-cell-text: var(--text);
  --theme-table-row-border: var(--border);
  --theme-table-head-border: var(--border);
  --theme-table-wrap-border: var(--border);
  --theme-table-row-hover-bg: var(--background-200);
  --theme-table-stripe-bg: transparent;
  --theme-user-email: var(--text-muted);
  --theme-logout-border: var(--border);
  --theme-logout-text: var(--text);
  --theme-logout-hover-bg: var(--gray-alpha-100);
  --theme-modal-title: var(--text);
  --theme-modal-subtitle: var(--text-muted);
  --theme-summary-bg: var(--background-200);
  --theme-summary-border: var(--border);
  --theme-summary-label: var(--text-muted);
  --theme-summary-value: var(--text);
  --theme-modal-backdrop: var(--overlay);
  --theme-ghost-bg: var(--background-100);
  --theme-ghost-hover-bg: var(--gray-alpha-100);
  --theme-pill-inactive-bg: var(--background-100);
  --theme-pill-inactive-border: var(--border);
  --theme-pill-inactive-text: var(--text-muted);
  --theme-toggle-bg: var(--background-100);
  --theme-toggle-border: var(--border);
  --theme-toggle-text: var(--text);
  --theme-modal-products-border: var(--border);
  --theme-modal-product-row-border: var(--border);
  --theme-modal-product-head-bg: var(--background-200);
  --theme-modal-product-head-text: var(--text-muted);
  --theme-modal-no-products-bg: var(--background-100);
  --theme-loading-overlay: color-mix(in srgb, var(--background-100) 85%, transparent);
  --theme-spinner-track: var(--gray-300);
  --theme-btn-primary: var(--accent);
  --theme-btn-primary-border: var(--accent);
  --theme-btn-primary-hover: var(--accent-hover);
  --theme-radius: var(--radius-md);
  --theme-radius-lg: var(--radius-lg);
  --theme-font: var(--font-sans);
}

/* Base global */
html {
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
}

table,
.tabular-nums {
  font-variant-numeric: tabular-nums;
}

code,
kbd,
pre,
samp,
.font-mono {
  font-family: var(--font-mono);
}

a {
  color: var(--link);
}

:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

::selection {
  background: var(--blue-border);
}