/* ============================================================
   TOKENS DE DISEÑO — San Cristobal Group Admin UI
   ============================================================
   Todos los valores de diseño centralizados como custom properties.
   NO escribir valores hardcodeados en componentes ni páginas.
   ============================================================ */

:root {
  /* ----------------------------------------------------------
     1. Paleta de colores
     ---------------------------------------------------------- */
  --color-white: #ffffff;
  --color-black: #000000;

  /* Grises */
  --gray-50: #f5f5f7;
  --gray-100: #e8e8ed;
  --gray-200: #d2d2d7;
  --gray-300: #86868b;
  --gray-400: #6e6e73;
  --gray-500: #424245;
  --gray-600: #1d1d1f;

  /* Acentos */
  --blue-500: #0071e3;
  --blue-600: #0077ed;
  --blue-100: #e8f4fd;

  /* Semánticos */
  --green-500: #34c759;
  --green-100: #e5f9ea;
  --orange-500: #ff9500;
  --orange-100: #fff3e0;
  --red-500: #ff3b30;
  --red-100: #ffe8e6;
  --cyan-500: #5ac8fa;
  --cyan-100: #e6f7fe;
  --purple-500: #af52de;
  --purple-100: #f5e8fc;

  /* Modo claro (default) */
  --bg-primary: var(--color-white);
  --bg-secondary: var(--gray-50);
  --bg-tertiary: var(--gray-100);
  --bg-elevated: var(--color-white);

  --text-primary: var(--gray-600);
  --text-secondary: var(--gray-400);
  --text-tertiary: var(--gray-300);
  --text-inverse: var(--color-white);

  --accent: var(--blue-500);
  --accent-hover: var(--blue-600);
  --accent-soft: var(--blue-100);

  --border-color: var(--gray-200);
  --border-strong: var(--gray-300);

  --success: var(--green-500);
  --success-soft: var(--green-100);
  --warning: var(--orange-500);
  --warning-soft: var(--orange-100);
  --danger: var(--red-500);
  --danger-soft: var(--red-100);
  --info: var(--cyan-500);
  --info-soft: var(--cyan-100);

  /* ----------------------------------------------------------
     2. Tipografía
     ---------------------------------------------------------- */
  --font-sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "SF Mono", SFMono-Regular, ui-monospace, Menlo, Monaco,
    "Cascadia Mono", monospace;

  --text-xs: 0.6875rem;
  --text-sm: 0.8125rem;
  --text-base: 0.9375rem;
  --text-lg: 1.0625rem;
  --text-xl: 1.1875rem;
  --text-2xl: 1.375rem;
  --text-3xl: 1.75rem;
  --text-4xl: 2.125rem;

  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;

  --leading-tight: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;

  /* ----------------------------------------------------------
     3. Espaciado
     ---------------------------------------------------------- */
  --space-1: 0.2rem;
  --space-2: 0.375rem;
  --space-3: 0.625rem;
  --space-4: 0.875rem;
  --space-5: 1.125rem;
  --space-6: 1.375rem;
  --space-7: 1.625rem;
  --space-8: 1.875rem;
  --space-10: 2.25rem;
  --space-12: 2.75rem;
  --space-16: 3.5rem;

  /* ----------------------------------------------------------
     4. Bordes y radios
     ---------------------------------------------------------- */
  --radius-sm: 0.375rem;
  --radius-md: 0.5625rem;
  --radius-lg: 0.8125rem;
  --radius-xl: 1.125rem;
  --radius-full: 9999px;

  /* ----------------------------------------------------------
     5. Sombras
     ---------------------------------------------------------- */
  --shadow-color: 0 0% 0%;
  --shadow-sm: 0 1px 2px hsl(var(--shadow-color) / 0.04);
  --shadow-md: 0 4px 12px hsl(var(--shadow-color) / 0.08);
  --shadow-lg: 0 12px 32px hsl(var(--shadow-color) / 0.12);
  --shadow-inset: inset 0 0 0 1px var(--border-color);

  /* ----------------------------------------------------------
     6. Transiciones
     ---------------------------------------------------------- */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 350ms ease;

  /* ----------------------------------------------------------
     7. Layout y breakpoints
     ---------------------------------------------------------- */
  --header-height: 2.75rem;
  --dock-height: 3.75rem;
  --sidebar-width: 15rem;
  --container-max: 1360px;

  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;

  /* Z-index scale */
  --z-base: 0;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-header: 300;
  --z-modal: 400;
  --z-toast: 500;
}

@media (max-width: 767px) { :root { --header-height: 3.25rem; } }

/* ============================================================
   MODO OSCURO
   ============================================================ */
html.dark,
.dark {
  --bg-primary: #000000;
  --bg-secondary: #1c1c1e;
  --bg-tertiary: #2c2c2e;
  --bg-elevated: #1c1c1e;

  --text-primary: #f5f5f7;
  --text-secondary: #a1a1a6;
  --text-tertiary: #636366;
  /* Texto sobre superficies de color (botones, dock y cabeceras). Debe
     conservar contraste alto también en modo oscuro. */
  --text-inverse: var(--color-white);

  --border-color: #38383a;
  --border-strong: #48484a;

  /* Semánticos de alto contraste para superficies oscuras. */
  --success: #5dde7d;
  --success-soft: color-mix(in srgb, var(--success) 16%, transparent);
  --warning: #ffd24a;
  --warning-soft: color-mix(in srgb, var(--warning) 16%, transparent);
  --danger: #ff6961;
  --danger-soft: color-mix(in srgb, var(--danger) 16%, transparent);
  --info: #64d2ff;
  --info-soft: color-mix(in srgb, var(--info) 16%, transparent);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5);
  --shadow-inset: inset 0 0 0 1px var(--border-color);
}