/* ============================================================================
   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:   #0d0f14;   /* fondo de página (grafito) */
  --gray-50:   #171a21;   /* superficie sutil / hover */
  --gray-100:  #202430;   /* relleno tenue (progreso, pistas) */
  --gray-200:  #2a2f3b;   /* borde / divisor */
  --gray-300:  #3a4150;   /* divisor marcado / interruptor apagado */
  --gray-400:  #6a7180;   /* deshabilitado / placeholder / texto terciario */
  --gray-500:  #9aa1ad;   /* texto secundario */
  --gray-600:  #b6bcc6;
  --gray-700:  #d2d6dd;
  --gray-800:  #e6e8ec;
  --gray-900:  #f4f6f8;   /* texto principal (claro sobre grafito) */

  /* ---- Acento. UN único color corporativo (azul #2B6CFF). ---- */
  --accent-50:  rgba(76,130,255,.13);  /* tinte translúcido para fondos sobre grafito */
  --accent-100: rgba(76,130,255,.22);
  --accent-200: rgba(76,130,255,.34);
  --accent-500: #4c82ff;  /* MARCA · azul brillante para fondo oscuro */
  --accent-600: #5f90ff;  /* hover (más claro sobre oscuro) */
  --accent-700: #4577ea;  /* activo */

  /* ---- Semánticos (discretos, uso escaso). ---- */
  --success:   #30d158;  --success-tint: rgba(48,209,88,.15);
  --warning:   #ffd426;  --warning-tint: rgba(255,212,38,.15);
  --danger:    #ff6b6b;  --danger-tint:  rgba(255,107,107,.15);

  /* ---- Roles de superficie y texto (tema claro, por defecto) ---- */
  --bg:            #0d0f14;            /* fondo de página (grafito) */
  --surface:       #16181d;            /* tarjetas, barra, modales, campos */
  --surface-2:     #0f1218;            /* recesos: dropzone, pistas, cuadros de URL */
  --border:        rgba(255,255,255,.08);
  --border-strong: rgba(255,255,255,.15);
  --text:          var(--gray-900);
  --text-2:        var(--gray-500);   /* secundario */
  --text-3:        var(--gray-400);   /* terciario / deshabilitado */
  --accent:        var(--accent-500);
  --accent-text:   #7aa2ff;           /* el acento como texto/enlace (más claro sobre oscuro) */
  --focus-ring:    0 0 0 3px rgba(76, 130, 255, .40);

  /* ---- 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(0, 0, 0, .40);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .40), 0 2px 8px rgba(0, 0, 0, .32);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, .45), 0 14px 34px rgba(0, 0, 0, .40);
  --shadow-lg: 0 12px 28px rgba(0, 0, 0, .50), 0 30px 64px rgba(0, 0, 0, .52);
  --shadow-accent: 0 6px 22px rgba(76, 130, 255, .40);    /* resplandor del botón principal al pasar */
  --ring-inset: inset 0 0 0 1px rgba(255, 255, 255, .05); /* filo superior sutil (efecto cristal) */

  /* ---- 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);
}