/* ─────────────────────────────────────────────────────────
 * SoftwaLabs · Design tokens
 * Laboratorio de ingeniería aplicada — Swiss técnico, dual.
 * Adaptado del paquete _input/data/design-claude.
 * ────────────────────────────────────────────────────────── */

:root {
  /* Tipografía — del paquete nuevo */
  --font-display: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --font-body:    'Inter Tight',   ui-sans-serif, system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --font-serif:   'Fraunces', ui-serif, Georgia, serif;

  /* Radii */
  --r-xs: 2px;
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 10px;
  --r-xl: 16px;

  /* Sombras */
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow-md: 0 10px 30px rgba(0,0,0,.35);
  --shadow-lg: 0 30px 80px rgba(0,0,0,.5);

  /* Acento UE — rastro de marca */
  --eu-blue:   #003399;
  --eu-yellow: #ffcc00;

  /* Estados semánticos */
  --warn:   #ffc857;
  --danger: #ff7676;

  /* ───── Tema OSCURO (default) ───── */
  --bg:    #08080a;
  --bg-1:  #0d0d10;
  --bg-2:  #131318;
  --bg-3:  #1a1a20;
  --line:  #1e1e24;
  --line-2:#2a2a32;
  --line-3:#3a3a44;
  --ink:   #ececee;
  --ink-2: #b8b8bd;
  --ink-3: #70707a;
  --ink-4: #44444d;

  /* Acento oficial SoftwaLabs: cyan eléctrico (mismo del text-shadow del hero).
     Contraste sobre #08080a (bg dark) ≈ 16.5:1 (WCAG AAA). */
  --accent:     #00F3F2;          /* cyan oficial SoftwaLabs */
  --accent-ink: #001f1f;          /* cyan profundo (texto sobre accent) */
  --accent-2:   #7df9d6;          /* cyan-mint complementario */
  --accent-soft: rgba(0, 243, 242, 0.12);

  /* hero canvas (cosmic original) — fondo oscuro propio */
  --hero-bg-dark:  #0a0a0c;
  --hero-bg-light: #f6f5f1;
}

[data-theme="light"] {
  --bg:    #f6f5f1;
  --bg-1:  #fdfcf8;
  --bg-2:  #ffffff;
  --bg-3:  #efede6;
  --line:  #e3e0d6;
  --line-2:#d4d0c3;
  --line-3:#a89f87;
  --ink:   #0a0a0c;
  --ink-2: #2a2a30;
  --ink-3: #6e6e78;
  --ink-4: #9a9aa3;

  /* Acento oficial en tema claro: cyan oscuro para contraste sobre papel.
     Contraste sobre #f6f5f1 ≈ 5.5:1 (WCAG AA texto normal). */
  --accent:     #006e6d;          /* cyan oscuro derivado del oficial */
  --accent-ink: #e6ffff;          /* cyan muy claro (texto sobre accent) */
  --accent-2:   #004f4e;          /* cyan más profundo */
  --accent-soft: rgba(0, 110, 109, 0.10);

  --shadow-sm: 0 1px 2px rgba(0,0,0,.05);
  --shadow-md: 0 10px 30px rgba(0,0,0,.08);
  --shadow-lg: 0 30px 80px rgba(0,0,0,.12);
}

/* ───── Reset mínimo ───── */
*,
*::before,
*::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'ss01', 'ss02', 'cv11';
  transition: background-color .25s ease, color .25s ease;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }

/* ───── Utilidades ───── */
.mono   { font-family: var(--font-mono); font-feature-settings: 'zero','ss02'; }
.serif  { font-family: var(--font-serif); font-style: italic; }
.display{ font-family: var(--font-display); letter-spacing: -.02em; }
.uc     { text-transform: uppercase; letter-spacing: .12em; }
.tabular{ font-variant-numeric: tabular-nums; }
.muted  { color: var(--ink-3); }
.accent { color: var(--accent); }

/* Hairlines y reglas estilo swiss */
.hairline   { border-top: 1px solid var(--line); }
.rule-v     { width: 1px; background: var(--line); align-self: stretch; }
.rule-h     { height: 1px; background: var(--line); width: 100%; }
.dot-leader { flex: 1; border-bottom: 1px dotted var(--line-2); margin: 0 8px; transform: translateY(-4px); }

/* Bandera UE como traza de marca */
.eu-stripe {
  height: 4px;
  background: linear-gradient(
    to right,
    var(--eu-blue) 0%, var(--eu-blue) 50%,
    var(--eu-yellow) 50%, var(--eu-yellow) 100%
  );
}

/* Grain noise overlay opcional */
.grain { position: relative; }
.grain::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.28 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: .25; mix-blend-mode: overlay; z-index: 1;
}

/* Scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 4px; }

/* Animaciones reusables */
@keyframes lab-blink { 0%,50% { opacity: 1 } 51%,100% { opacity: 0 } }
@keyframes lab-pulse { 0%,100% { transform: scale(1); opacity: .7 } 50% { transform: scale(1.3); opacity: 1 } }
@keyframes lab-fade-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes lab-ticker  { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes lab-corona  {
  0%, 100% { transform: scale(1);    opacity: .85; }
  50%      { transform: scale(1.04); opacity: 1; }
}