/* MS&P Industriales — tokens del sistema de diseno.
   Generado desde styles.css + tokens/*.css. Editar alli, no aqui. */

@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=IBM+Plex+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&family=IBM+Plex+Mono:wght@400;500;600&family=Oswald:wght@500;600;700&display=swap");

/* ===== fonts.css ===== */
/* MS&P usa las tres familias desde Google Fonts (las mismas que la guia de marca
   y la app de cotizaciones cargan en produccion). No hay binarios propios. */

/* ===== colors.css ===== */
:root{
  /* ---- Base de marca (Guia de Marca v1) ---- */
  --navy:#0A2A56;
  --navy-deep:#061B39;
  --navy-mid:#0E3468;
  --steel:#1E5FA8;
  --amber:#D98A2B;
  --amber-hi:#F2A93B;
  --amber-light:#F0AD5C;
  --amber-text:#A65E12;
  --graphite:#2B2E33;
  --paper:#F7F6F3;
  --paper-2:#EFEDE6;
  --paper-3:#D9D5CC;
  --line:#DEDAD1;
  --line-warm:#DCD6C8;
  --line-dark:rgba(255,255,255,.14);
  --ink-soft:#5B5F66;
  --ink-faint:#8A8D92;
  --white:#FFFFFF;
  --onamber:#1A1002;
  --oncolor:#F7F6F3;

  /* ---- Semanticos ---- */
  --danger:#C23636;
  --danger-bg:rgba(194,54,54,.08);
  --success:#2F9E5B;
  --success-bg:rgba(47,158,91,.15);
  --highlight-bg:rgba(217,138,43,.08);

  /* ---- Alias de superficie / texto ---- */
  --surface:#FFFFFF;
  --surface-page:var(--paper);
  --surface-sunken:var(--paper-2);
  --surface-input:#FAFAF8;
  --surface-hover:#FFF6EA;
  --surface-inverse:var(--navy-deep);
  --surface-nav:var(--navy);

  --text-heading:var(--navy);
  --text-body:var(--graphite);
  --text-muted:var(--ink-soft);
  --text-faint:var(--ink-faint);
  --text-accent:var(--amber-text);
  --text-inverse:var(--paper);
  --text-inverse-muted:#A9C0DE;
  --text-inverse-faint:#7E9BC4;

  --border-default:var(--line);
  --border-strong:var(--navy);
  --border-accent:var(--amber);
  --border-inverse:var(--line-dark);

  --accent:var(--amber);
  --accent-hover:var(--amber-hi);
  --focus-ring:rgba(217,138,43,.18);
}
/* Tema oscuro de la app de cotizaciones (data-theme="dark") */
[data-theme="dark"]{
  --bg:#071A33;
  --surface:#0C2547;
  --surface-page:#071A33;
  --surface-input:#081B36;
  --surface-hover:#0D2A4E;
  --surface-nav:#051426;
  --line:#1C3A63;
  --border-default:#1C3A63;
  --graphite:#EDEFF3;
  --steel:#8FA6C4;
  --text-body:#EDEFF3;
  --text-muted:#8FA6C4;
  --accent:#E8A93E;
  --text-accent:#E8A93E;
  --danger:#E38080;
  --danger-bg:rgba(200,80,80,.18);
  --success:#6FCB8E;
  --highlight-bg:rgba(217,138,43,.12);
}

/* ===== typography.css ===== */
:root{
  /* Familias */
  --font-display:'Space Grotesk',system-ui,sans-serif;   /* titulos, cifras, logotipo */
  --font-sans:'IBM Plex Sans',system-ui,sans-serif;      /* cuerpo */
  --font-mono:'IBM Plex Mono',ui-monospace,monospace;    /* datos, eyebrows, refs */
  --font-app-display:'Oswald',system-ui,sans-serif;      /* solo app de cotizaciones */

  /* Pesos */
  --fw-regular:400; /* @kind font */
  --fw-medium:500; /* @kind font */
  --fw-semibold:600; /* @kind font */
  --fw-bold:700; /* @kind font */

  /* Escala editorial (portafolio / web) */
  --text-hero:58px;
  --text-display:42px;
  --text-h1:34px;
  --text-h2:26px;
  --text-h3:19px;
  --text-h4:15px;
  --text-lead:17px;
  --text-body-lg:16.5px;
  --text-body:15px;
  --text-sm:13px;
  --text-xs:11px;

  /* Cifra-ancla: el numero grande ambar */
  --text-hero-num:96px;
  --text-hero-num-sm:64px;

  /* Interlineado */
  --lh-tight:1.04; /* @kind font */
  --lh-heading:1.2; /* @kind font */
  --lh-snug:1.4; /* @kind font */
  --lh-body:1.6; /* @kind font */
  --lh-relaxed:1.65; /* @kind font */

  /* Tracking */
  --ls-hero:-.035em; /* @kind font */
  --ls-heading:-.02em; /* @kind font */
  --ls-normal:0; /* @kind font */
  --ls-mono:.16em; /* @kind font */      /* eyebrows / labels mono en mayusculas */
  --ls-mono-wide:.24em; /* @kind font */
  --ls-tagline:6px; /* @kind font */     /* "INDUSTRIALES" del logotipo */
}

/* ===== spacing.css ===== */
:root{
  --space-0:0;
  --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-28:110px;   /* respiro vertical de seccion en la web */

  --container:1140px;
  --container-app:1152px;   /* max-w-6xl de la app */
  --container-text:640px;
  --gutter:32px;

  /* Papel A4 del portafolio */
  --sheet-w:210mm; /* @kind spacing */
  --sheet-h:297mm; /* @kind spacing */
  --sheet-pad-x:18mm;
  --sheet-pad-top:20mm;
  --sheet-pad-bottom:21mm;
}

/* ===== effects.css ===== */
:root{
  /* Radios: la marca es casi recta. 2px en impresos, 3-6px en pantalla. */
  --radius-none:0;
  --radius-print:2px;
  --radius-xs:1px;
  --radius-sm:3px;
  --radius-md:6px;
  --radius-pill:999px;

  /* Bordes */
  --border-hair:1px;
  --border-rule:2px;      /* filete superior de tarjeta / regla de titulo */
  --border-slab:3px;      /* regla ambar bajo los titulos */

  /* Sombras: minimas. Solo elevacion de dialogo y foco ambar. */
  --shadow-none:none;
  --shadow-sheet:0 1px 3px rgba(0,0,0,.18);
  --shadow-card:0 1px 2px rgba(10,42,86,.05);
  --shadow-pop:0 8px 24px rgba(10,42,86,.14);
  --shadow-amber:0 4px 14px rgba(217,138,43,.35);
  --ring-focus:0 0 0 3px rgba(217,138,43,.18);

  /* Movimiento: fades y desplazamientos cortos, nada de rebotes. */
  --ease-out:cubic-bezier(.2,.6,.3,1); /* @kind other */
  --dur-fast:.2s; /* @kind other */
  --dur-base:.3s; /* @kind other */
  --dur-reveal:.7s; /* @kind other */
  --reveal-shift:24px;

  /* Engranaje como recurso grafico a sangre */
  --gear-opacity-light:.075; /* @kind other */
  --gear-opacity-dark:.16; /* @kind other */
}