/* ============================================================
   Autovalv — Design tokens
   Identidad tomada del logo: NEGRO/grafito + ROJO escarlata (OCSA®).
   Nota: por historia, la escala oscura conserva el nombre --navy-*
   (hoy es grafito/carbón) y la de acento el nombre --amber-* (hoy rojo).
   Sobrio, técnico, denso en información. Sin defaults de plantilla.
   ============================================================ */

:root {
  /* --- Escala grafito / carbón (marca oscura) --- */
  --navy-950: #101216;
  --navy-900: #171a1f;
  --navy-800: #1f232a;
  --navy-700: #2b303a;
  --navy-600: #3b414d;
  --navy-500: #4e5561;
  --navy-400: #6e7581;
  --navy-300: #9aa0aa;
  --navy-200: #c4c8ce;
  --navy-100: #e3e5e9;
  --navy-50:  #f3f4f6;

  /* --- Escala rojo escarlata (acento, del logo) ---
     El canvas del rediseño especifica oklch(55% 0.19 32) = #C8331A. Se
     mantiene --amber-500 (#dc2013) porque es el rojo muestreado del logo
     real y lo comparte el panel admin; la diferencia es imperceptible.
     Los rojos oscuros del diseño mapean casi exactos a la escala:
       #9A210C (links)      → --amber-700 #9e160b
       #860000 (link hover) → --amber-800 #7d130a */
  --amber-800: #7d130a;
  --amber-700: #9e160b;
  --amber-600: #bf1a0d;
  --amber-500: #dc2013;
  --amber-400: #e8493a;
  --amber-300: #f18b7f;
  --amber-100: #fbdbd6;
  --amber-50:  #fdf1ef;

  /* --- Neutros fríos (slate) --- */
  --slate-950: #0c1116;
  --slate-900: #141b22;
  --slate-800: #232e38;
  --slate-700: #37444f;
  --slate-600: #4e5c68;
  --slate-500: #697682;
  --slate-400: #8b98a3;
  --slate-300: #b2bcc4;
  --slate-200: #d3dae0;
  --slate-150: #e2e7eb;
  --slate-100: #edf0f2;
  --slate-50:  #f6f8f9;
  --white: #ffffff;

  /* --- Estado --- */
  --green-600: #1f7a4d;
  --green-100: #d8f0e2;
  --red-600:   #c23b34;
  --red-100:   #fadedc;
  --yellow-600:#a8790d;
  --yellow-100:#fbeecb;
  --blue-600:  #2b6b9e;
  --blue-100:  #dcebf5;

  /* --- Semánticos --- */
  --color-bg:          var(--slate-50);
  --color-surface:     var(--white);
  --color-surface-2:   var(--slate-50);
  --color-surface-sunken: var(--slate-100);
  --color-border:      var(--slate-200);
  --color-border-strong: var(--slate-300);
  --color-text:        var(--slate-900);
  --color-text-muted:  var(--slate-600);
  --color-text-subtle: var(--slate-500);
  --color-text-invert: var(--slate-50);

  --brand:        var(--navy-800);
  --brand-strong: var(--navy-900);
  --brand-deep:   var(--navy-950);
  --accent:       var(--amber-500);
  --accent-hover: var(--amber-600);
  --accent-text:  #ffffff;

  --focus-ring: 0 0 0 3px rgba(78, 85, 97, 0.28);

  /* --- Escala neutra fría del rediseño (hue 250) --------------
     Valores exactos del canvas de Claude Design, convertidos de
     oklch() a hex. Es más fría y más oscura en el extremo alto que
     --slate-*, que se conserva intacta porque la usa el panel admin. */
  --ink-950: #0A0E11;   /* fondo del footer */
  --ink-900: #0E1216;   /* texto principal, títulos */
  --ink-850: #13161A;   /* fondos oscuros, familia activa */
  --ink-800: #1E2226;   /* texto de inputs */
  --ink-700: #2A2E33;   /* links de navegación */
  --ink-600: #373B40;
  --ink-550: #44484D;
  --ink-500: #494E52;   /* cuerpo de texto */
  --ink-450: #51565B;
  --ink-400: #5F6469;   /* breadcrumbs, texto atenuado */
  --ink-350: #7C8186;   /* texto atenuado sobre oscuro */
  --ink-300: #A9AFB4;   /* texto del footer */
  --ink-250: #BBBEC1;   /* borde de inputs */
  --ink-200: #CBCED1;
  --ink-175: #D5D8DB;
  --ink-150: #DBDEE1;   /* borde principal */
  --ink-125: #E5E8EB;
  --ink-100: #ECEFF1;
  --ink-50:  #F4F5F6;   /* superficie alternativa */

  /* Azul acero del buscador y los íconos de diferenciales */
  --steel-700: #222F3C;
  --steel-600: #333C45;
  --steel-500: #44576B;

  /* --- Tipografía --- */
  --font-sans: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Archivo", "Inter", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", "JetBrains Mono", "Cascadia Code", Consolas, ui-monospace, monospace;

  --fs-2xs: 0.6875rem;   /* 11px — etiquetas técnicas */
  --fs-xs:  0.75rem;     /* 12px */
  --fs-sm:  0.8125rem;   /* 13px */
  --fs-base:0.9375rem;   /* 15px — cuerpo */
  --fs-md:  1.0625rem;   /* 17px */
  --fs-lg:  1.25rem;     /* 20px */
  --fs-xl:  1.5rem;      /* 24px */
  --fs-2xl: 1.9375rem;   /* 31px */
  --fs-3xl: 2.5rem;      /* 40px */
  --fs-4xl: 3.125rem;    /* 50px */

  --lh-tight: 1.15;
  --lh-snug:  1.3;
  --lh-normal:1.55;

  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --tracking-wide: 0.04em;
  --tracking-wider: 0.09em;  /* eyebrows / etiquetas mayúsculas */

  /* --- Espaciado (base 4px) --- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;

  /* --- Radios (crisp, industrial) --- */
  --radius-xs: 2px;
  --radius-sm: 3px;
  --radius:    5px;
  --radius-lg: 8px;
  --radius-full: 999px;

  /* --- Sombras (tinte frío) --- */
  --shadow-xs: 0 1px 2px rgba(16, 18, 22, 0.06);
  --shadow-sm: 0 1px 3px rgba(16, 18, 22, 0.09), 0 1px 2px rgba(16, 18, 22, 0.05);
  --shadow:    0 2px 6px rgba(16, 18, 22, 0.10), 0 1px 2px rgba(16, 18, 22, 0.06);
  --shadow-md: 0 6px 16px rgba(16, 18, 22, 0.11), 0 2px 4px rgba(16, 18, 22, 0.06);
  --shadow-lg: 0 14px 34px rgba(16, 18, 22, 0.16);

  /* --- Layout --- */
  --container: 1240px;        /* ancho del rediseño */
  --container-narrow: 820px;
  --header-h: 84px;           /* alto del header del rediseño */
  --gutter: 48px;             /* padding lateral en desktop */

  /* --- Transiciones --- */
  --t-fast: 120ms ease;
  --t:      180ms ease;
  --t-slow: 280ms ease;

  /* --- z-index --- */
  --z-header: 100;
  --z-drawer: 200;
  --z-overlay: 300;
  --z-toast: 400;
}