/* ==========================================================================
   RŌNIN — DESIGN TOKENS (sistema visual aprobado, dirección NOTFOUND404)
   ==========================================================================
   Fuente de verdad: prototype-home-notfound404/styles.css (prototipo APROBADO).
   Estos valores son una extracción literal, no una reinterpretación.

   Estado: archivo NUEVO, no enlazado todavía desde ninguna página real.
   No modifica ni sustituye los tokens existentes en css/styles.css
   (--bg, --panel, --text, --red, …), que la web actual sigue usando.

   Requiere en el <head> de la página (no incluido aquí, ver prototipo):
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700;900&family=IBM+Plex+Mono:wght@400;500;600&display=swap" rel="stylesheet">
   ========================================================================== */

:root{
  /* Color — sistema casi monocromo, rojo como acento puntual */
  --ronin-graphite: #1C1C1C;
  --ronin-grey-mid: #8A8A8A;
  --ronin-paper: #E8E6E1;
  --ronin-red: #CF000C;
  --ronin-white: #FFFFFF;

  --ronin-bg: #121212;
  --ronin-surface: #1C1C1C;
  --ronin-surface-raised: #242424;
  --ronin-surface-elevated: #202020;

  --ronin-text: #FFFFFF;
  --ronin-text-muted: #8A8A8A;
  --ronin-text-tertiary: #6E6E6E;
  --ronin-text-ghost: #4A4A4A;

  --ronin-border: #2E2E2E;
  --ronin-border-hover: #3E3E3E;
  --ronin-hairline: rgba(255,255,255,0.08);

  /* Tipografía */
  --ronin-font-sans: 'Lato', ui-sans-serif, system-ui, sans-serif;
  --ronin-font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace;

  --ronin-text-1: clamp(46px, 4.2vw, 68px);   /* nivel 1 — hero / editorial impacto */
  --ronin-text-2: clamp(36px, 3.35vw, 54px);  /* nivel 2 — statements secundarios */
  --ronin-text-3: clamp(26px, 2.6vw, 40px);   /* nivel 3 — cabeceras funcionales */
  --ronin-text-body: 16px;

  /* Movimiento */
  --ronin-ease: cubic-bezier(.25,1,.5,1);
  --ronin-duration-fast: 200ms;
  --ronin-duration-normal: 420ms;

  /* Contenedores */
  --ronin-container-lg: 1152px;
  --ronin-container-md: 1024px;
  --ronin-container-sm: 768px;
  --ronin-container-xs: 672px;

  --ronin-space-gutter: 24px;
}