/* ============================================================================
   Espacios3D · Tokens del sistema visual · DESIGN-001
   Única fuente de verdad de la identidad. Importar donde se aplique la marca.
   Regla de oro: cada decisión responde a "¿aporta valor a la experiencia?".
   ============================================================================ */
:root {
  /* ---- Neutros (base). Blanco, grafito y una escala de grises neutros. ---- */
  --c-white:   #ffffff;
  --gray-25:   #fafbfc;   /* fondo sutil */
  --gray-50:   #f4f5f7;   /* superficie alterna */
  --gray-100:  #e9ebef;   /* borde sutil (por defecto) */
  --gray-200:  #dadde2;   /* borde / divisor */
  --gray-300:  #c2c7ce;   /* divisor marcado */
  --gray-400:  #9aa1ab;   /* deshabilitado / placeholder — NO para texto */
  --gray-500:  #6b7280;   /* texto secundario (AA 4.83) */
  --gray-600:  #4b5159;
  --gray-700:  #333941;
  --gray-800:  #1f242b;
  --gray-900:  #0f1218;   /* grafito · texto principal (AA 18.75) */

  /* ---- Acento. UN único color corporativo (azul #2B6CFF). ---- */
  --accent-50:  #eef4ff;  /* tinte de fondo (estados) */
  --accent-100: #d9e5ff;
  --accent-200: #b6ccff;
  --accent-500: #2b6cff;  /* MARCA · relleno de botones, foco, acentos */
  --accent-600: #1e56e0;  /* enlaces/texto sobre blanco (AA 6.06) · hover */
  --accent-700: #1a48bd;  /* activo (AA 7.76) */

  /* ---- Semánticos (discretos, uso escaso). ---- */
  --success:   #17924a;  --success-tint: #e7f4ec;
  --warning:   #b7791f;  --warning-tint: #faf3e6;
  --danger:    #d64545;  --danger-tint:  #fbeaea;

  /* ---- Roles de superficie y texto (tema claro, por defecto) ---- */
  --bg:            var(--c-white);
  --surface:       var(--c-white);
  --surface-2:     var(--gray-25);
  --border:        var(--gray-100);
  --border-strong: var(--gray-200);
  --text:          var(--gray-900);
  --text-2:        var(--gray-500);   /* secundario */
  --text-3:        var(--gray-400);   /* terciario / deshabilitado */
  --accent:        var(--accent-500);
  --accent-text:   var(--accent-600); /* el acento cuando es texto/enlace */
  --focus-ring:    0 0 0 3px rgba(43, 108, 255, .35);

  /* ---- Tipografía. Una única familia sans-serif moderna. ---- */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;

  /* Escala tipográfica (base 16px). Títulos con presencia, texto muy legible. */
  --fs-display: 3rem;      --lh-display: 1.08;  --ls-display: -0.022em;
  --fs-h1:      2.25rem;   --lh-h1:      1.14;  --ls-h1:      -0.02em;
  --fs-h2:      1.75rem;   --lh-h2:      1.22;  --ls-h2:      -0.014em;
  --fs-h3:      1.375rem;  --lh-h3:      1.3;   --ls-h3:      -0.01em;
  --fs-h4:      1.125rem;  --lh-h4:      1.4;
  --fs-lg:      1.0625rem; --lh-lg:      1.6;
  --fs-body:    1rem;      --lh-body:    1.6;
  --fs-sm:      0.8125rem; --lh-sm:      1.5;
  --fs-overline:0.75rem;   --lh-overline:1;     --ls-overline: 0.09em;

  --fw-regular: 400;  --fw-medium: 500;  --fw-semibold: 600;  --fw-bold: 700;

  /* ---- Espaciado (base 4px). Mucho aire, composición equilibrada. ---- */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 20px;  --space-6: 24px;  --space-8: 32px;  --space-10: 40px;
  --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px;

  /* ---- Radios. ---- */
  --radius-sm: 7px;  --radius-md: 10px;  --radius-lg: 16px;  --radius-xl: 22px;  --radius-pill: 999px;

  /* ---- Elevación (sombras suaves y con profundidad, en capas; nunca dramáticas). ---- */
  --shadow-xs: 0 1px 2px rgba(15, 18, 24, .04);
  --shadow-sm: 0 1px 2px rgba(15, 18, 24, .04), 0 2px 6px rgba(15, 18, 24, .05);
  --shadow-md: 0 2px 4px rgba(15, 18, 24, .04), 0 10px 24px rgba(15, 18, 24, .08);
  --shadow-lg: 0 8px 16px rgba(15, 18, 24, .06), 0 24px 56px rgba(15, 18, 24, .13);
  --shadow-accent: 0 6px 18px rgba(43, 108, 255, .28);   /* realce del botón principal al pasar */
  --ring-inset: inset 0 0 0 1px rgba(15, 18, 24, .04);   /* borde interior sutil para tarjetas */

  /* ---- Movimiento (suave, rápido, útil). ---- */
  --dur-fast: 120ms;  --dur: 200ms;  --dur-slow: 320ms;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease:     cubic-bezier(.2, 0, 0, 1);
  --container: 1120px;   /* ancho máximo de contenido */
}

/* ---- Tema oscuro (para el Viewer inmersivo y superficies oscuras). ----
   Mismo sistema; el contenido (arte, patrimonio) luce sobre fondo grafito.
   Añadir data-theme="dark" al contenedor para adoptarlo. */
[data-theme="dark"] {
  --bg:            var(--gray-900);
  --surface:       #171b22;
  --surface-2:     #1f242b;
  --border:        rgba(255, 255, 255, .10);
  --border-strong: rgba(255, 255, 255, .16);
  --text:          #e9ebef;   /* AA 15.7 sobre grafito */
  --text-2:        #9aa1ab;
  --text-3:        #6b7280;
  --accent:        #4c82ff;    /* algo más claro para contraste en oscuro (AA 5.31) */
  --accent-text:   #7aa2ff;
  --focus-ring:    0 0 0 3px rgba(76, 130, 255, .40);
}