/**
 * WICLEE — Design tokens
 * Cargar antes de styles.css en head.
 *
 * Colores alineados con el logo oficial y la landing pública:
 * - Primary (turquesa): #40E0D0  — "W" y "clee" del logo
 * - Accent  (amarillo): #FBBF24  — punto de la "i" del logo
 *
 * Ref: AGENTS.md §5 — No usar hex hardcodeados en componentes;
 * usar siempre estos tokens.
 * Ref: comparativa-colores-landing-tokens.md — Auditoría de paleta.
 */

:root {
  /* ========== MARCA — Colores del logo WICLEE ========== */

  /* Primary: Turquesa del logo / landing (#40E0D0) */
  --wiclee-primary: #40E0D0;
  --wiclee-primary-rgb: 64, 224, 208;
  --wiclee-primary-50: #ecfaf8;
  --wiclee-primary-100: #d0f4ef;
  --wiclee-primary-200: #a0e9df;
  --wiclee-primary-300: #70ded0;
  --wiclee-primary-400: #50e2d4;
  --wiclee-primary-500: #40E0D0;  /* Base = logo / landing */
  --wiclee-primary-600: #20B2AA;  /* Hover — turquesa oscuro landing */
  --wiclee-primary-700: #1a9690;  /* Active */
  --wiclee-primary-800: #147a76;
  --wiclee-primary-900: #0d5e5b;

  /* Muted: Versión desaturada del primary para fondos suaves */
  --wiclee-primary-muted: #8ec5c1;
  --wiclee-primary-overlay: rgba(64, 224, 208, 0.2);
  --wiclee-primary-overlay-strong: rgba(64, 224, 208, 0.55);

  /* Accent: Amarillo del logo / CTA landing (#FBBF24) */
  --wiclee-accent: #FBBF24;
  --wiclee-accent-rgb: 251, 191, 36;
  --wiclee-accent-50: #fef7e4;
  --wiclee-accent-100: #fef0ca;
  --wiclee-accent-200: #fde499;
  --wiclee-accent-300: #FCD34D;  /* Tailwind yellow-300 — texto highlight */
  --wiclee-accent-400: #fcc939;
  --wiclee-accent-500: #FBBF24;  /* Base = botón CTA landing */
  --wiclee-accent-600: #d9a51e;  /* Hover */
  --wiclee-accent-700: #b78b19;  /* Active */

  /* Legacy: Mantener compatibilidad temporal con código antiguo */
  --wiclee-secondary: #FBBF24;  /* Alias de accent */

  /* Surface colors (fondos derivados de la marca) */
  --wiclee-logo-wi-bg: #a0e9df;          /* Basado en primary-200 */
  --wiclee-logo-wi-bg-light: #ecfaf8;    /* Basado en primary-50 */
  --wiclee-logo-wi-border-light: #70ded0;
  --wiclee-logo-clee-fg: #0d5e5b;        /* Primary-900 para contraste */
  --wiclee-primary-surface: var(--wiclee-logo-wi-bg);
  --wiclee-primary-surface-border: #50e2d4;
  --wiclee-primary-icon-strong: var(--wiclee-logo-clee-fg);

  /* Gradiente y sombra de marca (alineados con landing) */
  --wiclee-gradient-brand: linear-gradient(135deg, #40E0D0 0%, #20B2AA 100%);
  --wiclee-shadow-brand: 0 10px 30px rgba(64, 224, 208, 0.3);

  /* ========== ESTADOS SEMÁNTICOS ========== */
  --wiclee-success: #22c55e;       /* Verde éxito moderno */
  --wiclee-success-dark: #16a34a;  /* Hover */
  --wiclee-danger: #ef4444;        /* Rojo error */
  --wiclee-danger-strong: #dc2626; /* Error intenso */
  --wiclee-warning: #f59e0b;       /* Naranja warning */
  --wiclee-warning-soft: #fbbf24;  /* Warning suave */
  --wiclee-info: #0ea5e9;          /* Azul info */
  --wiclee-neutral: #6b7280;       /* Gris neutro */
  --wiclee-muted: #9ca3af;         /* Gris suave */

  /* Fondos suaves para badges y estados */
  --wiclee-success-bg: #dcfce7;
  --wiclee-danger-bg: #fee2e2;
  --wiclee-warning-bg: #fef3c7;
  --wiclee-info-bg: #e0f2fe;
  --wiclee-neutral-bg: #f3f4f6;
  --wiclee-warning-text: #92400e;

  /* Estado limpieza apartamento (CRM/portal): pastilla “Con/Sin” — brand primary (turquesa) */
  --wiclee-limpieza-operativa-bg-si: var(--wiclee-primary);
  --wiclee-limpieza-operativa-fg-si: var(--wiclee-text-inverse);
  --wiclee-limpieza-operativa-border-si: var(--wiclee-primary-600);
  --wiclee-limpieza-operativa-bg-no: var(--wiclee-neutral-bg);
  --wiclee-limpieza-operativa-fg-no: var(--wiclee-text-muted);
  --wiclee-limpieza-operativa-border-no: var(--wiclee-border);

  /* ========== FONDOS Y BORDES ========== */
  --wiclee-bg-page: #f8fafc;       /* Fondo página muy suave */
  --wiclee-bg-card: #ffffff;       /* Tarjetas blancas */
  --wiclee-bg-stripe-subtle: #f1f5f9;
  --wiclee-bg-table-stripe-mint: var(--wiclee-logo-wi-bg-light);
  --wiclee-bg-muted: #f1f5f9;
  --wiclee-border: #e2e8f0;        /* Bordes sutiles */
  --wiclee-border-strong: #cbd5e1; /* Bordes más visibles */
  --wiclee-text: #1e293b;          /* Texto principal (slate-800) */
  --wiclee-text-secondary: #475569; /* Texto secundario (slate-600) */
  --wiclee-text-muted: #64748b;    /* Texto atenuado (slate-500) */
  --wiclee-text-inverse: #ffffff;  /* Texto sobre fondos oscuros */

  /* ========== TIPOGRAFÍA ========== */
  --wiclee-font-size-2xs: 0.625rem; /* 10px — rejillas muy densas (p. ej. interior calendario móvil) */
  --wiclee-font-size-xs: 0.75rem;   /* 12px */
  --wiclee-font-size-sm: 0.875rem;  /* 14px */
  --wiclee-font-size-md: 1rem;      /* 16px */
  --wiclee-font-size-lg: 1.25rem;   /* 20px */
  --wiclee-font-size-xl: 1.5rem;    /* 24px */
  --wiclee-font-size-2xl: 2rem;     /* 32px */
  --wiclee-font-weight-normal: 400;
  --wiclee-font-weight-medium: 500;
  --wiclee-font-weight-bold: 600;
  --wiclee-font-weight-extrabold: 700;

  /* ========== ESPACIADO ========== */
  --wiclee-space-xs: 0.25rem;   /* 4px */
  --wiclee-space-sm: 0.5rem;    /* 8px */
  --wiclee-space-md: 1rem;      /* 16px */
  --wiclee-space-lg: 1.5rem;    /* 24px */
  --wiclee-space-xl: 2rem;      /* 32px */
  --wiclee-space-2xl: 3rem;     /* 48px */

  /* ========== BORDES Y RADIOS ========== */
  --wiclee-radius-sm: 4px;
  --wiclee-radius-md: 6px;
  --wiclee-radius-lg: 8px;
  --wiclee-radius-xl: 12px;
  --wiclee-radius-2xl: 16px;
  --wiclee-radius-full: 9999px;

  /* ========== SOMBRAS ========== */
  --wiclee-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --wiclee-shadow-card: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --wiclee-shadow-card-subtle: 0 2px 4px rgba(0, 0, 0, 0.06);
  --wiclee-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);

  /* ========== PALETA CHARTS (gráficos KPI) ========== */
  --wiclee-chart-primary: var(--wiclee-primary-500);
  --wiclee-chart-primary-light: var(--wiclee-primary-200);
  --wiclee-chart-accent: var(--wiclee-accent-500);
  --wiclee-chart-accent-light: var(--wiclee-accent-200);
  --wiclee-chart-cost: #f87171;
  --wiclee-chart-cost-light: #fecaca;
  --wiclee-chart-info: var(--wiclee-info);
  --wiclee-chart-neutral: var(--wiclee-neutral);
  --wiclee-chart-grid: var(--wiclee-border);
  --wiclee-chart-label: var(--wiclee-text-muted);

  /* ========== SCROLLBARS ========== */
  --wiclee-scroll-track-bg: var(--wiclee-logo-wi-bg-light);
  --wiclee-scroll-thumb-bg: var(--wiclee-logo-wi-bg);
  --wiclee-scroll-thumb-bg-hover: var(--wiclee-primary);
  /* Grosor barra vertical y horizontal (WebKit/Blink). ~15px: más cómodo en ratón y táctil */
  --wiclee-scroll-bar-size: 15px;
}