/* ============================================================
   SEPA Club Fuencarral — Design Tokens
   Sistema de diseño A LA PAR · tokens.css
   ============================================================
   CAPA 1: Primitivos (valores base, no usar directamente)
   CAPA 2: Semánticos (alias con propósito — usar estos)
   CAPA 3: Componentes (tokens específicos por componente)

   Cache-busting: cargar con ?v=APP_VERSION en los <link>
   ============================================================ */

:root {

  /* ── CAPA 1: Primitivos ─────────────────────────────────── */
  --primitive-teal-500:    #2e99a1;
  --primitive-teal-700:    #236f75;
  --primitive-teal-50:     #e8f6f7;
  --primitive-teal-bg:     #f0fafb;
  --primitive-gray-900:    #2d2d2d;
  --primitive-gray-600:    #595959;
  --primitive-gray-200:    #e8e8e8;
  --primitive-white:       #ffffff;
  --primitive-red-600:     #c0392b;
  --primitive-amber-600:   #b87000;
  --primitive-green-700:   #1e8a49;
  --primitive-blue-600:    #2563eb;
  --primitive-navy:        #0f172a;

  /* Colores de área A LA PAR */
  --primitive-vida:        #ff6f61;
  --primitive-empleo:      #e89e0d;
  --primitive-formacion:   #6b9dff;
  --primitive-ocio:        #e5007d;
  --primitive-psico:       #b57edc;


  /* ── CAPA 2: Semánticos ─────────────────────────────────── */

  /* Marca */
  --color-primary:         var(--primitive-teal-500);
  --color-primary-dark:    var(--primitive-teal-700);
  --color-primary-light:   var(--primitive-teal-50);
  --color-primary-bg:      var(--primitive-teal-bg);

  /* Áreas */
  --color-vida:            var(--primitive-vida);
  --color-empleo:          var(--primitive-empleo);
  --color-formacion:       var(--primitive-formacion);
  --color-ocio:            var(--primitive-ocio);
  --color-psico:           var(--primitive-psico);

  /* Estado */
  --color-success:         var(--primitive-green-700);
  --color-warning:         var(--primitive-amber-600);
  --color-error:           var(--primitive-red-600);
  --color-info:            var(--primitive-blue-600);

  /* Texto — contraste ≥7:1 sobre blanco (WCAG AAA) */
  --color-text:            var(--primitive-gray-900);
  --color-text-muted:      var(--primitive-gray-600);

  /* Fondos */
  --color-bg:              var(--primitive-white);
  --color-bg-surface:      #f8fafb;
  --color-bg-page:         #f0f4f5;   /* igual al bg del SGSI */
  --color-border:          rgba(46, 153, 161, 0.15);

  /* Feedback de estado — fondos suaves */
  --color-success-bg:      #e8f6f0;
  --color-success-text:    #1a5e35;
  --color-warning-bg:      #fdf3e0;
  --color-warning-text:    #7a5200;
  --color-error-bg:        #fde8e6;
  --color-error-text:      #8b1a1a;
  --color-info-bg:         var(--primitive-teal-50);
  --color-info-text:       var(--primitive-teal-700);


  /* ── Tipografía ─────────────────────────────────────────── */
  /* Inter: diseñada para interfaces, excelente legibilidad en tablas y datos */
  --font-family:           'Inter', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
  --font-mono:             'JetBrains Mono', 'Courier New', monospace;

  --text-xs:               0.75rem;    /*  12px */
  --text-sm:               0.875rem;   /*  14px */
  --text-base:             1rem;       /*  16px */
  --text-lg:               1.125rem;   /*  18px */
  --text-xl:               1.375rem;   /*  22px */
  --text-2xl:              1.75rem;    /*  28px */
  --text-3xl:              2.25rem;    /*  36px */

  --font-light:            300;
  --font-normal:           400;
  --font-semibold:         400;  /* Josefin Sans 400 = semibold visual */
  --font-bold:             600;


  /* ── Espaciado (múltiplos de 4px) ───────────────────────── */
  --space-1:               0.25rem;   /*  4px */
  --space-2:               0.5rem;    /*  8px */
  --space-3:               0.75rem;   /* 12px */
  --space-4:               1rem;      /* 16px */
  --space-5:               1.25rem;   /* 20px */
  --space-6:               1.5rem;    /* 24px */
  --space-8:               2rem;      /* 32px */
  --space-10:              2.5rem;    /* 40px */
  --space-12:              3rem;      /* 48px */
  --space-16:              4rem;      /* 64px */


  /* ── Forma ──────────────────────────────────────────────── */
  --radius-xs:             4px;
  --radius-sm:             8px;
  --radius-md:             14px;
  --radius-lg:             20px;
  --radius-full:           9999px;


  /* ── Sombras con tinte teal ─────────────────────────────── */
  --shadow-sm:             0 2px 8px  rgba(46, 153, 161, 0.10);
  --shadow-md:             0 4px 16px rgba(46, 153, 161, 0.14);
  --shadow-lg:             0 8px 32px rgba(46, 153, 161, 0.18);
  --shadow-xl:             0 16px 48px rgba(46, 153, 161, 0.22);


  /* ── Transiciones ───────────────────────────────────────── */
  --transition:            0.18s ease;
  --transition-slow:       0.30s ease;


  /* ── CAPA 3: Tokens de componente ───────────────────────── */

  /* Botón primario */
  --btn-primary-bg:        var(--color-primary);
  --btn-primary-text:      var(--primitive-white);
  --btn-primary-hover:     var(--color-primary-dark);

  /* Botón secundario */
  --btn-secondary-bg:      transparent;
  --btn-secondary-border:  var(--color-primary);
  --btn-secondary-text:    var(--color-primary);
  --btn-secondary-hover-bg: var(--color-primary-light);

  /* Inputs */
  --input-border:          var(--color-border);
  --input-focus-border:    var(--color-primary);
  --input-error-border:    var(--color-error);
  --input-bg:              var(--color-bg);
  --input-text:            var(--color-text);

  /* Cards */
  --card-bg:               var(--color-bg);
  --card-border:           var(--color-border);
  --card-shadow:           var(--shadow-sm);
  --card-radius:           var(--radius-md);

  /* Navegación — sidebar degradado teal (igual SGSI·Proyectos A LA PAR) */
  --teal-xdark:            #0f4a50;          /* teal muy oscuro — inicio del degradado */
  --teal-dark:             #1e6e75;          /* teal oscuro */
  /* El sidebar usa un degradado: #0f4a50 → #1e6e75 → #2e99a1 */
  --nav-bg:                linear-gradient(170deg, #0f4a50 0%, #1e6e75 60%, #2e99a1 100%);
  --nav-bg-solid:          #0f4a50;          /* fallback sólido para collapsed */
  --nav-bg-hover:          rgba(255, 255, 255, 0.10);
  --nav-accent:            var(--color-primary);
  --nav-text:              rgba(255, 255, 255, 0.72);
  --nav-text-active:       #ffffff;
  --nav-item-active-bg:    rgba(255, 255, 255, 0.18);
  --nav-section-text:      rgba(255, 255, 255, 0.38);
  --nav-border:            rgba(255, 255, 255, 0.10);

  /* Sidebar */
  --sidebar-width:         260px;
  --sidebar-collapsed-width: 68px;
  --topbar-height:         64px;

  /* Wizard (formulario SEPA en pasos) */
  --wizard-step-active:    var(--color-primary);
  --wizard-step-done:      var(--color-success);
  --wizard-step-pending:   var(--color-border);
}


/* ── Modo oscuro — detección automática ─────────────────────── */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg:            #0f1f20;
    --color-bg-surface:    #192c2e;
    --color-bg-page:       #0b1718;
    --color-text:          #e6f4f5;
    --color-text-muted:    #9bbfc2;
    --color-border:        #2a4a4c;
    --color-primary-light: #1a3a3c;
    --color-primary-bg:    #162829;
    --color-success-bg:    #0f2e1e;
    --color-success-text:  #6ee7b7;
    --color-error-bg:      #2d0f0f;
    --color-error-text:    #fca5a5;
    --color-warning-bg:    #2d1f00;
    --color-warning-text:  #fbbf24;
    --color-info-bg:       #1a3a3c;
    --color-info-text:     #9bbfc2;
    --input-bg:            #192c2e;
  }
}

/* ── Modo oscuro — toggle manual (data-theme="dark") ─────────── */
[data-theme="dark"] {
  --color-bg:              #0f1f20;
  --color-bg-surface:      #192c2e;
  --color-bg-page:         #0b1718;
  --color-text:            #e6f4f5;
  --color-text-muted:      #9bbfc2;
  --color-border:          #2a4a4c;
  --color-primary-light:   #1a3a3c;
  --color-primary-bg:      #162829;
  --color-success-bg:      #0f2e1e;
  --color-success-text:    #6ee7b7;
  --color-error-bg:        #2d0f0f;
  --color-error-text:      #fca5a5;
  --color-warning-bg:      #2d1f00;
  --color-warning-text:    #fbbf24;
  --color-info-bg:         #1a3a3c;
  --color-info-text:       #9bbfc2;
  --input-bg:              #192c2e;
}

/* ── Respetar preferencia de movimiento reducido ─────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:   0.01ms !important;
    transition-duration:  0.01ms !important;
  }
}