/**
 * Tensei Logic - Design Tokens & CSS Variables
 * Paleta moderna, minimalista y tecnológica:
 * Grafito profundo + Naranja acento + Tipografía técnica limpia
 */

:root {
  /* Paleta de Colores Base */
  --bg-primary: #0a0d14;
  --bg-secondary: #10141e;
  --bg-surface: rgba(26, 32, 44, 0.70);
  --bg-surface-elevated: rgba(30, 38, 54, 0.85);
  --bg-surface-hover: rgba(38, 48, 68, 0.90);
  
  /* Bordes y Líneas */
  --border-color: rgba(255, 255, 255, 0.07);
  --border-color-hover: rgba(255, 255, 255, 0.18);
  --border-accent: rgba(255, 107, 0, 0.30);
  --border-accent-strong: rgba(255, 107, 0, 0.60);

  /* Acento de Marca */
  --accent-orange: #ff6b00;
  --accent-orange-light: #ff8533;
  --accent-orange-glow: rgba(255, 107, 0, 0.18);
  --accent-gradient: linear-gradient(135deg, #ff6b00 0%, #ff8533 100%);

  /* Textos y Contraste */
  --text-primary: #ffffff;
  --text-secondary: #cbd5e1;
  --text-tertiary: #94a3b8;
  --text-on-accent: #0a0d14; /* Óptimo contraste sobre #ff6b00 (WCAG AA/AAA) */

  /* Tipografía */
  --font-sans: "Inter", "Plus Jakarta Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;

  /* Escala de Espaciado */
  --space-xs: 0.25rem;  /* 4px */
  --space-sm: 0.5rem;   /* 8px */
  --space-md: 1rem;     /* 16px */
  --space-lg: 1.5rem;   /* 24px */
  --space-xl: 2rem;     /* 32px */
  --space-2xl: 3rem;    /* 48px */
  --space-3xl: 5rem;    /* 80px */
  --space-4xl: 7.5rem;  /* 120px */

  /* Radios de Borde */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* Sombras y Elevaciones */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 16px -2px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 12px 32px -4px rgba(0, 0, 0, 0.7);
  --shadow-glow: 0 0 30px -5px rgba(255, 107, 0, 0.25);

  /* Transiciones Sutiles */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Layout y Contenedores */
  --container-max-width: 1200px;
  --container-padding: 1.5rem;
  --header-height: 72px;

  /* Accesibilidad: Foco */
  --focus-ring: 2px solid var(--accent-orange-light);
  --focus-offset: 3px;
}