/* ============================================================================
 * tokens.css — Variables CSS canónicas Ensaladas Green
 * Sistema de design tokens semántico con soporte light/dark
 * Pilar 7: accesibilidad (contraste WCAG AA en ambos temas)
 * ============================================================================ */

:root {
  /* === COLORES MARCA (raw, no usar directamente en componentes) === */
  --green-primary: #2D7A2D;
  --green-energy:  #9ACD32;
  --green-deep:    #1B4332;
  --green-leaf:    #4CAF50;

  /* === SEMAFOROS RAW === */
  --raw-success: #16A34A;
  --raw-warning: #F59E0B;
  --raw-error:   #DC2626;
  --raw-info:    #0EA5E9;

  /* === ACENTOS === */
  --tomate: #E63946;
  --miel:   #F4A261;

  /* === TIPOGRAFÍA === */
  --font-display: 'Fraunces', Georgia, serif;
  --font-heading: 'Inter Tight', 'Inter', system-ui, -apple-system, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', 'Courier New', monospace;

  /* === ESPACIADO (base 4px) === */
  --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;

  /* === RADIUS === */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-xl:   20px;
  --radius-full: 9999px;

  /* === ANIMACIONES === */
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 400ms;
  --easing-default: cubic-bezier(0.4, 0, 0.2, 1);

  /* === TOUCH TARGETS (Pilar 7) === */
  --touch-min: 44px;
  --touch-comfortable: 48px;

  /* === Z-INDEX === */
  --z-base:           1;
  --z-dropdown:       100;
  --z-sticky:         200;
  --z-modal-backdrop: 900;
  --z-modal:         1000;
  --z-toast:         1100;
}

/* ============================================================================
 * Tema CLARO (default)
 * ============================================================================ */
:root,
:root[data-theme="light"] {
  /* Superficies */
  --surface-base:   #FAFAF7;
  --surface-card:   #FFFFFF;
  --surface-elev:   #F4F5F1;
  --surface-input:  #FFFFFF;
  --surface-overlay: rgba(31, 41, 55, 0.5);

  /* Texto */
  --text-primary:   #1F2937;
  --text-secondary: #4B5563;
  --text-muted:     #6B7280;
  --text-disabled:  #9CA3AF;
  --text-on-brand:  #FFFFFF;

  /* Bordes */
  --border-soft:    #E8EAE6;
  --border-strong:  #D1D5DB;

  /* Estados */
  --success-soft:   #DCFCE7;
  --success-strong: #15803D;
  --success-border: #86EFAC;

  --warning-soft:   #FEF3C7;
  --warning-strong: #B45309;
  --warning-border: #FCD34D;

  --danger-soft:    #FEE2E2;
  --danger-strong:  #B91C1C;
  --danger-border:  #FCA5A5;

  --info-soft:      #DBEAFE;
  --info-strong:    #1D4ED8;
  --info-border:    #93C5FD;

  /* Sombras */
  --shadow-sm: 0 1px 2px 0 rgba(31, 41, 55, 0.04);
  --shadow-md: 0 4px 8px -2px rgba(31, 41, 55, 0.08);
  --shadow-lg: 0 12px 24px -6px rgba(31, 41, 55, 0.10);
  --shadow-xl: 0 24px 48px -12px rgba(31, 41, 55, 0.18);
  --shadow-glow-green: 0 0 0 4px rgba(45, 122, 45, 0.15);

  /* Brand accent (mantiene color) */
  --brand-bg-soft: #E8F5E9;
  --brand-fg:      var(--green-primary);
  --brand-strong:  var(--green-deep);
}

/* ============================================================================
 * Tema OSCURO
 * ============================================================================ */
:root[data-theme="dark"] {
  /* Superficies */
  --surface-base:   #0E1410;
  --surface-card:   #161D18;
  --surface-elev:   #1F2823;
  --surface-input:  #1A211C;
  --surface-overlay: rgba(0, 0, 0, 0.65);

  /* Texto */
  --text-primary:   #F1F5F2;
  --text-secondary: #C3CCC6;
  --text-muted:     #909A93;
  --text-disabled:  #5A645E;
  --text-on-brand:  #FFFFFF;

  /* Bordes */
  --border-soft:    #232B26;
  --border-strong:  #2F3933;

  /* Estados */
  --success-soft:   #0F2A1A;
  --success-strong: #6EE7B7;
  --success-border: #1F5638;

  --warning-soft:   #2A1F0A;
  --warning-strong: #FBBF24;
  --warning-border: #5C4318;

  --danger-soft:    #2A0F11;
  --danger-strong:  #FCA5A5;
  --danger-border:  #5C1F22;

  --info-soft:      #0E2138;
  --info-strong:    #93C5FD;
  --info-border:    #1F3D6B;

  /* Sombras (más sutil en oscuro) */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
  --shadow-md: 0 4px 8px -2px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 12px 24px -6px rgba(0, 0, 0, 0.4);
  --shadow-xl: 0 24px 48px -12px rgba(0, 0, 0, 0.5);
  --shadow-glow-green: 0 0 0 4px rgba(154, 205, 50, 0.25);

  /* Brand accent en dark (verde más vivo) */
  --brand-bg-soft: #1A3520;
  --brand-fg:      #7BC97B;
  --brand-strong:  #9ACD32;
}

/* ============================================================================
 * Respeta preferencia del sistema si NO hay override manual
 * ============================================================================ */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --surface-base:   #0E1410;
    --surface-card:   #161D18;
    --surface-elev:   #1F2823;
    --surface-input:  #1A211C;
    --surface-overlay: rgba(0, 0, 0, 0.65);
    --text-primary:   #F1F5F2;
    --text-secondary: #C3CCC6;
    --text-muted:     #909A93;
    --text-disabled:  #5A645E;
    --border-soft:    #232B26;
    --border-strong:  #2F3933;
    --success-soft:   #0F2A1A;
    --success-strong: #6EE7B7;
    --success-border: #1F5638;
    --warning-soft:   #2A1F0A;
    --warning-strong: #FBBF24;
    --warning-border: #5C4318;
    --danger-soft:    #2A0F11;
    --danger-strong:  #FCA5A5;
    --danger-border:  #5C1F22;
    --brand-bg-soft:  #1A3520;
    --brand-fg:       #7BC97B;
    --brand-strong:   #9ACD32;
  }
}

/* Alias retro-compatibles con código existente */
:root {
  --white-warm: var(--surface-base);
  --gray-mist:  var(--border-soft);
  --gray-stone: var(--text-muted);
  --charcoal:   var(--text-primary);
  --success:    var(--success-strong);
  --warning:    var(--warning-strong);
  --error:      var(--danger-strong);
  --info:       var(--info-strong);
}