/**
 * Base CSS - RelatialAI Typography and Brand System
 * 
 * This file defines the core typography scale and brand colors used throughout
 * the application. All other CSS files should reference these variables rather
 * than defining their own font sizes and weights.
 * 
 * Typography Scale:
 * - xs: 0.75rem (12px) - Small labels, badges, helper text
 * - sm: 0.875rem (14px) - Secondary text, form labels, small buttons
 * - base: 1rem (16px) - Body text, standard UI elements
 * - md: 1.125rem (18px) - Section headers, emphasized text
 * - lg: 1.25rem (20px) - Page subheadings
 * - xl: 1.5rem (24px) - Major headings
 * - 2xl: 2rem (32px) - Hero text, dashboard numbers
 * 
 * Font Weights:
 * - light: 300 - Decorative text
 * - normal: 400 - Body text
 * - medium: 500 - Subtle emphasis
 * - semibold: 600 - Headers, important labels
 * - bold: 700 - Strong emphasis, CTAs
 * 
 * Widget Font Inheritance:
 * The widget.css file is designed to inherit fonts from the parent page
 * where it's embedded, while providing sensible fallbacks. This ensures
 * the widget integrates seamlessly with customer websites.
 */

:root {
  /* Brand Colors */
  --brand-color: #2b3469;
  --brand-hover-color: #c75bca; /* Magenta hover */
  --variable-text-color: #000000;
  --assistant-bubble-color: #3898ec;
  --assistant-bubble-text-color: #ffffff;
  --user-bubble-color: #d756f7;
  --user-bubble-text-color: #ffffff;
  --chat-bubble-suggestion: #dcdcdc;
  
  /* Typography System */
  --font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  
  /* Font Sizes - Using a consistent scale */
  --font-size-xs: 0.75rem;    /* 12px */
  --font-size-sm: 0.875rem;   /* 14px */
  --font-size-base: 1rem;     /* 16px */
  --font-size-md: 1.125rem;   /* 18px */
  --font-size-lg: 1.25rem;    /* 20px */
  --font-size-xl: 1.5rem;     /* 24px */
  --font-size-2xl: 2rem;      /* 32px */
  
  /* Font Weights */
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  
  /* Line Heights */
  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.6;
  
  /* Letter Spacing */
  --letter-spacing-tight: -0.025em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.025em;
  --letter-spacing-wider: 0.05em;
}


/* --- General Button & Link Styling --- */

/* General Button Uppercase */
.btn {
  text-transform: uppercase;
}


/* Primary Button */
.btn-primary {
  background-color: var(--brand-color);
  border-color: var(--brand-color);
  color: #ffffff; /* Ensure text is white */
}

.btn-primary:hover,
.btn-primary:focus, /* Add focus state for accessibility */
.btn-primary:active { /* Add active state */
  background-color: var(--brand-hover-color);
  border-color: var(--brand-hover-color);
  color: #ffffff; /* Ensure text stays white */
  box-shadow: none; /* Optional: remove default focus shadow if desired */
}

/* DataTables Pagination & Bootstrap Pagination */
.page-item.active .page-link {
  background-color: var(--brand-color);
  border-color: var(--brand-color);
  color: #ffffff; /* Ensure text is white */
  z-index: 3; /* Keep Bootstrap's z-index */
}

.page-link {
  color: var(--brand-color); /* Make non-active page links use brand color */
}

.page-link:hover,
.page-link:focus { /* Add focus state */
  background-color: var(--brand-hover-color);
  border-color: var(--brand-hover-color); /* Optional: change border on hover too */
  color: #ffffff; /* Ensure text is white on hover */
  z-index: 2; /* Keep Bootstrap's z-index */
}

/* Ensure DataTables pagination text color consistency */
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    color: #ffffff !important; /* Override DataTables default */
    background: var(--brand-color); /* Use variable */
    border-color: var(--brand-color); /* Use variable */
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    color: #ffffff !important; /* Override DataTables default */
    background: var(--brand-hover-color); /* Use variable */
    border-color: var(--brand-hover-color); /* Use variable */
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    color: var(--brand-color) !important; /* Use variable for non-active */
}