/**
 * Plantados 360 — Identidad Visual (Semilla)
 *
 * Paleta base: https://coolors.co/palette/22577a-38a3a5-57cc99-80ed99-c7f9cc
 * Fecha: 2026-02-08
 *
 * NOTA: Este archivo es la semilla de la identidad visual.
 * Se enriquecerá con: tipografía definitiva, iconografía, logo,
 * espaciado, sombras, componentes de marca, etc.
 *
 * Para migración a Envato: estos tokens CSS se trasladan como
 * variables del tema de la plantilla elegida.
 */

:root {
  /* ============================
     PALETA PRINCIPAL — Coolors
     ============================ */

  /* Midnight Green — Profundidad, confianza, autoridad */
  --plant-900: #22577A;

  /* Viridian Green — Crecimiento profesional, madurez */
  --plant-700: #38A3A5;

  /* Emerald — Vida, transformación, avance */
  --plant-500: #57CC99;

  /* Light Green — Energía, optimismo, nuevos comienzos */
  --plant-300: #80ED99;

  /* Aero Blue — Frescura, ligereza, claridad */
  --plant-100: #C7F9CC;


  /* ============================
     DERIVADOS FUNCIONALES
     ============================ */

  /* Texto */
  --text-primary: #1a2332;
  --text-secondary: #475569;
  --text-muted: #94a3b8;
  --text-inverse: #ffffff;

  /* Fondos */
  --bg-app: #f8fafb;
  --bg-card: #ffffff;
  --bg-sidebar: #ffffff;
  --bg-highlight: var(--plant-100);

  /* Bordes */
  --border-light: #e2e8f0;
  --border-medium: #cbd5e1;

  /* Acciones */
  --action-primary: var(--plant-900);
  --action-primary-hover: #1a4562;
  --action-secondary: var(--plant-500);
  --action-secondary-hover: #44b882;

  /* Estados */
  --state-free: var(--plant-300);
  --state-free-bg: var(--plant-100);
  --state-paid: #8B5CF6;
  --state-paid-bg: #ede9fe;
  --state-conversion: #F59E0B;
  --state-conversion-bg: #fef3c7;
  --state-pending: #EF4444;
  --state-pending-bg: #fee2e2;
  --state-demo: #3B82F6;
  --state-demo-bg: #e0e7ff;

  /* Actores del ciclo */
  --actor-client: var(--plant-300);
  --actor-client-bg: var(--plant-100);
  --actor-ia: #93c5fd;
  --actor-ia-bg: #dbeafe;
  --actor-consultant: #c4b5fd;
  --actor-consultant-bg: #ede9fe;

  /* Sombras */
  --shadow-sm: 0 1px 2px rgba(34, 87, 122, 0.06);
  --shadow-md: 0 4px 12px rgba(34, 87, 122, 0.08);
  --shadow-lg: 0 8px 24px rgba(34, 87, 122, 0.12);

  /* Radios */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-full: 9999px;

  /* Transiciones */
  --transition-fast: 150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow: 400ms ease;


  /* ============================
     SEMÁNTICA DE MARCA
     ============================ */

  /*
   * La metáfora central de Plantados es botánica:
   *
   * 🌱 Semilla    → Inicio, diagnóstico (plant-100, plant-300)
   * 🌿 Brote      → Crecimiento temprano (plant-300, plant-500)
   * 🌳 Árbol      → Madurez, estructura (plant-500, plant-700)
   * 🌳🌼 Floración → Identidad definida (plant-700)
   * 🌳🍎 Fruto    → Resultados, valor (plant-900)
   *
   * Los colores de la paleta siguen esta progresión:
   * Más claro = más temprano en el proceso
   * Más oscuro = más avanzado, más profundo
   */

  --stage-diagnostico: var(--plant-300);
  --stage-identidad: var(--plant-500);
  --stage-estructura: var(--plant-700);
  --stage-destino: var(--plant-900);
}


/* ============================
   OVERRIDES PARA TAILWIND CDN
   ============================ */

/* Estos overrides aplican la paleta Plantados sobre Tailwind */

.bg-plant-primary { background-color: var(--plant-900); }
.bg-plant-secondary { background-color: var(--plant-700); }
.bg-plant-accent { background-color: var(--plant-500); }
.bg-plant-light { background-color: var(--plant-300); }
.bg-plant-lightest { background-color: var(--plant-100); }

.text-plant-primary { color: var(--plant-900); }
.text-plant-secondary { color: var(--plant-700); }
.text-plant-accent { color: var(--plant-500); }

.border-plant-primary { border-color: var(--plant-900); }
.border-plant-accent { border-color: var(--plant-500); }
.border-plant-light { border-color: var(--plant-100); }

/* Gradientes de marca */
.gradient-plant-hero {
  background: linear-gradient(135deg, var(--plant-900) 0%, var(--plant-700) 50%, var(--plant-500) 100%);
}

.gradient-plant-subtle {
  background: linear-gradient(135deg, var(--plant-100) 0%, #f0fdf4 100%);
}

.gradient-plant-card {
  background: linear-gradient(to right, var(--plant-100), #f0fdf4);
}