/* TÓNICA · Design tokens v1.0 · 2026
   Fuentes: Geist + Geist Mono (SIL Open Font License 1.1) — github.com/vercel/geist-font
   <link href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500&family=Geist+Mono:wght@400;500&display=swap" rel="stylesheet"> */

:root {
  /* Núcleo */
  --tn-black: #0E0E0C;
  --tn-paper: #F2F0EA;
  --tn-lime: #C8FF3D;        /* Innovation · acento principal */
  --tn-vermilion: #E8491C;   /* Human Taste · acento secundario */

  /* Interacción */
  --tn-lime-hover: #B6F01F;
  --tn-lime-pressed: #A2DA0B;
  --tn-vermilion-hover: #D43E12;
  --tn-vermilion-pressed: #BC350C;

  /* Neutros cálidos */
  --tn-n-0: #FFFFFF;
  --tn-n-50: #F2F0EA;
  --tn-n-100: #E9E7E1;
  --tn-n-200: #D6D3CB;
  --tn-n-300: #B4B0A6;
  --tn-n-400: #8C8980;
  --tn-n-500: #6E6B64;  /* texto secundario mínimo sobre paper: 4.66:1 */
  --tn-n-600: #4A4741;
  --tn-n-700: #33312C;
  --tn-n-800: #2A2925;
  --tn-n-900: #1A1917;
  --tn-n-950: #0E0E0C;

  /* Estados funcionales (siempre con ícono o texto, nunca solo color) */
  --tn-success: #1F7A4D;
  --tn-warning: #A86510;
  --tn-error: #B42318;
  --tn-info: #0E0E0C;

  /* Semánticos · tema claro (default) */
  --tn-bg: var(--tn-paper);
  --tn-surface: var(--tn-n-0);
  --tn-surface-2: var(--tn-n-100);
  --tn-border: var(--tn-n-200);
  --tn-text: var(--tn-black);
  --tn-text-2: var(--tn-n-600);
  --tn-text-3: var(--tn-n-500);
  --tn-accent: var(--tn-lime);
  --tn-on-accent: var(--tn-black);
  --tn-focus: var(--tn-black);

  /* Tipografía */
  --tn-font-sans: "Geist", ui-sans-serif, system-ui, sans-serif;
  --tn-font-mono: "Geist Mono", ui-monospace, monospace;
  --tn-display: clamp(3.5rem, 2.4rem + 5.2vw, 7.5rem);
  --tn-h1: clamp(2.75rem, 2rem + 3.4vw, 5rem);
  --tn-h2: clamp(2.125rem, 1.7rem + 2vw, 3.5rem);
  --tn-h3: clamp(1.625rem, 1.4rem + 1vw, 2.25rem);
  --tn-h4: clamp(1.375rem, 1.3rem + .4vw, 1.625rem);
  --tn-h5: clamp(1.125rem, 1.08rem + .2vw, 1.25rem);
  --tn-h6: .8125rem;      /* mono, mayúsculas */
  --tn-body-l: 1.125rem;
  --tn-body: 1rem;
  --tn-small: .875rem;
  --tn-caption: .75rem;   /* mono */
  --tn-measure: 68ch;

  /* Espaciado · base 4 */
  --tn-s-1: 4px; --tn-s-2: 8px; --tn-s-3: 12px; --tn-s-4: 16px; --tn-s-5: 24px;
  --tn-s-6: 32px; --tn-s-7: 48px; --tn-s-8: 64px; --tn-s-9: 96px; --tn-s-10: 128px;

  /* Layout */
  --tn-max: 1440px;
  --tn-margin: clamp(20px, 5vw, 80px);
  --tn-gutter: clamp(16px, 2vw, 24px);
  --tn-cut: 45deg;        /* único ángulo del sistema */

  /* Forma */
  --tn-radius: 0;         /* por defecto todo es recto */
  --tn-radius-icon: 22.3%;/* solo íconos de app */

  /* Motion */
  --tn-ease: cubic-bezier(.65, 0, .35, 1);
  --tn-ease-out: cubic-bezier(.22, 1, .36, 1);
  --tn-dur-1: 120ms; --tn-dur-2: 240ms; --tn-dur-3: 600ms;
  --tn-logo-intro: 1750ms;
}

[data-theme="dark"] {
  --tn-bg: var(--tn-black);
  --tn-surface: var(--tn-n-900);
  --tn-surface-2: var(--tn-n-800);
  --tn-border: var(--tn-n-800);
  --tn-text: var(--tn-paper);
  --tn-text-2: #A09D95;
  --tn-text-3: var(--tn-n-400);  /* 5.5:1 sobre black */
  --tn-focus: var(--tn-lime);
}

/* Contexto Human Taste: cambia el acento de la sección, nunca se suma */
[data-accent="vermilion"] { --tn-accent: var(--tn-vermilion); --tn-on-accent: var(--tn-black); }

/* Jerarquías */
.tn-display { font: 500 var(--tn-display)/.95 var(--tn-font-sans); letter-spacing: -.045em; }
.tn-h1 { font: 500 var(--tn-h1)/1 var(--tn-font-sans); letter-spacing: -.04em; max-width: 18ch; }
.tn-h2 { font: 500 var(--tn-h2)/1.05 var(--tn-font-sans); letter-spacing: -.035em; max-width: 22ch; }
.tn-h3 { font: 500 var(--tn-h3)/1.15 var(--tn-font-sans); letter-spacing: -.025em; }
.tn-h4 { font: 500 var(--tn-h4)/1.25 var(--tn-font-sans); letter-spacing: -.015em; }
.tn-h5 { font: 500 var(--tn-h5)/1.35 var(--tn-font-sans); letter-spacing: -.01em; }
.tn-h6 { font: 500 var(--tn-h6)/1.4 var(--tn-font-mono); letter-spacing: .08em; text-transform: uppercase; }
.tn-body-l { font: 400 var(--tn-body-l)/1.6 var(--tn-font-sans); max-width: var(--tn-measure); }
.tn-body { font: 400 var(--tn-body)/1.6 var(--tn-font-sans); max-width: var(--tn-measure); }
.tn-small { font: 400 var(--tn-small)/1.5 var(--tn-font-sans); }
.tn-caption { font: 400 var(--tn-caption)/1.4 var(--tn-font-mono); letter-spacing: .04em; }
.tn-data { font-family: var(--tn-font-mono); font-variant-numeric: tabular-nums; }

/* Foco accesible */
:focus-visible { outline: 2px solid var(--tn-focus); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; }
}