/* ============================================================
   OMNIX DESIGN SYSTEM · Colors & Type
   Cognición Operacional Soberana · Editorial Premium
   v1.0 · Julio 2026
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&family=Nunito:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&family=Source+Serif+4:ital,opsz,wght@0,8..60,300;0,8..60,400;0,8..60,600;1,8..60,400&display=swap');

:root {
  /* ─────────── BRAND CORE ─────────── */
  --omnix-fuxia:        #F4024C;  /* CTA primario, acentos críticos */
  --omnix-black:        #000000;  /* Fondos inmersivos, hero, autoridad */
  --omnix-blue:         #0050BD;  /* Institucional, links, énfasis frío */

  /* ─────────── NEUTRALES (Escala Ink→Mist) ─────────── */
  --omnix-ink:          #1E1F26;  /* Cards sobre negro, superficie elevada */
  --omnix-graphite:     #272832;  /* Botón secundario, bordes fuertes */
  --omnix-slate-800:    #2E3140;
  --omnix-slate-600:    #52557A;  /* Texto secundario sobre claro */
  --omnix-slate-400:    #7A7F95;
  --omnix-slate-300:    #96A3B5;  /* Meta / labels */
  --omnix-slate-200:    #C7CFDA;
  --omnix-mist:         #E4EBF3;  /* Divisorias, fondos suaves */
  --omnix-fog:          #F2F5F9;  /* Fondo neutral warm */
  --omnix-paper:        #FAFBFD;  /* Fondo editorial */
  --omnix-white:        #FFFFFF;

  /* ─────────── EXTENSIONES SOFT (Badges, tints) ─────────── */
  --omnix-fuxia-50:     #FFE5EC;
  --omnix-fuxia-100:    #FFB8C9;
  --omnix-fuxia-700:    #B00238;
  --omnix-blue-50:      #E6EEFB;
  --omnix-blue-100:     #BBD1F3;
  --omnix-blue-700:     #003B8C;

  /* ─────────── SEMÁNTICOS ─────────── */
  --omnix-success:      #0F5132;
  --omnix-success-50:   #E3F2E9;
  --omnix-warning:      #B8860B;
  --omnix-warning-50:   #FBF3D9;
  --omnix-danger:       #EA384C;
  --omnix-danger-50:    #FDE4E7;

  /* ─────────── FG / BG SEMANTIC (light mode default) ─────────── */
  --fg-1:               #000000;   /* Titulares, alta jerarquía */
  --fg-2:               #1E1F26;   /* Body principal */
  --fg-3:               #52557A;   /* Body secundario */
  --fg-4:               #96A3B5;   /* Meta, captions */
  --fg-inverse:         #FFFFFF;   /* Sobre fondos oscuros */
  --fg-accent:          #F4024C;
  --fg-link:            #0050BD;

  --bg-1:               #FFFFFF;   /* Superficie base */
  --bg-2:               #FAFBFD;   /* Superficie sutil */
  --bg-3:               #F2F5F9;   /* Superficie neutral */
  --bg-inverse:         #000000;   /* Hero, secciones inmersivas */
  --bg-elevated-dark:   #1E1F26;   /* Card sobre negro */

  --border-1:           #E4EBF3;   /* Divisoria clara */
  --border-2:           #C7CFDA;   /* Divisoria media */
  --border-strong:      #1E1F26;   /* Editorial rule */
  --border-inverse:     #2E3140;   /* Sobre negro */

  /* ─────────── TIPOGRAFÍA (Font stacks) ─────────── */
  --font-display: 'Montserrat', 'Söhne', 'Inter Display', system-ui, sans-serif;
  --font-body:    'Nunito', 'Inter', system-ui, sans-serif;
  --font-serif:   'Source Serif 4', 'Source Serif Pro', Georgia, serif;
  --font-mono:    'JetBrains Mono', 'Berkeley Mono', ui-monospace, monospace;

  /* ─────────── SCALE (Editorial · 1.25 major third) ─────────── */
  --fs-eyebrow:     11px;   /* uppercase kickers, tracked +2 */
  --fs-caption:     12px;
  --fs-body-sm:     14px;
  --fs-body:        16px;
  --fs-body-lg:     18px;
  --fs-lead:        21px;   /* párrafo introductorio */
  --fs-h5:          20px;
  --fs-h4:          26px;
  --fs-h3:          34px;
  --fs-h2:          46px;
  --fs-h1:          64px;
  --fs-display:     88px;   /* Hero editorial */
  --fs-mega:        120px;  /* Números héroe (600M, -65%) */

  /* Line heights */
  --lh-tight:   1.05;
  --lh-snug:    1.15;
  --lh-normal:  1.4;
  --lh-body:    1.55;
  --lh-loose:   1.75;

  /* Letter spacing */
  --ls-mega:      -0.03em;
  --ls-display:   -0.025em;
  --ls-heading:   -0.015em;
  --ls-body:       0em;
  --ls-eyebrow:    0.18em;   /* uppercase kicker */
  --ls-mono:       0.02em;

  /* ─────────── SPACING (4px base · industrial rhythm) ─────────── */
  --sp-0:   0;
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:   12px;
  --sp-4:   16px;
  --sp-5:   24px;
  --sp-6:   32px;
  --sp-7:   48px;
  --sp-8:   64px;
  --sp-9:   96px;
  --sp-10: 128px;
  --sp-11: 192px;

  /* ─────────── RADII (deliberadamente conservador) ─────────── */
  --r-0:    0px;      /* Editorial, tables, hero blocks */
  --r-1:    2px;      /* Inputs, badges */
  --r-2:    4px;      /* Buttons */
  --r-3:    8px;      /* Cards estándar */
  --r-4:    12px;     /* Cards grandes */
  --r-pill: 999px;    /* Solo tags/pills */

  /* ─────────── BORDER WIDTHS ─────────── */
  --bw-hairline: 1px;
  --bw-technical: 1.5px;   /* Diagramas, cards sobre negro */
  --bw-strong: 2px;

  /* ─────────── SHADOWS (mínimas, industriales) ─────────── */
  --shadow-0: none;
  --shadow-1: 0 1px 2px rgba(30,31,38,0.06), 0 0 0 1px rgba(30,31,38,0.04);
  --shadow-2: 0 4px 12px rgba(30,31,38,0.08), 0 0 0 1px rgba(30,31,38,0.04);
  --shadow-3: 0 12px 32px rgba(30,31,38,0.12), 0 0 0 1px rgba(30,31,38,0.05);
  --shadow-cta: 0 8px 24px rgba(244,2,76,0.25);
  --shadow-inset: inset 0 0 0 1.5px var(--omnix-ink);

  /* ─────────── MOTION ─────────── */
  --dur-fast:    120ms;
  --dur-base:    220ms;
  --dur-slow:    400ms;      /* max según brand */
  --ease-spring: cubic-bezier(0.5, 1.6, 0.4, 1);
  --ease-out:    cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in:     cubic-bezier(0.6, 0, 0.8, 0.2);

  /* ─────────── LAYOUT ─────────── */
  --container-max: 1280px;
  --container-narrow: 880px;
  --gutter: 32px;
}

/* ============================================================
   SEMANTIC ELEMENT STYLES
   ============================================================ */

html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-2);
  background: var(--bg-1);
  font-weight: 400;
}

.eyebrow, .kicker {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--fg-3);
  font-weight: 500;
}

h1, .h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  color: var(--fg-1);
  margin: 0;
}

h2, .h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-heading);
  color: var(--fg-1);
  margin: 0;
}

h3, .h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-heading);
  color: var(--fg-1);
  margin: 0;
}

h4, .h4 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h4);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--fg-1);
  margin: 0;
}

h5, .h5 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h5);
  line-height: 1.3;
  color: var(--fg-1);
  margin: 0;
}

.display {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-display);
  line-height: 0.98;
  letter-spacing: var(--ls-display);
  color: var(--fg-1);
}

.mega-number {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-mega);
  line-height: 0.9;
  letter-spacing: var(--ls-mega);
  font-variant-numeric: tabular-nums;
}

.lead {
  font-family: var(--font-body);
  font-size: var(--fs-lead);
  line-height: var(--lh-normal);
  color: var(--fg-2);
  font-weight: 400;
}

.serif-lead {
  font-family: var(--font-serif);
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--fg-2);
  font-style: italic;
  font-weight: 400;
}

p { margin: 0 0 var(--sp-4); text-wrap: pretty; }

code, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
  letter-spacing: var(--ls-mono);
  color: var(--fg-2);
}

.meta {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  color: var(--fg-4);
  letter-spacing: 0.04em;
}

hr.editorial {
  border: 0;
  border-top: 1.5px solid var(--border-strong);
  margin: var(--sp-7) 0;
}

/* Selection */
::selection { background: var(--omnix-fuxia); color: var(--omnix-white); }