/* IMPORTANT:
   You must import 'fonts.css' in your HTML or at the top of this file
   using @import 'fonts.css'; for these variables to work.
*/

:root {
  /* Colors */
  --brand-primary-blue: #2e9dcf;
  --brand-primary-dark: #0056D8;
  --brand-accent-purple: #6C5CE7;
  --brand-success-green: #27AE60;
  --neutral-white: #FFFFFF;
  --neutral-background-light: #f4f6f8;
  --neutral-border-color: #dddddd;
  --brand-background-light: #e1eff7;
  --neutral-border-light: #E2E8F0;
  --neutral-text-primary: #1A202C;
  --neutral-text-secondary: #718096;
  --neutral-text-placeholder: #A0AEC0;

  /* Gradients */
  --gradient-chat-greeting: linear-gradient(90deg, #8E2DE2 0%, #E22F96 100%);
  --gradient-nps-banner: #5842D8;

  /* Typography - Families */
  /* Added specific families for the condensed variations */
  --font-family-primary: 'Noto Sans';
  --font-family-semi-condensed: 'Noto Sans SemiCondensed';
  --font-family-condensed: 'Noto Sans Condensed';
  --font-family-extra-condensed: 'Noto Sans ExtraCondensed';

  /* Typography - Weights */
  /* Expanded to include all downloaded weights */
  --font-weight-thin: 100;
  --font-weight-extralight: 200;
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  --font-weight-black: 900;

  /* Typography - Sizes */
  --font-size-xs: 8px;
  --font-size-sm: 13px;
  --font-size-base: 14px;
  --font-size-lg: 16px;
  --font-size-xl: 24px;

  /* Borders */
  --border-radius-sm: 4px;
  --border-radius-md: 8px;
  --border-radius-lg: 12px;
  --border-radius-xl: 20px;
  --border-radius-circle: 50%;

  /* Spacing */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;

  /* Shadows */
  --shadow-card: 0 2px 4px rgba(0,0,0,0.05);
  --shadow-floating-panel: 0 8px 30px rgba(0,0,0,0.12);
  --shadow-dropdown: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}