/* =========================================================================
   Design tokens — Control de Piso TH
   Identidad: negro / blanco / escala de grises.
   El color se reserva exclusivamente para semántica (éxito, advertencia,
   error, información). No se usan acentos decorativos.
   ========================================================================= */

:root {
  /* ----------------------------- Escala de grises ------------------------ */
  --gray-0:   #ffffff;   /* superficie / blanco */
  --gray-50:  #fafafa;   /* superficie sutil */
  --gray-100: #f4f5f7;   /* fondo de página */
  --gray-200: #e9eaee;   /* borde sutil */
  --gray-300: #d9dbe0;   /* borde */
  --gray-400: #b6bac2;   /* deshabilitado / placeholder */
  --gray-500: #8a8f98;   /* texto atenuado */
  --gray-600: #6c717a;   /* texto atenuado fuerte */
  --gray-700: #4a4e55;   /* texto secundario */
  --gray-800: #2b2e33;   /* encabezados */
  --gray-900: #16171b;   /* casi negro (marca) */
  --gray-950: #000000;   /* negro profundo */

  /* ------------------------------- Semántica ----------------------------- */
  --success:        #1a7f4a;
  --success-bg:     #e9f6ef;
  --success-border: #b7e0c8;
  --warning:        #9a6700;
  --warning-bg:     #fbf3e0;
  --warning-border: #ecd9a8;
  --danger:         #b42318;
  --danger-bg:      #fdecec;
  --danger-border:  #f3c6c0;
  --info:           #0f5b7c;
  --info-bg:        #eaf4fb;
  --info-border:    #c9e2f2;

  /* -------------------------------- Texto -------------------------------- */
  --text:        var(--gray-800);
  --text-muted:  var(--gray-500);
  --text-faint:  var(--gray-400);

  /* ------------------------------ Superficies ---------------------------- */
  --bg:              var(--gray-100);
  --surface:         var(--gray-0);
  --surface-subtle:  var(--gray-50);
  --border:          var(--gray-300);
  --border-strong:   var(--gray-400);

  /* ---------------------------- Escala de espacio ------------------------ */
  --space-1: 0.25rem;   /*  4px */
  --space-2: 0.5rem;    /*  8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.5rem;    /* 24px */
  --space-6: 2rem;      /* 32px */
  --space-7: 3rem;      /* 48px */

  /* ------------------------------ Escala de tipo ------------------------- */
  --text-xs:   0.75rem;
  --text-sm:   0.8125rem;
  --text-base: 0.875rem;
  --text-md:   1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.375rem;
  --text-2xl:  1.625rem;

  --font-sans: "Inter", "Segoe UI", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Code",
               "Segoe UI Mono", Menlo, Consolas, monospace;

  /* -------------------------------- Radios ------------------------------- */
  --radius-sm:  4px;
  --radius-md:  20px;
  --radius-lg:  8px;
  --radius-pill: 999px;

  /* ------------------------------- Sombras ------------------------------- */
  /* Sombras sutiles y restringidas: solo donde aportan separación real. */
  --shadow-sm: 0 1px 2px rgba(22, 23, 27, 0.06);
  --shadow-md: 0 4px 12px rgba(22, 23, 27, 0.10);
  --shadow-lg: 0 12px 28px rgba(22, 23, 27, 0.18);

  /* ------------------------------- Controles ----------------------------- */
  --control-height: 38px;
  --control-pad-x:  0.625rem;
  --control-radius: var(--radius-md);

  /* -------------------------------- Sidebar ------------------------------ */
  --sidebar-width: 248px;

  /* ------------------------------- Z-index ------------------------------- */
  --z-sidebar: 30;
  --z-overlay: 20;
  --z-toggle:  40;
  --z-modal:   1050;
  --z-toast:   1080;

  /* ------------------------------ Breakpoints ---------------------------- */
  --bp-tablet: 1024px;
  --bp-narrow: 720px;
}