/* Tema ChatConnect - Default Theme */
/* Theme: ChatConnect (Dark theme with comprehensive color palette) */

.theme-chatconnect {
  /* ========================================
   * TYPOGRAPHY - Font Families
   * ======================================== */
  --typography-font-family-primary: var(--font-funnel-sans);
  --typography-font-family-secondary: var(--font-geist-sans);

  /* ========================================
   * NEUTRAL COLORS - Complete scale (0-1000)
   * ======================================== */
  --neutral-0: #ffffff;
  --neutral-50: #fcfcfc;
  --neutral-100: #f3f3f3;
  --neutral-200: #f0f0f0;
  --neutral-300: #d9d9d9;
  --neutral-400: #bfbfbf;
  --neutral-500: #8c8c8c;
  --neutral-550: #666666;
  --neutral-600: #595959;
  --neutral-700: #434343;
  --neutral-750: #333333;
  --neutral-800: #262626;
  --neutral-900: #1f1f1f;
  --neutral-950: #141414;
  --neutral-1000: #000000;

  /* Neutral RGB variants for opacity usage */
  --neutral-0-rgb: 255, 255, 255;
  --neutral-1000-rgb: 0, 0, 0;

  /* ========================================
   * SUCCESS COLORS - Complete scale (50-900)
   * ======================================== */
  --success-50: #e0f8f3;
  --success-100: #c6eada;
  --success-200: #aadfc8;
  --success-300: #84d1af;
  --success-400: #6cc89f;
  --success-500: #47ba87;
  --success-600: #41a97b;
  --success-700: #328460;
  --success-800: #27664a;
  --success-900: #1e4639;

  /* Success RGB for dynamic opacity */
  --success-500-rgb: 71, 186, 135;

  /* ========================================
   * WARNING COLORS - Complete scale (50-900)
   * ======================================== */
  --warning-50: #fef6e6;
  --warning-100: #fde3b1;
  --warning-200: #fcd68c;
  --warning-300: #fac357;
  --warning-400: #f8b836;
  --warning-500: #f8a504;
  --warning-600: #e29604;
  --warning-700: #b07503;
  --warning-800: #885b02;
  --warning-900: #684602;

  /* Warning RGB for dynamic opacity */
  --warning-500-rgb: 248, 165, 4;

  /* ========================================
   * ERROR COLORS - Complete scale (50-900)
   * ======================================== */
  --error-50: #fad9d3;
  --error-100: #f8c2be;
  --error-200: #f4a59e;
  --error-300: #ef7c72;
  --error-400: #ec6256;
  --error-500: #c92519;
  --error-600: #b72217;
  --error-700: #8f1a11;
  --error-800: #6f140d;
  --error-900: #54100b;

  /* Error RGB for dynamic opacity */
  --error-500-rgb: 201, 37, 25;

  /* ========================================
   * UPLOAD COLORS - Complete scale (50-900)
   * ======================================== */
  --upload-50: #e8edff;
  --upload-100: #b7c7f2;
  --upload-200: #95abe8;
  --upload-300: #6484db;
  --upload-400: #466dd4;
  --upload-500: #1849d6;
  --upload-600: #1642c3;
  --upload-700: #113398;
  --upload-800: #0d2876;
  --upload-900: #0a1f5a;

  /* Upload RGB for dynamic opacity */
  --upload-500-rgb: 24, 73, 214;

  /* ========================================
   * ACCENT COLORS - Complete scale (50-900)
   * ======================================== */
  --accent-50: #f3f2ff;
  --accent-100: #d9d8ff;
  --accent-200: #c2c2ff;
  --accent-300: #acafff;
  --accent-400: #9c9fff;
  --accent-500: #837bff;
  --accent-600: #7770e8;
  --accent-700: #5d57b5;
  --accent-800: #48448c;
  --accent-900: #37346b;

  /* Accent RGB for dynamic opacity */
  --accent-500-rgb: 131, 123, 255;

  /* ========================================
   * GRADIENT - Primary
   * ======================================== */
  --gradient-primary-start: #e0f0ff;
  --gradient-primary-stop: #b8c9f3;
  --gradient-primary: linear-gradient(112deg, var(--gradient-primary-start) 0%, var(--gradient-primary-stop) 100%);
  --gradient-primary-text: var(--accent-900);

  /* ========================================
   * SEMANTIC TOKENS - Interaction States
   * ======================================== */
  --color-focus-outline: var(--accent-300);
  --color-hover-overlay: rgba(var(--neutral-0-rgb), 0.08);
  --color-active-overlay: rgba(var(--neutral-0-rgb), 0.16);

  /* Accent states */
  --color-accent: var(--accent-500);
  --color-accent-hover: var(--accent-400);

  /* Overlays */
  --color-overlay-dark: rgba(var(--neutral-1000-rgb), 0.8);
  --color-overlay-medium: rgba(var(--neutral-1000-rgb), 0.5);

  /* Input specific */
  --color-input-caret: var(--accent-500);
  --color-input-border-default: var(--neutral-700);
  --color-input-border-error: var(--error-500);

  /* ========================================
   * SEMANTIC TOKENS - Borders with Opacity
   * ======================================== */
  --color-border-base-op-16: rgba(var(--neutral-0-rgb), 0.16);
  --color-border-base-op-32: rgba(var(--neutral-0-rgb), 0.32);
  --color-border-base-op-08: rgba(var(--neutral-0-rgb), 0.08);

  /* ========================================
   * SEMANTIC TOKENS - Text with Opacity
   * ======================================== */
  --color-text-base-op-48: rgba(var(--neutral-0-rgb), 0.48);
  --color-text-base-op-64: rgba(var(--neutral-0-rgb), 0.64);
  --color-text-base-op-88: rgba(var(--neutral-0-rgb), 0.88);

  /* ========================================
   * ADAPTIVE SEMANTIC COLORS
   * ======================================== */
  --color-mode: dark; /* Theme type: dark or light */
  --color-background: var(--neutral-1000); /* Main background */
  --color-foreground: var(--neutral-0); /* Main text color */
  --color-surface: var(--neutral-900); /* Elevated surface (cards, etc) */
  --color-on-surface: var(--neutral-0); /* Text on elevated surfaces */
  --color-muted: var(--neutral-600); /* Secondary text */
  --color-border: var(--neutral-700); /* Default borders */

  /* ========================================
   * BASE COLORS (RGB format for Tailwind)
   * ======================================== */
  --base-0: 255 255 255;
  --base-950: 0 0 0;

  /* ========================================
   * BUTTON SEMANTIC TOKENS
   * Define colores específicos para botones que varían por tema
   * ======================================== */
  
  /* Primary Button - Negro/Oscuro en ChatConnect */
  --btn-primary-bg: var(--neutral-900);
  --btn-primary-bg-hover: var(--neutral-700);
  --btn-primary-bg-active: var(--neutral-800);
  --btn-primary-bg-disabled: var(--neutral-300);
  --btn-primary-text: var(--neutral-0);
  --btn-primary-text-disabled: var(--neutral-500);
  --btn-primary-border: var(--neutral-900);
  --btn-primary-border-hover: var(--neutral-700);
  --btn-primary-border-disabled: var(--neutral-300);
  --btn-primary-svg: var(--neutral-0);
  
  /* Secondary Button - Outline style */
  --btn-secondary-bg: transparent;
  --btn-secondary-bg-hover: var(--neutral-50);
  --btn-secondary-bg-active: var(--neutral-100);
  --btn-secondary-bg-disabled: transparent;
  --btn-secondary-text: var(--neutral-900);
  --btn-secondary-text-disabled: var(--neutral-400);
  --btn-secondary-border: var(--neutral-900);
  --btn-secondary-border-hover: var(--neutral-700);
  --btn-secondary-border-disabled: var(--neutral-300);
  
  /* Tertiary/Ghost Button - Sin borde */
  --btn-tertiary-bg: transparent;
  --btn-tertiary-bg-hover: var(--neutral-100);
  --btn-tertiary-bg-active: var(--neutral-200);
  --btn-tertiary-bg-disabled: transparent;
  --btn-tertiary-text: var(--neutral-900);
  --btn-tertiary-text-disabled: var(--neutral-400);
  
  /* Danger Button - Para acciones destructivas */
  --btn-danger-bg: var(--error-500);
  --btn-danger-bg-hover: var(--error-600);
  --btn-danger-bg-active: var(--error-700);
  --btn-danger-bg-disabled: var(--neutral-300);
  --btn-danger-text: var(--neutral-0);
  --btn-danger-text-disabled: var(--neutral-500);
  --btn-danger-border: var(--error-500);
  --btn-danger-border-disabled: var(--neutral-300);
  
  /* Success Button */
  --btn-success-bg: var(--success-500);
  --btn-success-bg-hover: var(--success-600);
  --btn-success-bg-active: var(--success-700);
  --btn-success-bg-disabled: var(--neutral-300);
  --btn-success-text: var(--neutral-0);
  --btn-success-text-disabled: var(--neutral-500);
  --btn-success-border: var(--success-500);
  --btn-success-border-disabled: var(--neutral-300);

  /* PRIMARY ACCENT BACKGROUND */
  --bg-primary-accent: var(--neutral-900);
}