/**
 * PHP-CLD Design System - CDN Version
 * Using Tailwind CSS CDN - No build step required
 *
 * This file contains:
 * 1. Tailwind CDN configuration
 * 2. Custom color palette as CSS variables
 * 3. All component variants imported
 */

/* Import all component CSS files */
@import url('../../COMPONENTS/button-plain/button-plain.css');
@import url('../../COMPONENTS/button-text/button-text.css');
@import url('../../COMPONENTS/button-icon/button-icon.css');
@import url('../../COMPONENTS/button-text-icon/button-text-icon.css');
@import url('../../COMPONENTS/card-plain/card-plain.css');
@import url('../../COMPONENTS/card-title-image-button/card-title-image-button.css');
@import url('../../COMPONENTS/card-history/card-history.css');
@import url('../../COMPONENTS/card-library/card-library.css');
@import url('../../COMPONENTS/switch-plain/switch-plain.css');
@import url('../../COMPONENTS/switch-container/switch-container.css');
@import url('../../COMPONENTS/switch-text/switch-text.css');
@import url('../../COMPONENTS/switch-text-icon/switch-text-icon.css');
@import url('../../COMPONENTS/toggle-plain/toggle-plain.css');
@import url('../../COMPONENTS/toggle-text/toggle-text.css');
@import url('../../COMPONENTS/toggle-text-icon/toggle-text-icon.css');
@import url('../../COMPONENTS/input-plain/input-plain.css');
@import url('../../COMPONENTS/input-icon/input-icon.css');
@import url('../../COMPONENTS/textarea-plain/textarea-plain.css');
@import url('../../COMPONENTS/textarea-bottom-actions/textarea-bottom-actions.css');
@import url('../../COMPONENTS/select-plain/select-plain.css');
@import url('../../COMPONENTS/dropdown-menu/dropdown-menu.css');
@import url('../../COMPONENTS/dropdown-menu-container/dropdown-menu-container.css');
@import url('../../COMPONENTS/dropdown-menu-item/dropdown-menu-item.css');
@import url('../../COMPONENTS/modal/modal.css');
@import url('../../COMPONENTS/sidebar/sidebar.css');
@import url('../../COMPONENTS/loader/loader.css');
@import url('../../COMPONENTS/text-heading1/text-heading1.css');
@import url('../../COMPONENTS/text-heading2/text-heading2.css');
@import url('../../COMPONENTS/text-heading3/text-heading3.css');
@import url('../../COMPONENTS/text-heading4/text-heading4.css');
@import url('../../COMPONENTS/text-label/text-label.css');
@import url('../../COMPONENTS/text-plain/text-plain.css');
@import url('../../COMPONENTS/icon/icon.css');
@import url('../../COMPONENTS/chip/chip.css');
@import url('../../COMPONENTS/container/container.css');
@import url('../../COMPONENTS/color-grid-picker/color-grid-picker.css');
@import url('../../COMPONENTS/file-browser/file-browser.css');
@import url('../../COMPONENTS/tabs/tabs.css');
@import url('../../COMPONENTS/image/image.css');
@import url('../../COMPONENTS/button-icon-image/button-icon-image.css');
@import url('../../COMPONENTS/button-text-icon-image/button-text-icon-image.css');
@import url('../../COMPONENTS/chat-message/chat-message.css');

/* CSS Custom Properties for Design System Colors */
:root {
  /* Primary Colors */
  --color-primary-400: #9D7FE3;
  --color-primary-500: #7F56D9;
  --color-primary-600: #6841B8;

  /* Secondary Colors */
  --color-secondary-400: #FFFFFF;
  --color-secondary-500: #FFFFFF;
  --color-secondary-600: #E5E5E5;

  /* Tertiary Colors */
  --color-tertiary-400: #2D3342;
  --color-tertiary-500: #1F232F;
  --color-tertiary-600: #151821;

  /* Quaternary Colors */
  --color-quaternary-400: #F5FF7A;
  --color-quaternary-500: #F0FF48;
  --color-quaternary-600: #D9E83E;

  /* Primary Complement Colors */
  --color-primary-complement-400: #BEFF6D;
  --color-primary-complement-500: #A9FE4A;
  --color-primary-complement-600: #92E03E;

  /* Accent Colors */
  --color-accent-400: #BEFF5E;
  --color-accent-500: #ABEC46;
  --color-accent-600: #98D83E;

  /* Background Colors */
  --color-bg-base: #0C111D;
  --color-bg-elevated: #141927;
  --color-bg-surface: #1F232F;
  --color-bg-card: #1E2533;
  --color-bg-hover: #252D3F;
  --color-bg-input: #1F232F;

  /* Text Colors */
  --color-text-primary: #FFFFFF;
  --color-text-secondary: #B8BDC9;
  --color-text-tertiary: #8A8F9B;
  --color-text-placeholder: #6A6F7B;
  --color-text-disabled: #4A4F5B;

  /* Border Colors */
  --color-border-default: #4F5561;
  --color-border-hover: #6A6F7B;
  --color-border-subtle: #3A3F4B;

  /* 13 Color Families - Red */
  --color-red-100: #ffcccc;
  --color-red-200: #ff9999;
  --color-red-300: #ff6666;
  --color-red-400: #ff3333;
  --color-red-500: #ff0000;
  --color-red-600: #cc0000;
  --color-red-700: #990000;
  --color-red-800: #660000;
  --color-red-900: #330000;

  /* Red-Orange */
  --color-redOrange-100: #ffe6cc;
  --color-redOrange-200: #ffcc99;
  --color-redOrange-300: #ffb366;
  --color-redOrange-400: #ff9933;
  --color-redOrange-500: #ff8000;
  --color-redOrange-600: #cc6600;
  --color-redOrange-700: #994d00;
  --color-redOrange-800: #663300;
  --color-redOrange-900: #331a00;

  /* Yellow */
  --color-yellow-100: #ffffcc;
  --color-yellow-200: #ffff99;
  --color-yellow-300: #ffff66;
  --color-yellow-400: #ffff33;
  --color-yellow-500: #ffff00;
  --color-yellow-600: #cccc00;
  --color-yellow-700: #999900;
  --color-yellow-800: #666600;
  --color-yellow-900: #333300;

  /* Yellow-Green */
  --color-yellowGreen-100: #e6ffcc;
  --color-yellowGreen-200: #ccff99;
  --color-yellowGreen-300: #b3ff66;
  --color-yellowGreen-400: #99ff33;
  --color-yellowGreen-500: #80ff00;
  --color-yellowGreen-600: #66cc00;
  --color-yellowGreen-700: #4d9900;
  --color-yellowGreen-800: #336600;
  --color-yellowGreen-900: #1a3300;

  /* Green */
  --color-green-100: #ccffcc;
  --color-green-200: #99ff99;
  --color-green-300: #66ff66;
  --color-green-400: #33ff33;
  --color-green-500: #00ff00;
  --color-green-600: #00cc00;
  --color-green-700: #009900;
  --color-green-800: #006600;
  --color-green-900: #003300;

  /* Green-Cyan */
  --color-greenCyan-100: #ccffe6;
  --color-greenCyan-200: #99ffcc;
  --color-greenCyan-300: #66ffb3;
  --color-greenCyan-400: #33ff99;
  --color-greenCyan-500: #00ff80;
  --color-greenCyan-600: #00cc66;
  --color-greenCyan-700: #00994d;
  --color-greenCyan-800: #006633;
  --color-greenCyan-900: #00331a;

  /* Cyan */
  --color-cyan-100: #ccffff;
  --color-cyan-200: #99ffff;
  --color-cyan-300: #66ffff;
  --color-cyan-400: #33ffff;
  --color-cyan-500: #00ffff;
  --color-cyan-600: #00cccc;
  --color-cyan-700: #009999;
  --color-cyan-800: #006666;
  --color-cyan-900: #003333;

  /* Cyan-Blue */
  --color-cyanBlue-100: #cce6ff;
  --color-cyanBlue-200: #99ccff;
  --color-cyanBlue-300: #66b3ff;
  --color-cyanBlue-400: #3399ff;
  --color-cyanBlue-500: #0080ff;
  --color-cyanBlue-600: #0066cc;
  --color-cyanBlue-700: #004d99;
  --color-cyanBlue-800: #003366;
  --color-cyanBlue-900: #001a33;

  /* Blue */
  --color-blue-100: #ccccff;
  --color-blue-200: #9999ff;
  --color-blue-300: #6666ff;
  --color-blue-400: #3333ff;
  --color-blue-500: #0000ff;
  --color-blue-600: #0000cc;
  --color-blue-700: #000099;
  --color-blue-800: #000066;
  --color-blue-900: #000033;

  /* Blue-Purple */
  --color-bluePurple-100: #e6ccff;
  --color-bluePurple-200: #cc99ff;
  --color-bluePurple-300: #b366ff;
  --color-bluePurple-400: #9933ff;
  --color-bluePurple-500: #7f00ff;
  --color-bluePurple-600: #6600cc;
  --color-bluePurple-700: #4d0099;
  --color-bluePurple-800: #330066;
  --color-bluePurple-900: #1a0033;

  /* Magenta */
  --color-magenta-100: #ffccff;
  --color-magenta-200: #ff99ff;
  --color-magenta-300: #ff66ff;
  --color-magenta-400: #ff33ff;
  --color-magenta-500: #ff00ff;
  --color-magenta-600: #cc00cc;
  --color-magenta-700: #990099;
  --color-magenta-800: #660066;
  --color-magenta-900: #330033;

  /* Magenta-Red */
  --color-magentaRed-100: #ffcce6;
  --color-magentaRed-200: #ff99cc;
  --color-magentaRed-300: #ff66b3;
  --color-magentaRed-400: #ff3399;
  --color-magentaRed-500: #ff007f;
  --color-magentaRed-600: #cc0066;
  --color-magentaRed-700: #99004d;
  --color-magentaRed-800: #660033;
  --color-magentaRed-900: #33001a;

  /* Gray */
  --color-gray-100: #e6e6e6;
  --color-gray-200: #cccccc;
  --color-gray-300: #b3b3b3;
  --color-gray-400: #999999;
  --color-gray-500: #808080;
  --color-gray-600: #666666;
  --color-gray-700: #4d4d4d;
  --color-gray-800: #333333;
  --color-gray-900: #1a1a1a;

  /* Spacing Variables */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
}

/* Base Styles */
* {
  box-sizing: border-box;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  color: var(--color-text-primary);
  background-color: var(--color-bg-base);
  font-family: ui-sans-serif, system-ui, sans-serif;
  margin: 0;
  padding: 0;
}

/* Additional Global Component Styles */
.input-base {
  width: 100%;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  background-color: var(--color-bg-input);
  border: 1px solid var(--color-border-default);
  color: var(--color-text-primary);
  outline: none;
  transition: all 0.2s;
}

.input-base:focus {
  outline: none;
  border-color: var(--color-primary-500);
  box-shadow: 0 0 0 3px rgba(127, 86, 217, 0.2);
}

.input-base::placeholder {
  color: var(--color-text-placeholder);
}

/* Universal Disable State - Works on ANY component */
/* Only apply styles when explicitly disabled (not when false) */
[data-disabled="true"],
[data-disabled="true"] * {
  cursor: not-allowed !important;
  opacity: 0.7 !important;
  user-select: none !important;
  pointer-events: none !important;
}

.disabled,
.disabled * {
  cursor: not-allowed !important;
  opacity: 0.7 !important;
  user-select: none !important;
  pointer-events: none !important;
}

/* Native form elements need special handling for accessibility */
button[disabled],
input[disabled],
textarea[disabled],
select[disabled] {
  pointer-events: none;
  cursor: not-allowed;
  opacity: 0.7;
}

/* Utility Classes */
.text-balance {
  text-wrap: balance;
}

.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.scrollbar-hide::-webkit-scrollbar {
  display: none;
}