/* =============================================================================
   Elocuenta · Design system · Tokens
   Tokens de MARCA (--brand-*): tematizables por tenant en el futuro.
   Tokens ESTRUCTURALES (--space-*, --radius-*, --font-*, --shadow-*): estables.
   Ningún color se hardcodea fuera de este archivo.
   ============================================================================= */
:root {
  /* --- Marca --- */
  --brand-primary: #2563EB;
  --brand-primary-dark: #1D4ED8;
  --brand-primary-light: #DBEAFE;
  --brand-accent: #10B981;
  --brand-accent-dark: #059669;
  --brand-accent-light: #D1FAE5;
  --brand-primary-soft: #EFF6FF;   /* tinte de fondo para secciones destacadas */
  --brand-ink: #0F1F3D;            /* azul tinta para el hero */
  --brand-gradient: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-dark));

  /* --- Neutros --- */
  --color-bg: #F9FAFB;
  --color-surface: #FFFFFF;
  --color-border: #E5E7EB;
  --color-text-primary: #111827;
  --color-text-secondary: #4B5563;
  --color-text-muted: #9CA3AF;
  --color-text-inverse: #FFFFFF;

  /* --- Estados --- */
  --color-success: #10B981;
  --color-warning: #F59E0B;
  --color-danger: #EF4444;
  --color-info: #3B82F6;

  /* --- Espaciado --- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;

  /* --- Tipografía --- */
  --font-family-base: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-base: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 20px;
  --font-size-2xl: 24px;
  --font-size-3xl: 28px;
  --font-size-4xl: 32px;
  --font-size-5xl: 40px;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --line-height-tight: 1.25;
  --line-height-base: 1.6;

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

  /* --- Sombras --- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, .07);
  --shadow-elevated: 0 8px 24px rgba(0, 0, 0, .08);

  /* --- Transiciones --- */
  --transition-base: .2s ease;

  /* --- Layout del panel --- */
  --panel-sidebar-width: 240px;
  --panel-header-height: 60px;
}