/* NEURYA · DESIGN SYSTEM — archivo GENERADO, no lo edites.
   Se arma con: node tools/build-css.mjs
   La fuente son los archivos de tokens/, en este orden:
   tokens/fonts.css, tokens/colors.css, tokens/typography.css, tokens/spacing.css, tokens/effects.css

   Van juntos y no por @import porque una cadena de imports encadena dos viajes
   al servidor antes de pintar: el navegador tiene que bajar y parsear este
   archivo para enterarse de que necesita los otros. */

/* ===== tokens/fonts.css ===== */
/* Neurya webfonts — 100% self-hosted, sin CDN.
   Sora (titulares + datos) — pesos estáticos 300–800.
   Inter (cuerpo + UI) — variable font (opsz,wght) que cubre todos los pesos 100–900.
   Rutas relativas a este archivo (tokens/), por eso ../assets/fonts/. */

/* — Sora (self-hosted) — */
@font-face { font-family: 'Sora'; font-weight: 300; font-style: normal; font-display: swap; src: url('../assets/fonts/Sora-Light.woff2') format('woff2'); }
@font-face { font-family: 'Sora'; font-weight: 400; font-style: normal; font-display: swap; src: url('../assets/fonts/Sora-Regular.woff2') format('woff2'); }
@font-face { font-family: 'Sora'; font-weight: 500; font-style: normal; font-display: swap; src: url('../assets/fonts/Sora-Medium.woff2') format('woff2'); }
@font-face { font-family: 'Sora'; font-weight: 600; font-style: normal; font-display: swap; src: url('../assets/fonts/Sora-SemiBold.woff2') format('woff2'); }
@font-face { font-family: 'Sora'; font-weight: 700; font-style: normal; font-display: swap; src: url('../assets/fonts/Sora-Bold.woff2') format('woff2'); }
@font-face { font-family: 'Sora'; font-weight: 800; font-style: normal; font-display: swap; src: url('../assets/fonts/Sora-ExtraBold.woff2') format('woff2'); }

/* — Inter (self-hosted, variable font: un archivo cubre 100–900) — */
@font-face { font-family: 'Inter'; font-weight: 100 900; font-style: normal; font-display: swap; src: url('../assets/fonts/Inter-Variable.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 100 900; font-style: italic; font-display: swap; src: url('../assets/fonts/Inter-Variable-Italic.woff2') format('woff2'); }

/* ===== tokens/colors.css ===== */
/* NEURYA · SISTEMA DE COLOR — "Acero Luminoso"
   La noche de la planta (navys) · la luz que piensa (azules + cyan) · el papel de trabajo (claros + semánticos).
   Regla de oro: el cyan y los azules claros NUNCA son texto sobre blanco.
   Sobre claro, el texto es navy o Azul Acero. */
:root {
  /* — Navys · "la noche de la planta" — */
  --navy-void: #05070E;   /* negro-navy · secciones de máximo contraste */
  --navy-base: #080B16;   /* fondo principal */
  --navy-1:    #0A0E1A;   /* fondos alternos */
  --navy-2:    #13182A;   /* superficies / cards */

  /* — Azules + cyan · "la luz que piensa" — */
  --azul-acero: #215382;  /* el azul serio */
  --azul-medio: #4B78BA;  /* gradientes · links */
  --azul-claro: #6C9FE0;  /* acentos grandes */
  --cyan:       #54C8F5;  /* el dato protagonista */
  --hielo:      #CFEAFF;  /* texto sobre oscuro */
  --verde:      #7EE0A8;  /* acento vivo */

  /* — Claros + semánticos · "el papel de trabajo" — */
  --papel:   #F7F9FC;     /* documentos largos, fondos claros */
  --blanco:  #FFFFFF;
  --exito:   #1D9E63;     /* ROI positivo */
  --alerta:  #C77A18;     /* atención */

  /* — Neutrales derivados (para bordes, texto atenuado sobre claro) — */
  --tinta:      #0A0E1A;  /* texto principal sobre claro = navy-1 */
  --tinta-2:    #3A4358;  /* texto secundario sobre claro */
  --tinta-3:    #6B7488;  /* texto terciario / captions sobre claro */
  --linea:      #E2E8F1;  /* bordes sutiles sobre claro */
  --linea-navy: rgba(207,234,255,0.10); /* bordes sutiles sobre navy */

  /* ── Alias semánticos ──────────────────────────────── */
  /* Sobre oscuro (default de la marca) */
  --surface-base:    var(--navy-base);
  --surface-alt:     var(--navy-1);
  --surface-card:    var(--navy-2);
  --text-strong:     var(--blanco);
  --text-body:       var(--hielo);
  --text-muted:      #93A4C0;
  --text-accent:     var(--cyan);
  --border-subtle:   var(--linea-navy);

  /* Sobre claro (documentos / secciones Papel) */
  --surface-light:       var(--papel);
  --surface-light-card:  var(--blanco);
  --text-on-light:       var(--tinta);
  --text-on-light-muted: var(--tinta-2);
  --border-on-light:     var(--linea);
  --link-on-light:       var(--azul-acero);

  /* Acentos funcionales */
  --accent:          var(--cyan);
  --accent-strong:   var(--azul-acero);
  --success:         var(--exito);
  --warning:         var(--alerta);
  --focus-ring:      rgba(84,200,245,0.55);

  /* Links (default global) */
  --link:       var(--cyan);
  --link-hover: var(--azul-claro);
}

/* ===== tokens/typography.css ===== */
/* NEURYA · TIPOGRAFÍA — "una voz que titula, una que explica"
   Sora  = titulares, datos y eyebrows (geométrica, ecos del corte angular del logo). Pesos 600–800.
   Inter = cuerpo, tablas y UI (neutra, legible). Pesos 400–600.
   Los NÚMEROS siempre en Sora — los datos son protagonistas de la marca.
   Sin Sora/Inter (Office): titulares Verdana Bold, cuerpo Arial. */
:root {
  --font-display: 'Sora', 'Verdana', system-ui, sans-serif;   /* titulares + datos */
  --font-body:    'Inter', 'Arial', system-ui, sans-serif;    /* cuerpo + UI */
  --font-mono:    'Sora', ui-monospace, monospace;            /* datos/números */

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

  /* Escala de tamaños (rem, base 16px) */
  --fs-eyebrow: 0.8125rem;  /* 13px */
  --fs-caption: 0.8125rem;  /* 13px */
  --fs-small:   0.875rem;   /* 14px */
  --fs-body:    1rem;       /* 16px */
  --fs-body-lg: 1.125rem;   /* 18px */
  --fs-lead:    1.375rem;   /* 22px */
  --fs-h4:      1.5rem;     /* 24px */
  --fs-h3:      2rem;       /* 32px */
  --fs-h2:      2.75rem;    /* 44px */
  --fs-h1:      3.75rem;    /* 60px */
  --fs-display: 5rem;       /* 80px — hero */
  --fs-data:    4rem;       /* 64px — dato protagonista */

  /* Line-heights */
  --lh-tight:   1.05; /* @kind font */   /* titulares grandes */
  --lh-snug:    1.2; /* @kind font */    /* subtítulos */
  --lh-normal:  1.5; /* @kind font */    /* cuerpo */
  --lh-relaxed: 1.65; /* @kind font */   /* párrafos largos */

  /* Tracking */
  --tracking-eyebrow: 0.18em; /* @kind font */  /* eyebrows Sora, tracking amplio */
  --tracking-tight:   -0.02em; /* @kind font */ /* titulares grandes */
  --tracking-normal:  0; /* @kind font */
}

/* Clases utilitarias de tipografía de marca */
.neurya-eyebrow {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--cyan);
}
.neurya-h1 { font-family: var(--font-display); font-weight: var(--fw-black); font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); }
.neurya-h2 { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-h2); line-height: var(--lh-snug); letter-spacing: var(--tracking-tight); }
.neurya-h3 { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-h3); line-height: var(--lh-snug); }
.neurya-body { font-family: var(--font-body); font-weight: var(--fw-regular); font-size: var(--fs-body); line-height: var(--lh-relaxed); }
.neurya-data { font-family: var(--font-display); font-weight: var(--fw-black); font-size: var(--fs-data); line-height: 1; color: var(--cyan); }

/* ===== tokens/spacing.css ===== */
/* NEURYA · ESPACIADO, RADIOS Y LAYOUT
   Escala base 4px. Layout amplio y estructurado — "el logo respira; nada entra a su zona". */
:root {
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* Radios — geometría con esquinas técnicas, no juguetonas */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;    /* cards, inputs */
  --radius-lg: 18px;    /* superficies grandes */
  --radius-xl: 28px;    /* tiles / app icon */
  --radius-pill: 999px; /* micro-etiquetas, badges */

  /* Layout */
  --container-max: 1200px;
  --container-narrow: 760px;   /* documentos, máx 70 caracteres por línea */
  --gutter: 24px;
  --section-y: 96px;           /* respiración vertical entre secciones */

  /* Grosores de borde */
  --border-hair: 1px;
  --border-thick: 2px;         /* mismo trazo 2px de la iconografía */
}

/* ===== tokens/effects.css ===== */
/* NEURYA · EFECTOS — "el gesto lumínico"
   Degradados, aura, sombras. Luz que sugiere inteligencia, no decoración.
   Regla: los degradados viven en superficies grandes y en el dato protagonista —
   nunca en texto corrido ni en iconos. */
:root {
  /* Degradados de marca */
  --grad-neurya: linear-gradient(120deg, #0A0E1A 0%, #215382 55%, #54C8F5 100%); /* @kind color */  /* portadas, heroes, cierres */
  --grad-acero:  linear-gradient(120deg, #215382 0%, #4B78BA 100%); /* @kind color */  /* superficies, botones, bandas */
  --grad-dato:   linear-gradient(120deg, #CFEAFF 0%, #54C8F5 100%); /* @kind color */  /* dato protagonista */

  /* Aura — resplandor radial cyan desde una esquina. Una sola vez por pieza. */
  --aura-cyan: radial-gradient(60% 60% at 85% 0%, rgba(84,200,245,0.22) 0%, rgba(84,200,245,0) 70%); /* @kind color */
  --aura-acero: radial-gradient(70% 70% at 0% 100%, rgba(33,83,130,0.35) 0%, rgba(33,83,130,0) 70%); /* @kind color */

  /* Sombras — discretas sobre navy, con tinte frío */
  --shadow-sm: 0 1px 2px rgba(4,7,14,0.4);
  --shadow-md: 0 8px 24px rgba(4,7,14,0.45);
  --shadow-lg: 0 24px 60px rgba(4,7,14,0.55);
  --shadow-glow: 0 0 0 1px rgba(84,200,245,0.35), 0 8px 40px rgba(84,200,245,0.20); /* resplandor cyan sutil */

  /* Sombras sobre claro (documentos / Papel) */
  --shadow-light-sm: 0 1px 2px rgba(10,14,26,0.06);
  --shadow-light-md: 0 6px 20px rgba(10,14,26,0.08);
  --shadow-light-lg: 0 20px 50px rgba(10,14,26,0.12);

  /* Transiciones — precisas, sin rebotes */
  --ease-standard: cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --dur-fast: 130ms; /* @kind other */
  --dur-base: 220ms; /* @kind other */
  --dur-slow: 400ms; /* @kind other */

  /* Blur para superficies de vidrio (navbar, overlays) */
  --blur-glass: saturate(150%) blur(14px); /* @kind other */
}