/* FÉNIX 360 — CORE BUNDLE V1
   AUTO-GENERATED. Edit source modules, then rebuild. */

/* >>> core/tokens.css >>> */
/* ========================================================================== 
   FÉNIX 360 — THEME CORE P01
   Archivo: tokens.css
   Propósito: escala cromática y tokens físicos. No usar estos tokens como
   semántica de negocio directamente; theme-*.css hace esa traducción.
   ========================================================================== */

:root {
  /* Brand / Facebook-like blue */
  --fx-blue-50:  #f0f7ff;
  --fx-blue-100: #e1efff;
  --fx-blue-200: #c7e0ff;
  --fx-blue-300: #9ec8ff;
  --fx-blue-400: #69a7ff;
  --fx-blue-500: #1877f2;
  --fx-blue-600: #166fe5;
  --fx-blue-700: #0f5fc7;
  --fx-blue-800: #114e9b;
  --fx-blue-900: #123f78;
  --fx-blue-950: #0b274c;

  /* Neutral / slate */
  --fx-slate-0:   #ffffff;
  --fx-slate-50:  #f8fafc;
  --fx-slate-100: #f1f5f9;
  --fx-slate-200: #e2e8f0;
  --fx-slate-300: #cbd5e1;
  --fx-slate-400: #94a3b8;
  --fx-slate-500: #64748b;
  --fx-slate-600: #475569;
  --fx-slate-700: #334155;
  --fx-slate-800: #1e293b;
  --fx-slate-900: #0f172a;
  --fx-slate-950: #020617;

  /* Semantic physical palettes */
  --fx-green-50:  #f0fdf4;
  --fx-green-100: #dcfce7;
  --fx-green-500: #22c55e;
  --fx-green-600: #16a34a;
  --fx-green-700: #15803d;

  --fx-amber-50:  #fffbeb;
  --fx-amber-100: #fef3c7;
  --fx-amber-500: #f59e0b;
  --fx-amber-600: #d97706;
  --fx-amber-700: #b45309;

  --fx-red-50:  #fef2f2;
  --fx-red-100: #fee2e2;
  --fx-red-500: #ef4444;
  --fx-red-600: #dc2626;
  --fx-red-700: #b91c1c;

  --fx-cyan-50:  #ecfeff;
  --fx-cyan-100: #cffafe;
  --fx-cyan-500: #06b6d4;
  --fx-cyan-600: #0891b2;
  --fx-cyan-700: #0e7490;

  /* Radius */
  --fx-radius-xs: 6px;
  --fx-radius-sm: 8px;
  --fx-radius-md: 12px;
  --fx-radius-lg: 16px;
  --fx-radius-xl: 20px;
  --fx-radius-pill: 999px;

  /* Spacing */
  --fx-space-1: 4px;
  --fx-space-2: 8px;
  --fx-space-3: 12px;
  --fx-space-4: 16px;
  --fx-space-5: 20px;
  --fx-space-6: 24px;
  --fx-space-8: 32px;
  --fx-space-10: 40px;

  /* Elevation */
  --fx-shadow-xs: 0 1px 2px rgba(15, 23, 42, .05);
  --fx-shadow-sm: 0 4px 12px rgba(15, 23, 42, .06);
  --fx-shadow-md: 0 10px 30px rgba(15, 23, 42, .09);
  --fx-shadow-lg: 0 18px 50px rgba(15, 23, 42, .13);

  /* Motion */
  --fx-duration-fast: 120ms;
  --fx-duration-normal: 180ms;
  --fx-duration-slow: 260ms;
  --fx-ease-standard: cubic-bezier(.2, .8, .2, 1);

  /* Focus */
  --fx-focus-width: 3px;
}

/* <<< core/tokens.css <<< */

/* >>> core/theme-light.css >>> */
/* FÉNIX 360 — semantic theme: LIGHT */
:root,
html[data-fx-theme="light"] {
  color-scheme: light;

  /* Brand */
  --fx-color-primary: var(--fx-blue-500);
  --fx-color-primary-hover: var(--fx-blue-600);
  --fx-color-primary-active: var(--fx-blue-700);
  --fx-color-primary-strong: var(--fx-blue-800);
  --fx-color-primary-soft: #eaf3ff;
  --fx-color-primary-soft-hover: #dcecff;
  --fx-color-primary-border: #cfe2ff;
  --fx-color-on-primary: #ffffff;

  /* App surfaces */
  --fx-color-bg-app: #f5f7fb;
  --fx-color-bg-subtle: var(--fx-slate-50);
  --fx-color-surface: #ffffff;
  --fx-color-surface-raised: #ffffff;
  --fx-color-surface-muted: var(--fx-slate-100);
  --fx-color-surface-hover: #f8fafc;

  /* Text */
  --fx-color-text: #172033;
  --fx-color-text-strong: var(--fx-slate-900);
  --fx-color-text-muted: var(--fx-slate-500);
  --fx-color-text-subtle: var(--fx-slate-400);
  --fx-color-text-disabled: var(--fx-slate-400);

  /* Borders */
  --fx-color-border: var(--fx-slate-200);
  --fx-color-border-strong: var(--fx-slate-300);

  /* Semantics */
  --fx-color-success: var(--fx-green-600);
  --fx-color-success-hover: var(--fx-green-700);
  --fx-color-success-soft: var(--fx-green-50);
  --fx-color-success-border: var(--fx-green-100);

  --fx-color-warning: var(--fx-amber-600);
  --fx-color-warning-hover: var(--fx-amber-700);
  --fx-color-warning-soft: var(--fx-amber-50);
  --fx-color-warning-border: var(--fx-amber-100);

  --fx-color-danger: var(--fx-red-600);
  --fx-color-danger-hover: var(--fx-red-700);
  --fx-color-danger-soft: var(--fx-red-50);
  --fx-color-danger-border: var(--fx-red-100);

  --fx-color-info: var(--fx-cyan-600);
  --fx-color-info-hover: var(--fx-cyan-700);
  --fx-color-info-soft: var(--fx-cyan-50);
  --fx-color-info-border: var(--fx-cyan-100);

  /* Functional aliases */
  --fx-color-focus: rgba(24, 119, 242, .24);
  --fx-color-overlay: rgba(2, 6, 23, .52);
  --fx-shadow-surface: var(--fx-shadow-sm);
  --fx-shadow-floating: var(--fx-shadow-md);
}

/* <<< core/theme-light.css <<< */

/* >>> core/theme-dark.css >>> */
/* FÉNIX 360 — semantic theme: DARK
   P01 instala este tema pero NO lo activa en ninguna plantilla. */
html[data-fx-theme="dark"] {
  color-scheme: dark;

  --fx-color-primary: #3b82f6;
  --fx-color-primary-hover: #60a5fa;
  --fx-color-primary-active: #2563eb;
  --fx-color-primary-strong: #93c5fd;
  --fx-color-primary-soft: rgba(59, 130, 246, .14);
  --fx-color-primary-soft-hover: rgba(59, 130, 246, .20);
  --fx-color-primary-border: rgba(96, 165, 250, .34);
  --fx-color-on-primary: #ffffff;

  --fx-color-bg-app: #0b1220;
  --fx-color-bg-subtle: #0f172a;
  --fx-color-surface: #111827;
  --fx-color-surface-raised: #172033;
  --fx-color-surface-muted: #1e293b;
  --fx-color-surface-hover: #1b2638;

  --fx-color-text: #e5edf8;
  --fx-color-text-strong: #f8fafc;
  --fx-color-text-muted: #94a3b8;
  --fx-color-text-subtle: #64748b;
  --fx-color-text-disabled: #64748b;

  --fx-color-border: #273449;
  --fx-color-border-strong: #3a4960;

  --fx-color-success: #4ade80;
  --fx-color-success-hover: #86efac;
  --fx-color-success-soft: rgba(34, 197, 94, .12);
  --fx-color-success-border: rgba(74, 222, 128, .24);

  --fx-color-warning: #fbbf24;
  --fx-color-warning-hover: #fcd34d;
  --fx-color-warning-soft: rgba(245, 158, 11, .13);
  --fx-color-warning-border: rgba(251, 191, 36, .24);

  --fx-color-danger: #f87171;
  --fx-color-danger-hover: #fca5a5;
  --fx-color-danger-soft: rgba(239, 68, 68, .13);
  --fx-color-danger-border: rgba(248, 113, 113, .24);

  --fx-color-info: #22d3ee;
  --fx-color-info-hover: #67e8f9;
  --fx-color-info-soft: rgba(6, 182, 212, .13);
  --fx-color-info-border: rgba(34, 211, 238, .24);

  --fx-color-focus: rgba(96, 165, 250, .30);
  --fx-color-overlay: rgba(0, 0, 0, .66);
  --fx-shadow-surface: 0 4px 14px rgba(0, 0, 0, .22);
  --fx-shadow-floating: 0 14px 40px rgba(0, 0, 0, .34);
}

/* <<< core/theme-dark.css <<< */

/* >>> core/components.css >>> */
/* FÉNIX 360 — opt-in components/utilities.
   Todas las clases comienzan por fx-theme-/fx-ui- para no interferir con legacy. */
.fx-theme-surface {
  background: var(--fx-color-surface);
  color: var(--fx-color-text);
  border: 1px solid var(--fx-color-border);
  box-shadow: var(--fx-shadow-surface);
}

.fx-theme-primary { color: var(--fx-color-primary); }
.fx-theme-muted { color: var(--fx-color-text-muted); }

.fx-ui-focus-ring:focus-visible {
  outline: none;
  box-shadow: 0 0 0 var(--fx-focus-width) var(--fx-color-focus);
}

.fx-ui-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--fx-space-2);
  min-height: 30px;
  padding: 0 var(--fx-space-3);
  border-radius: var(--fx-radius-pill);
  border: 1px solid var(--fx-color-border);
  background: var(--fx-color-surface);
  color: var(--fx-color-text);
}

.fx-ui-chip--primary {
  border-color: var(--fx-color-primary-border);
  background: var(--fx-color-primary-soft);
  color: var(--fx-color-primary-strong);
}

/* <<< core/components.css <<< */