/* ══════════════════════════════════════════════════════════════════
   Capa semántica del Command Center · AUTORADO (este sí se edita)

   Traduce los tokens de marca de Tu RentaSmart a los alias que usa el
   panel interno. Los tokens crudos viven en design/tokens/ y son
   GENERADOS desde Claude Design — no se tocan.

   Regla: ningún archivo del cockpit debe escribir un hex a mano.
   Si falta un alias, se agrega aquí derivándolo de un token de marca.
   ══════════════════════════════════════════════════════════════════ */

@import url('tokens/colors.css');
@import url('tokens/typography.css');
@import url('tokens/spacing.css');
@import url('tokens/effects.css');
@import url('tokens/gradients.css');

:root{
  /* ─── SUPERFICIES ────────────────────────────────────────────────
     El registro oscuro de la marca es ink-navy, no negro neutro.
     Ver README del design system: "dark, ink-navy canvas
     (--ink-950 #070b18 / --ink-900 #0b1226)".

     Para volver al negro neutro que tenía el cockpit antes de
     alinearse, sustituir por:  --bg:#000; --sb:#0a0a0b; --panel:#0e0e10;
  */
  --bg:     var(--ink-950);   /* fondo base            #070b18 */
  --sb:     var(--ink-900);   /* sidebar               #0b1226 */
  --panel:  var(--ink-800);   /* paneles y tarjetas    #111a35 */

  /* ─── CAPAS TRANSLÚCIDAS Y HAIRLINES ─────────────────────────── */
  --s1:    rgba(255,255,255,0.055);
  --s2:    rgba(255,255,255,0.085);
  --s3:    rgba(255,255,255,0.130);
  --hair:  var(--on-ink-border);          /* rgba(255,255,255,.10) */
  --hair2: rgba(255,255,255,0.055);

  /* ─── TEXTO SOBRE OSCURO ─────────────────────────────────────── */
  --fg:  var(--on-ink-primary);           /* #ffffff */
  --fg2: var(--on-ink-secondary);         /* 66% */
  --fg3: var(--on-ink-tertiary);          /* 40% */
  --fg4: rgba(233,238,252,0.26);

  /* ─── COLOR DE MARCA ─────────────────────────────────────────── */
  --blue:   var(--blue-500);              /* #0086ff */
  --blue-s: rgba(0,134,255,0.14);
  --blue-l: rgba(0,134,255,0.34);

  /* ─── SEMÁNTICOS ─────────────────────────────────────────────────
     Alineados al sistema. Antes derivaban: verde #5fd39a, ámbar
     #e0a83c, rojo #e06b6b — ninguno existía en la paleta de marca. */
  --green:   var(--green-400);            /* #33c07d */
  --green-s: rgba(51,192,125,0.12);
  --green-l: rgba(51,192,125,0.28);

  --amber:   var(--amber-500);            /* #d98a1f */
  --amber-s: rgba(217,138,31,0.13);
  --amber-l: rgba(217,138,31,0.30);

  --red:     var(--red-500);              /* #d94141 */
  --red-s:   rgba(217,65,65,0.13);
  --red-l:   rgba(217,65,65,0.30);

  /* ─── TIPOGRAFÍA ─────────────────────────────────────────────── */
  --f:     var(--font-body);              /* Roboto Flex */
  --serif: var(--font-serif);             /* Instrument Serif */
  --mono:  var(--font-mono);

  /* ─── RADIOS ─────────────────────────────────────────────────────
     El panel usaba 24 / 14 px, fuera de la escala de marca.
     Mapeados al paso más cercano del sistema. */
  --rc: var(--radius-2xl);                /* tarjetas · 28px (era 24) */
  --ri: var(--radius-lg);                 /* inputs   · 16px (era 14) */
  --rp: var(--radius-pill);               /* píldoras · 999px */

  /* ─── MOTION ─────────────────────────────────────────────────────
     Antes: 180ms cubic-bezier(.32,.72,0,1) — easing propio.
     Ahora: la duración y el easing del sistema. */
  --t: var(--dur-base) var(--ease-out);   /* 200ms · .22,.61,.36,1 */

  /* ─── LAYOUT DEL PANEL ───────────────────────────────────────────
     Constante de este producto, no del sistema de marca. */
  --sbw: 266px;                           /* ancho del sidebar */
}

/* El sistema exige neutralizar toda animación bajo reduced-motion. */
@media (prefers-reduced-motion: reduce){
  :root{ --t: 1ms linear; }
}