/* ============================================================
   EinLab — Colors & Type System
   ============================================================
   Filosofía: papel + tinta + un destello de inteligencia.
   Inspirado en cuadernos de laboratorio (Einstein) cruzados
   con interfaces de terminal modernas. Mono-minimal con un
   acento eléctrico que aparece sólo cuando "se enciende"
   la inteligencia.
   ============================================================ */

/* ---------- FONTS ---------- */
/* Display + body: Geist (sans neo-grotesque, geométrica moderna) */
/* Mono: Geist Mono — para código, métricas, etiquetas técnicas */
/* Editorial accent: Instrument Serif — para "momentos humanos" */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500&family=Instrument+Serif:ital@0;1&display=swap');

:root {
  /* ============================================================
     COLORS — Paleta principal
     ============================================================
     Filosofía: blanco hueso (papel) + tinta casi-negra +
     un único acento eléctrico ("spark"). El azul/cyan se
     reserva para señalar inteligencia/automatización activa.
     ============================================================ */

  /* Neutrales — base "papel & tinta" */
  --paper:        #F5F2EB;  /* papel hueso, fondo principal claro */
  --paper-2:      #ECE7DC;  /* papel sombreado / hover surface */
  --paper-3:      #DDD6C6;  /* divisor cálido */
  --bone:         #FAF8F3;  /* highlight cálido */

  --ink:          #0E0E0C;  /* tinta — texto principal */
  --ink-2:        #2A2A26;  /* tinta secundaria */
  --ink-3:        #5A5A52;  /* tinta terciaria / muted */
  --ink-4:        #8C8C82;  /* placeholder / disabled */

  /* Modo oscuro — laboratorio nocturno */
  --night:        #0A0A09;  /* fondo oscuro */
  --night-2:      #141413;  /* superficie elevada */
  --night-3:      #1F1F1D;  /* card / panel */
  --night-4:      #2C2C29;  /* divider en oscuro */

  /* Acento principal — "spark" eléctrico */
  --spark:        #4D7CFF;  /* azul eléctrico, automatización activa */
  --spark-soft:   #B8C9FF;  /* spark tinted */
  --spark-glow:   #4D7CFF22;/* halo translúcido */
  --spark-deep:   #2952D9;  /* spark hover/pressed */

  /* Acento secundario — "ember" — momentos humanos / cálidos */
  --ember:        #E8654A;  /* terracota, para CTAs cálidas, énfasis editorial */
  --ember-soft:   #F4B5A5;

  /* Semánticos */
  --success:      #2A8B5F;
  --warning:      #C28A1E;
  --danger:       #C0392B;
  --info:         var(--spark);

  /* Foregrounds / Backgrounds semánticos (light) */
  --bg:           var(--paper);
  --bg-elev:      var(--bone);
  --bg-sunken:    var(--paper-2);
  --bg-card:      var(--bone);

  --fg:           var(--ink);
  --fg-2:         var(--ink-2);
  --fg-3:         var(--ink-3);
  --fg-muted:     var(--ink-4);

  --border:       #1a1a1a14;
  --border-2:     #1a1a1a0a;
  --border-strong:#1a1a1a26;

  /* ============================================================
     TYPOGRAPHY
     ============================================================ */
  --font-sans:   'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono:   'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --font-serif:  'Instrument Serif', 'Iowan Old Style', Georgia, serif;

  /* Type scale — fluid */
  --fs-display:  clamp(56px, 9vw, 128px);   /* hero hero */
  --fs-hero:     clamp(40px, 6vw, 80px);    /* h1 */
  --fs-h1:       clamp(32px, 4.5vw, 56px);
  --fs-h2:       clamp(26px, 3vw, 40px);
  --fs-h3:       clamp(20px, 2vw, 26px);
  --fs-h4:       18px;
  --fs-body-lg:  18px;
  --fs-body:     16px;
  --fs-body-sm:  14px;
  --fs-caption:  12px;
  --fs-micro:    11px;

  /* Line heights */
  --lh-tight:    1.02;
  --lh-snug:     1.15;
  --lh-normal:   1.45;
  --lh-relaxed:  1.6;

  /* Letter spacing */
  --tr-tight:    -0.04em;
  --tr-snug:     -0.02em;
  --tr-normal:   0;
  --tr-wide:     0.02em;
  --tr-mono-eyebrow: 0.08em;

  /* ============================================================
     SPACING — escala de 4px
     ============================================================ */
  --s-1:   4px;
  --s-2:   8px;
  --s-3:   12px;
  --s-4:   16px;
  --s-5:   20px;
  --s-6:   24px;
  --s-8:   32px;
  --s-10:  40px;
  --s-12:  48px;
  --s-16:  64px;
  --s-20:  80px;
  --s-24:  96px;
  --s-32:  128px;
  --s-40:  160px;

  /* ============================================================
     RADII — esquinas suaves, casi cuadradas
     ============================================================ */
  --r-xs:  3px;
  --r-sm:  6px;
  --r-md:  10px;
  --r-lg:  14px;
  --r-xl:  20px;
  --r-2xl: 28px;
  --r-pill: 999px;

  /* ============================================================
     SHADOWS — sutiles, como tinta sobre papel
     ============================================================ */
  --shadow-1: 0 1px 0 #1a1a1a08, 0 1px 2px #1a1a1a08;
  --shadow-2: 0 1px 0 #1a1a1a08, 0 2px 8px -2px #1a1a1a14, 0 4px 16px -4px #1a1a1a0a;
  --shadow-3: 0 1px 0 #1a1a1a0a, 0 8px 24px -8px #1a1a1a1f, 0 16px 48px -12px #1a1a1a14;
  --shadow-spark: 0 0 0 1px var(--spark), 0 0 24px var(--spark-glow);
  --shadow-inset: inset 0 1px 0 #ffffff80, inset 0 -1px 0 #1a1a1a0a;

  /* ============================================================
     MOTION — discreta, mecánica
     ============================================================ */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --dur-instant: 100ms;
  --dur-fast:    180ms;
  --dur-base:    280ms;
  --dur-slow:    520ms;
  --dur-narrative: 900ms;

  /* ============================================================
     LAYOUT
     ============================================================ */
  --container:   1200px;
  --container-wide: 1440px;
  --gutter:      24px;
  --grid-gap:    24px;
}

/* ============================================================
   DARK MODE
   ============================================================ */
[data-theme="dark"], .theme-dark {
  --bg:           var(--night);
  --bg-elev:      var(--night-2);
  --bg-sunken:    #050504;
  --bg-card:      var(--night-3);

  --fg:           #F4F1EA;
  --fg-2:         #C9C5BC;
  --fg-3:         #8A8780;
  --fg-muted:     #5A574F;

  --border:       #ffffff14;
  --border-2:     #ffffff08;
  --border-strong:#ffffff24;

  --shadow-1: 0 1px 0 #00000040, 0 1px 2px #00000040;
  --shadow-2: 0 1px 0 #00000040, 0 2px 8px -2px #00000080;
  --shadow-3: 0 1px 0 #00000040, 0 8px 24px -8px #000000a0;
  --shadow-inset: inset 0 1px 0 #ffffff10, inset 0 -1px 0 #00000040;
}

/* ============================================================
   BASE — semantic element styles
   ============================================================ */
html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'ss01', 'cv11';
}

h1, .h1 {
  font-family: var(--font-sans);
  font-size: var(--fs-hero);
  font-weight: 500;
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  margin: 0;
}

h2, .h2 {
  font-family: var(--font-sans);
  font-size: var(--fs-h2);
  font-weight: 500;
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-snug);
  margin: 0;
}

h3, .h3 {
  font-family: var(--font-sans);
  font-size: var(--fs-h3);
  font-weight: 500;
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-snug);
  margin: 0;
}

h4, .h4 {
  font-family: var(--font-sans);
  font-size: var(--fs-h4);
  font-weight: 500;
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-normal);
  margin: 0;
}

p, .body {
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
  margin: 0;
  text-wrap: pretty;
}

.lead {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
}

small, .caption {
  font-size: var(--fs-caption);
  color: var(--fg-3);
  line-height: var(--lh-normal);
}

/* Editorial — instrument serif italic, momento humano */
.editorial {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: var(--tr-snug);
  color: var(--fg);
}

/* Mono — etiquetas técnicas, código */
code, .mono, .eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  font-weight: 400;
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: var(--tr-mono-eyebrow);
  font-size: var(--fs-micro);
  color: var(--fg-3);
}

/* Display — para hero gigante */
.display {
  font-family: var(--font-sans);
  font-size: var(--fs-display);
  font-weight: 400;
  line-height: var(--lh-tight);
  letter-spacing: -0.045em;
}

a {
  color: inherit;
  text-decoration: none;
}

::selection {
  background: var(--ink);
  color: var(--paper);
}
[data-theme="dark"] ::selection {
  background: var(--paper);
  color: var(--ink);
}