/* =========================================================================
   tokens.css — design tokens del CRM extraídos de los mockups v2.
   ---------------------------------------------------------------------------
   Objetivo: fuente única de verdad para colores de marca, tipografía,
   radios, sombras y gradientes. Todos los templates derivan su estilo
   de estos tokens vía Tailwind utilities y las clases semánticas de
   crm.css (.tag, .spark, .score-circle, etc.).
   ========================================================================= */

:root {
  /* ---- Brand palette (indigo → violet) ---- */
  --brand-50:   #eef2ff;
  --brand-100:  #e0e7ff;
  --brand-500:  #6366f1;
  --brand-600:  #4f46e5;
  --brand-700:  #4338ca;
  --violet-500: #8b5cf6;
  --violet-600: #7c3aed;

  /* ---- Semánticos ---- */
  --ok-500:     #10b981;   /* emerald-500 */
  --teal-600:   #0d9488;
  --warn-500:   #f59e0b;   /* amber-500 */
  --warn-600:   #d97706;
  --risk-500:   #f43f5e;   /* rose-500 */
  --risk-600:   #e11d48;
  --sky-500:    #0ea5e9;

  /* ---- Superficies (light) ---- */
  --surface-0:      #ffffff;
  --surface-50:     #f8fafc;   /* slate-50 */
  --surface-100:    #f1f5f9;   /* slate-100 */
  --surface-border: #e2e8f0;   /* slate-200 */

  /* ---- Gradientes ---- */
  --gradient-brand:    linear-gradient(135deg, var(--brand-500), var(--violet-600));
  --gradient-ok:       linear-gradient(135deg, var(--ok-500), var(--teal-600));
  --gradient-bg-light: linear-gradient(135deg, #eef2ff 0%, #ffffff 50%, #ede9fe 100%);

  /* ---- Tipografía ---- */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui,
               Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  /* ---- Radios ---- */
  --radius-sm:   0.375rem;   /* rounded-md */
  --radius-md:   0.5rem;     /* rounded-lg */
  --radius-lg:   0.75rem;    /* rounded-xl */
  --radius-xl:   1rem;       /* rounded-2xl */
  --radius-full: 9999px;

  /* ---- Sombras ---- */
  --shadow-soft:  0 2px 12px -4px rgba(15, 23, 42, 0.08);
  --shadow-lift:  0 12px 28px -8px rgba(15, 23, 42, 0.25);
  --shadow-ring:  0 0 0 3px rgba(99, 102, 241, 0.18);
}

/* ---- Superficies (dark) ---- */
.dark {
  --surface-0:      #0f172a;   /* slate-950 */
  --surface-50:     #1e293b;   /* slate-800 */
  --surface-100:    #334155;   /* slate-700 */
  --surface-border: #1e293b;   /* slate-800 */
}

/* ---- Base typography · aplica a todas las pages del CRM ---- */
html,
body {
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code,
kbd,
pre,
samp,
.font-mono,
[class*="text-[1"] code {
  font-family: var(--font-mono);
}

/* ---- Utility gradients accesibles como clases ---- */
.brand-gradient {
  background-image: var(--gradient-brand);
}
.ok-gradient {
  background-image: var(--gradient-ok);
}