/**
 * Conboxi design tokens
 *
 * Generado por B-044 (Sprint S01). El sweep global Conboxi -> Conboxi
 * (meta-epico B-043, Sprint S02) cambia el resto del codebase. Hasta entonces,
 * los alias --lp-* abajo mantienen retrocompatibilidad con HTMLs existentes.
 *
 * Como usar:
 *   <link rel="stylesheet" href="/css/tokens.css">
 *   ...
 *   style="color: var(--cnb-primary)"
 *   class="bg-[var(--cnb-graphite)]"
 */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* Brand colors */
  --cnb-primary: #FF5722;
  --cnb-primary-dark: #E64A19;
  --cnb-primary-light: #FF7849;
  --cnb-primary-warm: #FF6B35;

  --cnb-graphite: #0F1729;
  --cnb-graphite-soft: #1E293B;

  --cnb-paper: #FAFAF8;

  /* Surfaces */
  --cnb-surface: #FFFFFF;
  --cnb-surface-soft: #F8F9FB;
  --cnb-surface-elevated: #FFFFFF;

  /* Text */
  --cnb-text-primary: #0F1729;
  --cnb-text-secondary: #475569;
  --cnb-text-tertiary: #94A3B8;
  --cnb-text-inverse: #FAFAF8;

  /* States */
  --cnb-success: #10B981;
  --cnb-success-soft: #D1FAE5;
  --cnb-warning: #F59E0B;
  --cnb-warning-soft: #FEF3C7;
  --cnb-danger: #DC2626;
  --cnb-danger-soft: #FEE2E2;
  --cnb-info: #0066FF;
  --cnb-info-soft: #DBEAFE;

  /* Neutrals */
  --cnb-gray-50: #F8FAFC;
  --cnb-gray-100: #F1F5F9;
  --cnb-gray-200: #E2E8F0;
  --cnb-gray-300: #CBD5E1;
  --cnb-gray-400: #94A3B8;
  --cnb-gray-500: #64748B;
  --cnb-gray-600: #475569;
  --cnb-gray-700: #334155;
  --cnb-gray-800: #1E293B;
  --cnb-gray-900: #0F172A;

  /* Typography stacks */
  --cnb-font-display: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --cnb-font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --cnb-font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Monaco, monospace;

  /* Spacing */
  --cnb-space-xs: 4px;
  --cnb-space-sm: 8px;
  --cnb-space-md: 16px;
  --cnb-space-lg: 24px;
  --cnb-space-xl: 32px;
  --cnb-space-2xl: 48px;

  /* Radii */
  --cnb-radius-sm: 4px;
  --cnb-radius-md: 8px;
  --cnb-radius-lg: 12px;
  --cnb-radius-xl: 16px;
  --cnb-radius-full: 9999px;

  /* Shadows (subtle, mobile-friendly) */
  --cnb-shadow-sm: 0 1px 2px rgba(15, 23, 41, 0.05);
  --cnb-shadow-md: 0 4px 6px rgba(15, 23, 41, 0.07), 0 1px 3px rgba(15, 23, 41, 0.05);
  --cnb-shadow-lg: 0 10px 15px rgba(15, 23, 41, 0.08), 0 4px 6px rgba(15, 23, 41, 0.05);
  --cnb-shadow-xl: 0 20px 25px rgba(15, 23, 41, 0.10), 0 8px 10px rgba(15, 23, 41, 0.04);

  /*
   * Backwards-compat layer: HTMLs existentes (admin-*.html, cliente-*.html, etc.)
   * usan --lp-brand y --lp-brand-accent en estilos inline. Hasta que B-043 los
   * actualice al sweep global, mapeamos a la paleta Conboxi.
   */
  --lp-brand: var(--cnb-primary);
  --lp-brand-accent: var(--cnb-primary-dark);
  --lp-brand-secondary: var(--cnb-graphite);
}