/* ========================================================================== 
   BISAE · Variables base reutilizables
   Inspirado en la estructura bisae.variables.css
   ========================================================================== */

:root {
  /* Superficies y fondos */
  --bg-main: #f8fafc;
  --bg-card: #ffffff;
  --bg-muted: #f1f5f9;
  --bg-elevated: rgba(255, 255, 255, .84);
  --bg-hero: radial-gradient(circle at 12% 8%, rgba(21, 54, 224, .12), transparent 28%), radial-gradient(circle at 88% 6%, rgba(239, 35, 60, .10), transparent 22%), linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);

  /* Tipografía y texto */
  --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --text-primary: #0f172a;
  --text-secondary: #334155;
  --text-muted: #64748b;
  --text-inverse: #ffffff;
  --text-link: #1536e0;
  --line-height-body: 1.65;
  --line-height-heading: 1.08;

  /* Identidad de marca */
  --color-primary: #1536e0;
  --color-primary-hover: #1028a8;
  --color-secondary: #111111;
  --color-secondary-hover: #000000;
  --color-accent: #ef233c;
  --color-accent-hover: #c9162b;
  --color-accent-muted: #ffe5ea;

  /* Estados semánticos */
  --color-success: #15803d;
  --color-success-bg: #f0fdf4;
  --color-success-border: #bbf7d0;
  --color-success-text: #166534;
  --color-warning: #b45309;
  --color-warning-bg: #fffbeb;
  --color-warning-border: #fde68a;
  --color-warning-text: #92400e;
  --color-danger: #b91c1c;
  --color-danger-bg: #fef2f2;
  --color-danger-border: #fee2e2;
  --color-danger-text: #991b1b;
  --color-info: #0369a1;
  --color-info-bg: #f0f9ff;
  --color-info-border: #bae6fd;
  --color-info-text: #075985;

  /* Bordes y estructura */
  --border-default: #e2e8f0;
  --border-strong: #cbd5e1;
  --border-soft: rgba(226, 232, 240, .78);
  --container-max: 1180px;
  --content-max: 880px;

  /* Sombras elevadas */
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, .05), 0 1px 2px rgba(15, 23, 42, .08);
  --shadow-md: 0 10px 28px rgba(15, 23, 42, .09);
  --shadow-lg: 0 24px 70px rgba(15, 23, 42, .13);
  --shadow-brand: 0 28px 80px rgba(21, 54, 224, .16);

  /* Radios */
  --radius-sm: .375rem;
  --radius-md: .75rem;
  --radius-lg: 1.25rem;
  --radius-xl: 1.75rem;
  --radius-pill: 999px;

  /* Accesibilidad */
  --focus-ring-color: rgba(21, 54, 224, .44);
  --focus-ring: 0 0 0 .25rem var(--focus-ring-color);
  --min-target: 2.75rem;

  /* Movimiento */
  --motion-fast: 160ms;
  --motion-base: 280ms;
  --motion-slow: 560ms;
  --ease-standard: cubic-bezier(.2, .8, .2, 1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg-main: #070b14;
    --bg-card: #101827;
    --bg-muted: #0b1220;
    --bg-elevated: rgba(16, 24, 39, .84);
    --bg-hero: radial-gradient(circle at 12% 8%, rgba(59, 130, 246, .18), transparent 28%), radial-gradient(circle at 88% 6%, rgba(239, 35, 60, .14), transparent 22%), linear-gradient(180deg, #070b14 0%, #0b1220 100%);
    --text-primary: #f8fafc;
    --text-secondary: #cbd5e1;
    --text-muted: #94a3b8;
    --text-inverse: #07111f;
    --border-default: #1e293b;
    --border-strong: #334155;
    --border-soft: rgba(51, 65, 85, .76);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, .18);
    --shadow-md: 0 14px 36px rgba(0, 0, 0, .26);
    --shadow-lg: 0 32px 80px rgba(0, 0, 0, .34);
  }
}