/* ══════════════════════════════════════════════════════════════════
   APP.OSCORP.INK · TOKENS DEL PANEL
   ------------------------------------------------------------------
   Esto NO reemplaza brand.css — lo extiende. brand.css sigue siendo la
   única fuente de verdad para --accent / --acc / --bg / --ink / los
   estados de pedido, etc. Este archivo solo agrega lo que un panel de
   escritorio denso en datos necesita y brand.css (pensado para la web
   de cliente final) no define: escala tipográfica de UI, espaciado,
   radios, sombras, layout de sidebar/topbar y superficies extra.

   Orden de carga en cada página: brand.css primero, tokens.css después.
   ══════════════════════════════════════════════════════════════════ */

:root {
  /* ─── Tipografía — escala de HERRAMIENTA, no de landing ───
     La web pública usa tamaños grandes y pesos 800 para vender.
     Aquí el texto es información: se lee mucho, se escanea rápido,
     así que la escala es más chica y más plana. */
  --fs-display:  26px;  /* título de página ("Productos") */
  --fs-h2:       16px;  /* encabezado de sección / título de card */
  --fs-body:     14px;  /* texto de tabla, inputs, cuerpo general */
  --fs-small:    13px;  /* metadatos, ayudas, texto secundario */
  --fs-micro:    11px;  /* labels de columna, badges, timestamps */

  --lh-tight:  1.15;
  --lh-normal: 1.5;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;

  /* ─── Espaciado — base 4px ───
     Generoso a propósito (Apple/Revolut respiran). Úsalo siempre en
     vez de números sueltos: mantiene el ritmo vertical consistente
     entre secciones construidas en momentos distintos. */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-7:  32px;
  --sp-8:  40px;
  --sp-9:  48px;
  --sp-10: 64px;

  /* ─── Radios ─── */
  --r-sm:   8px;   /* checkboxes, chips chicos */
  --r-md:   10px;  /* inputs, botones, filas de sidebar */
  --r-lg:   14px;  /* cards, celdas de foto en tabla */
  --r-xl:   20px;  /* modales, paneles grandes */
  --r-full: 999px; /* pills, avatares, badges de estado */

  /* ─── Sombras — casi planas en reposo ───
     Nada de sombras "flotando" por defecto: eso es lo primero que
     delata un admin genérico. La elevación real solo aparece en
     overlays (modal, dropdown, toast) y en hover de elementos que
     de verdad son accionables. */
  --shadow-sm:    0 1px 2px rgba(24, 24, 27, 0.04);
  --shadow-md:    0 8px 24px -8px rgba(24, 24, 27, 0.12);
  --shadow-lg:    0 24px 48px -16px rgba(24, 24, 27, 0.28);
  --shadow-focus: 0 0 0 3px color-mix(in srgb, var(--acc) 35%, transparent);

  /* ─── Layout ─── */
  --sidebar-w:    256px;
  --sidebar-w-sm: 76px;   /* sidebar colapsada, solo íconos */
  --topbar-h:     64px;
  --content-pad:  40px;
  --content-max:  1440px;

  /* ─── Superficies extra (más "tool", menos "marketing") ───
     brand.css solo define --bg y --surface (blanco). Un panel denso
     necesita un escalón intermedio para inputs/celdas dentro de
     cards, y estados de hover/selección sobre filas de tabla. */
  --surface-sunken: #ECEBE6;
  --surface-hover:  rgba(24, 24, 27, 0.035);
  --surface-active: color-mix(in srgb, var(--acc) 14%, var(--surface));

  --border:        var(--hairline);
  --border-strong: rgba(24, 24, 27, 0.16);

  /* ─── z-index — una sola escala, para no volver a adivinar ─── */
  --z-sidebar:  100;
  --z-topbar:   90;
  --z-dropdown: 200;
  --z-modal:    300;
  --z-toast:    400;
}