/* =============================================================
   Tokens · Buscador Rápido de Repuestos (Cumandes Potencia)
   Fuente: Guides/Context/04-Design_system.md
   Bloque "Cumandes Potencia / BRRO": tokens nuevos del prototipo.
   Bloque "Legacy aliases": mantiene los nombres del cotizador viejo
   para no romper Login y otros componentes legacy hasta su rewrite.
   ============================================================= */

:root {
  /* ---------- Cumandes Potencia · Identidad ---------- */
  --cum-red:        #DA291C;
  --cum-red-600:    #B71F14;
  --cum-red-100:    #FBE4E2;
  --cum-black:      #000000;
  --cum-gray:       #808080;

  /* ---------- Acentos por unidad ---------- */
  --pot-accent:     #F19021;   /* Potencia (warning / "sobre medida") */
  --ene-primary:    #00997F;   /* Energía verde (success) */
  --ene-green:      #00997F;
  --ene-blue:       #1244C0;   /* Energía azul (Labroides / info) */
  --ene-teal:       #28C5B0;   /* Energía teal (subsistema cooling) */

  /* ---------- Escala de neutros (Cumandes) ---------- */
  --n-0:    #FFFFFF;
  --n-50:   #F7F7F7;
  --n-100:  #EFEFEF;
  --n-200:  #DEDEDE;
  --n-300:  #C4C4C4;
  --n-400:  #A1A1A1;
  --n-500:  #808080;
  --n-700:  #3D3D3D;
  --n-1000: #000000;

  /* ---------- Tokens semánticos ---------- */
  --fg-1:          var(--n-1000);
  --fg-2:          var(--n-700);
  --fg-3:          var(--n-500);

  --bg-1:          var(--n-0);
  --bg-2:          var(--n-50);
  --bg-3:          var(--n-100);

  --border-subtle: var(--n-200);
  --border-strong: var(--n-300);

  --accent:        var(--cum-red);
  --accent-hover:  var(--cum-red-600);
  --accent-soft:   var(--cum-red-100);

  --success:       var(--ene-primary);
  --warning:       var(--pot-accent);
  --info:          var(--ene-blue);
  --danger:        var(--cum-red);

  /* ---------- Tipografía ---------- */
  --font-display:  'Helvetica Neue LT Std', 'Helvetica Neue', Inter, Helvetica, Arial, sans-serif;
  --font-body:     'Helvetica Neue LT Std', 'Helvetica Neue', Inter, Helvetica, Arial, sans-serif;
  --font-mono:     ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --w-light:   300;
  --w-roman:   400;
  --w-bold:    700;
  --w-heavy:   800;
  --w-black:   900;

  /* ---------- Tamaños de texto ---------- */
  --fs-display-xl: 72px;
  --fs-display-l:  56px;
  --fs-display-m:  44px;
  --fs-h1:         36px;
  --fs-h2:         28px;
  --fs-h3:         22px;
  --fs-h4:         18px;
  --fs-body:       16px;
  --fs-body-sm:    14px;
  --fs-caption:    12px;
  --fs-overline:   11px;

  --tracking-display:  -0.02em;
  --tracking-heading:  -0.01em;
  --tracking-body:     0;
  --tracking-overline: 0.16em;

  /* ---------- Espaciado (escala 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;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ---------- Radios ---------- */
  --radius-0:    0;
  --radius-1:    2px;
  --radius-2:    4px;
  --radius-3:    8px;
  --radius-pill: 999px;

  /* ---------- Sombras ---------- */
  --shadow-1:     0 1px 2px rgba(0,0,0,0.10), 0 1px 1px rgba(0,0,0,0.06);
  --shadow-2:     0 2px 4px rgba(0,0,0,0.14), 0 3px 6px rgba(0,0,0,0.06);
  --shadow-3:     0 4px 8px rgba(0,0,0,0.20), 0 6px 12px rgba(0,0,0,0.08);
  --shadow-4:     0 8px 16px rgba(0,0,0,0.26), 0 12px 24px rgba(0,0,0,0.10);
  --shadow-focus: 0 0 0 3px rgba(218,41,28,0.25);

  /* ---------- Motion ---------- */
  --ease-out:    cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:    120ms;
  --dur-base:    180ms;
  --dur-slow:    280ms;

  /* ---------- Sidebar ---------- */
  --sb-w-collapsed: 70px;
  --sb-w-expanded:  280px;
  --sb-gradient: radial-gradient(120% 70% at 50% 0%, #E8362A 0%, #DA291C 32%, #A41E12 78%, #6E150B 100%);

  /* =============================================================
     Legacy aliases · usados por componentes del cotizador viejo
     (Login, StatusBadge, LoadingStatus). Mientras esos sigan vivos
     necesitamos los nombres antiguos. Cuando se reescriban en Fases
     posteriores, este bloque se puede borrar.
     ============================================================= */
  --red:        var(--cum-red);
  --red-700:    #B82418;
  --red-800:    #9E1F14;
  --red-100:    #F8D7D3;
  --red-50:     #FBEEEC;

  --brand-black: var(--cum-black);
  --brand-gray:  var(--cum-gray);

  --ink:    var(--fg-1);
  --gray:   #5A5A5A;
  --gray-2: #7A7A7A;
  --gray-3: #9A9A9A;
  --line:   #E3E3E3;
  --line-2: #CFCFCF;
  --bg:     var(--bg-2);
  --surface: var(--bg-1);

  --ok:     var(--ene-primary);
  --ok-50:  #E6F4EA;
  --warn:   #B8860B;
  --warn-50:#FBF1D8;
  --err:    var(--cum-red);
  --err-50: #FBEEEC;
  --info-50:#E4F0F8;

  --potencia-orange:   var(--pot-accent);
  --potencia-orange-2: var(--pot-accent);

  --guayaba:    #E36868;
  --guayaba-50: #FCEAEA;

  --nav-w:    var(--sb-w-expanded);
  --radius:   10px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.06);
  --shadow:    0 1px 3px rgba(0,0,0,.08), 0 8px 24px rgba(0,0,0,.06);

  --font-base: var(--font-body);
}

/* font-size base por breakpoint vive en wwwroot/scss/app.scss */
html, body {
  font-family: var(--font-body);
  background: var(--bg-2);
  color: var(--fg-1);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

code, pre, kbd { font-family: var(--font-mono); }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); margin: 0; }