/**
 * DALLE Ostomía Segura - Design Tokens CSS (Identidad Oficial Blanco, Dorado y Azul Marino)
 * Arquitectura de 3 capas (Primitive -> Semantic -> Component) • WCAG 2.1 AA/AAA
 */

:root {
  /* =====================================================================
     1. PRIMITIVES (Paleta Oficial DALL·E: Blanco, Azul Marino y Dorado)
     ===================================================================== */
  --dalle-navy-950: #091E3A;
  --dalle-navy-900: #0D2E54; /* Azul marino oficial del isotipo DALL·E */
  --dalle-navy-800: #164070;
  --dalle-navy-700: #1E508A;
  --dalle-navy-100: #E8EFF8;
  --dalle-navy-50:  #F3F7FC;

  --dalle-gold-700: #785304; /* Dorado oscuro accesible AA/AAA sobre blanco (6.4:1) */
  --dalle-gold-600: #936609;
  --dalle-gold-500: #B5841A; /* Dorado oficial de la gota DALL·E */
  --dalle-gold-400: #D19F2E; /* Dorado luminoso sobre azul marino oscuro (7.1:1) */
  --dalle-gold-100: #F4E8C8;
  --dalle-gold-50:  #FBF6EA;

  --dalle-white:    #FFFFFF;
  --dalle-ivory:    #F6F8FC; /* Blanco perlado derivado del azul marino oficial */
  --dalle-mist:     #EEF3F9;
  --dalle-border:   #D9E2EC;

  --dalle-ink-900:  #0F1C2E;
  --dalle-ink-700:  #334155;
  --dalle-ink-500:  #526071; /* 5.8:1 sobre blanco */

  --dalle-success-700: #146C43;
  --dalle-success-50:  #ECFDF5;
  --dalle-warning-700: #9A5B00;
  --dalle-warning-50:  #FFFBEB;
  --dalle-danger-700:  #B42318;
  --dalle-danger-50:   #FEF3F2;

  /* =====================================================================
     2. TYPOGRAPHY & SPACING
     ===================================================================== */
  --dalle-font-sans:    'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --dalle-font-heading: 'IBM Plex Sans', system-ui, sans-serif;
  --dalle-font-serif:   'Playfair Display', Georgia, serif;

  --dalle-space-xs:  4px;
  --dalle-space-sm:  8px;
  --dalle-space-md:  16px;
  --dalle-space-lg:  24px;
  --dalle-space-xl:  32px;
  --dalle-space-2xl: 48px;
  --dalle-space-3xl: 64px;

  /* =====================================================================
     3. SEMANTIC TOKENS
     ===================================================================== */
  --color-primary:         var(--dalle-navy-900);
  --color-primary-hover:   var(--dalle-navy-800);
  --color-primary-surface: var(--dalle-navy-50);

  --color-gold-brand:      var(--dalle-gold-500);
  --color-gold-text-light: var(--dalle-gold-700);
  --color-gold-text-dark:  var(--dalle-gold-400);
  --color-gold-surface:    var(--dalle-gold-50);

  --color-text-dark:       var(--dalle-ink-900);
  --color-text-body:       var(--dalle-ink-700);
  --color-text-muted:      var(--dalle-ink-500);
  --color-bg-page:         var(--dalle-ivory);
  --color-bg-surface:      var(--dalle-white);
  --color-border-subtle:   var(--dalle-border);

  /* Elevación sutil clínica */
  --dalle-shadow-card:     0 12px 32px -12px rgba(13, 46, 84, 0.08), 0 2px 6px -1px rgba(13, 46, 84, 0.04);
  --dalle-shadow-floating: 0 24px 54px -16px rgba(9, 30, 58, 0.18);
  --dalle-focus-ring:      0 0 0 3px rgba(13, 46, 84, 0.28);
}

/* Utilidades globales de accesibilidad WCAG 2.1 AA/AAA */
.skip-link {
  position: absolute;
  top: -120px;
  left: 16px;
  z-index: 1000;
  background: var(--dalle-navy-950);
  color: var(--dalle-white);
  border: 2px solid var(--dalle-gold-400);
  padding: 12px 20px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 0.875rem;
  transition: top 0.15s ease;
}

.skip-link:focus {
  top: 16px;
  outline: none;
}

:focus-visible {
  outline: 2.5px solid var(--dalle-navy-900) !important;
  outline-offset: 2px !important;
  box-shadow: var(--dalle-focus-ring);
}

.bg-navy-surface :focus-visible,
[data-theme="navy"] :focus-visible {
  outline-color: var(--dalle-gold-400) !important;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}