/* ==========================================================================
   INV-2026 · Design tokens
   Derivados de la identidad de Innovasport (docs/marca/identidad-innovasport.md).
   Regla del sistema: ningun componente usa un color literal. Todo pasa por aqui.
   Para habilitar otra ensena del grupo basta sobrescribir --brand y --sidebar-bg.
   ========================================================================== */

:root {
  /* --- Marca (origen: variables CSS del sitio de Innovasport) ------------ */
  --brand:            #E21736;
  --brand-hover:      #C2122D;
  --brand-soft:       #FDE8EC;
  --row-selected:     #FEF7F8;
  --brand-light:      #FF4747;

  /* --- Superficies ------------------------------------------------------ */
  --bg:               #F4F5F7;
  --surface:          #FFFFFF;
  --surface-raised:   #FAFAFB;
  --surface-sunken:   #EEF0F3;
  --border:           #E4E6EA;
  --border-strong:    #D2D6DC;

  /* --- Texto ------------------------------------------------------------ */
  --text:             #14161A;
  --text-muted:       #646B76;
  --text-faint:       #949BA5;
  --text-on-brand:    #FFFFFF;

  /* --- Sidebar ---------------------------------------------------------- */
  --sidebar-bg:       #16100F;
  --sidebar-text:     #E8E4E3;
  --sidebar-muted:    #9A9290;
  --sidebar-hover:    rgba(255,255,255,.07);
  --sidebar-scroll:   rgba(255,255,255,.14);
  --sidebar-pill:     rgba(255,255,255,.12);
  --sidebar-pill-on:  rgba(0,0,0,.22);
  --sidebar-active:   var(--brand);
  --sidebar-border:   rgba(255,255,255,.09);

  /* --- Estado (deliberadamente separados del rojo de marca) ------------- */
  --info:             #2563EB;  --info-soft:    #E8EFFD;
  --success:          #0E9F6E;  --success-soft: #E3F5EE;
  --warning:          #D97706;  --warning-soft: #FDF0DC;
  --danger:           #B42318;  --danger-soft:  #FCE9E7;
  --neutral:          #6B7280;  --neutral-soft: #EFF1F4;
  --purple:           #7C3AED;  --purple-soft:  #F1E9FE;

  /* --- Series de datos ---------------------------------------------------
     Paleta validada con el verificador de daltonismo contra ESTAS superficies
     (#FFFFFF claro, #181B1F oscuro), no contra las de un ejemplo.
     El rojo de marca no aparece aquí: los datos no compiten con la acción. */
  --serie-1: #2a78d6;   /* azul     */
  --serie-2: #eb6834;   /* naranja  */
  --serie-3: #1baf7a;   /* aqua     */
  --viz-rejilla:  #E8EAEE;
  --viz-eje:      #8A9099;
  --viz-tip-bg:   #14161A;
  --viz-tip-ink:  #FFFFFF;

  /* --- Forma y profundidad ---------------------------------------------- */
  --r-sm: 6px;  --r-md: 8px;  --r-lg: 12px;  --r-full: 999px;
  --shadow-sm: 0 1px 2px rgba(16,18,22,.06);
  --shadow-md: 0 4px 12px rgba(16,18,22,.10);
  --shadow-lg: 0 12px 32px rgba(16,18,22,.16);
  --ring: 0 0 0 2px var(--surface), 0 0 0 4px var(--brand);
  --backdrop: rgba(10,12,15,.42);
  --lienzo-foto: #FFFFFF;          /* fondo de la foto de producto: no se tematiza */
  --switch-perilla: #FFFFFF;
  --sombra-barra: 0 -4px 16px rgb(0 0 0 / 6%);

  /* --- Tipografia (Inter es la familia corporativa) --------------------- */
  --ff: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --fs-display: 28px; --lh-display: 34px;
  --fs-h1: 20px;      --lh-h1: 28px;
  --fs-h2: 16px;      --lh-h2: 24px;
  --fs-body: 14px;    --lh-body: 21px;
  --fs-sm: 13px;      --lh-sm: 18px;
  --fs-xs: 12px;      --lh-xs: 16px;
  --fs-label: 11px;   --lh-label: 14px;

  /* --- Espaciado (escala de 4) ------------------------------------------ */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px;
  --s6: 24px; --s8: 32px; --s10: 40px; --s12: 48px;

  --sidebar-w: 252px;
  --topbar-h: 60px;
  --transition: 160ms cubic-bezier(.4,0,.2,1);
}

[data-theme="dark"] {
  --brand:            #F0344F;
  --brand-hover:      #FF4747;
  --brand-soft:       #2E1116;
  --row-selected:     #1F1417;

  --bg:               #0F1113;
  --surface:          #181B1F;
  --surface-raised:   #1E2228;
  --surface-sunken:   #121417;
  --border:           #2A2F36;
  --border-strong:    #3A4048;

  --text:             #ECEDEE;
  --text-muted:       #9BA3AE;
  --text-faint:       #6E757E;

  --sidebar-bg:       #0E0B0B;
  --sidebar-text:     #E8E4E3;
  --sidebar-muted:    #8B8482;
  --backdrop:         rgba(0,0,0,.62);
  --sombra-barra:     0 -4px 16px rgb(0 0 0 / 45%);

  /* Mismos ocho tonos, escalonados para la superficie oscura */
  --serie-1: #3987e5;
  --serie-2: #d95926;
  --serie-3: #199e70;
  --viz-rejilla:  #262B32;
  --viz-eje:      #7C848E;
  --viz-tip-bg:   #2A2F36;
  --viz-tip-ink:  #FFFFFF;

  --info:    #60A5FA; --info-soft:    #16243B;
  --success: #34D399; --success-soft: #0F2A22;
  --warning: #FBBF24; --warning-soft: #2E2210;
  --danger:  #F87171; --danger-soft:  #2E1615;
  --neutral: #9BA3AE; --neutral-soft: #23272D;
  --purple:  #A78BFA; --purple-soft:  #221A38;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow-md: 0 4px 12px rgba(0,0,0,.45);
  --shadow-lg: 0 12px 32px rgba(0,0,0,.55);
  --ring: 0 0 0 2px var(--surface), 0 0 0 4px var(--brand);
}