/* ============================================
   🎨 TOKENS / VARIABLES
   ============================================ */

:root,
:root[data-theme='default'] {
  /* Brand Tokens - Source of Truth */
  --xertica-primary: rgba(44, 39, 91, 1);
  --xertica-dark: rgba(35, 29, 79, 1);

  /* Semantic Colors */
  --background: rgba(255, 255, 255, 1);
  --foreground: rgba(9, 9, 11, 1);

  --card: rgba(255, 255, 255, 1);
  --card-foreground: rgba(9, 9, 11, 1);

  --popover: rgba(255, 255, 255, 1);
  --popover-foreground: rgba(9, 9, 11, 1);

  --primary: var(--xertica-primary);
  --primary-foreground: rgba(250, 250, 250, 1);
  --primary-light: rgba(44, 39, 91, 0.15);
  --primary-light-foreground: rgba(44, 39, 91, 1);

  --secondary: rgba(244, 244, 245, 1);
  --secondary-foreground: rgba(24, 24, 27, 1);

  --muted: rgba(244, 244, 245, 1);
  --muted-foreground: rgba(82, 82, 91, 1);

  --accent: rgba(244, 244, 245, 1);
  --accent-foreground: rgba(24, 24, 27, 1);

  --destructive: rgba(220, 38, 38, 1);
  --destructive-foreground: rgba(250, 250, 250, 1);

  /* Semantic Status Colors */
  --success: rgba(4, 120, 87, 1);
  --success-foreground: rgba(250, 250, 250, 1);
  --info: rgba(29, 78, 216, 1);
  --info-foreground: rgba(250, 250, 250, 1);
  --warning: rgba(234, 179, 8, 1);
  --warning-foreground: rgba(28, 25, 23, 1);

  --border: rgba(228, 228, 231, 1);
  --input: rgba(244, 244, 245, 0.5);
  --input-background: rgba(244, 244, 245, 0.5);
  --ring: rgba(161, 161, 170, 1);

  /* Sidebar */
  --sidebar: rgba(44, 39, 91, 1);
  --sidebar-foreground: rgba(250, 250, 250, 1);
  --sidebar-primary: rgba(255, 255, 255, 1);
  --sidebar-primary-foreground: rgba(9, 9, 11, 1);
  --sidebar-accent: rgba(244, 244, 245, 1);
  --sidebar-accent-foreground: rgba(24, 24, 27, 1);
  --sidebar-border: rgba(65, 61, 107, 1);
  --sidebar-ring: rgba(161, 161, 170, 1);

  /* Charts — vibrant, accessible, harmonious palette */
  --chart-1: rgba(99, 91, 255, 1);
  /* indigo-violet — brand-adjacent */
  --chart-2: rgba(16, 185, 129, 1);
  /* emerald — success-adjacent */
  --chart-3: rgba(245, 158, 11, 1);
  /* amber — warm accent */
  --chart-4: rgba(59, 130, 246, 1);
  /* blue — info-adjacent */
  --chart-5: rgba(239, 68, 68, 1);
  /* red — destructive-adjacent */
  --chart-6: rgba(168, 85, 247, 1);
  /* purple — extended palette */
  --chart-7: rgba(20, 184, 166, 1);
  /* teal — extended palette */
  --chart-8: rgba(251, 113, 133, 1);
  /* rose — extended palette */

  /* Gradients */
  --gradient-diagonal: linear-gradient(135deg, #fdb0f2 0%, #72cdfd 100%);

  /* Spacing & Radius */
  --radius: 6px;
  --radius-button: 12px;
  --radius-card: 12px;

  /* Mobile Content Padding — global horizontal padding on small screens.
     Change this value to adjust content padding on mobile across the entire project. */
  --mobile-content-padding: 1.25rem;

  --elevation-sm: 0px 0px 48px 0px rgba(0, 0, 0, 0.1);

  /* Typography */
  --font-size: 16px;
  --text-h1: 2rem;
  --text-h2: 1.75rem;
  --text-h3: 1.5rem;
  --text-h4: 1.25rem;
  --text-base: 1rem;
  --text-p: 0.875rem;
  --text-label: 0.875rem;
  --text-small: 0.875rem;
  --text-xs: 0.75rem;
  --text-muted: 0.875rem;
  --text-stats: 2.25rem;
  --text-table-head: 1.25rem;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  --spacing-1: 0.25rem;
  --spacing-2: 0.5rem;
  --spacing-3: 0.75rem;
  --spacing-4: 1rem;
  --spacing-5: 1.25rem;
  --spacing-6: 1.5rem;
  --spacing-8: 2rem;

  /* Calendar */
  --cell-size: 2.5rem;
  --cell-radius: var(--radius);
  --calendar-caption-size: 15px;
  --calendar-weekday-size: 12px;
  --calendar-day-size: 14px;

  /* Toast - Success */
  --toast-success-bg: rgba(220, 252, 231, 1);
  --toast-success-border: rgba(5, 150, 105, 1);
  --toast-success-icon: rgba(5, 150, 105, 1);
  /* Toast - Warning */
  --toast-warning-bg: rgba(254, 249, 195, 1);
  --toast-warning-border: rgba(161, 98, 7, 1);
  --toast-warning-icon: rgba(161, 98, 7, 1);
  /* Toast - Info */
  --toast-info-bg: rgba(219, 234, 254, 1);
  --toast-info-border: rgba(37, 99, 235, 1);
  --toast-info-icon: rgba(37, 99, 235, 1);
  /* Toast - Error */
  --toast-error-bg: rgba(254, 226, 226, 1);
  --toast-error-border: rgba(220, 38, 38, 1);
  --toast-error-icon: rgba(220, 38, 38, 1);
}

:root[data-mode='dark'],
.dark {
  /* Brand Tokens */
  --xertica-primary: rgba(44, 39, 91, 1);
  --primary: var(--xertica-primary);

  /* Semantic Colors */
  --background: rgba(5, 5, 13, 1);
  --foreground: rgba(250, 250, 250, 1);

  --card: rgba(13, 12, 22, 1);
  --card-foreground: rgba(250, 250, 250, 1);

  --popover: rgba(13, 12, 22, 1);
  --popover-foreground: rgba(250, 250, 250, 1);

  --primary-foreground: rgba(250, 250, 250, 1);
  --primary-light: rgba(44, 39, 91, 0.15);
  --primary-light-foreground: rgba(44, 39, 91, 1);

  --secondary: rgba(22, 21, 31, 1);
  --secondary-foreground: rgba(250, 250, 250, 1);

  --muted: rgba(22, 21, 31, 1);
  --muted-foreground: rgba(161, 161, 170, 1);

  --accent: rgba(22, 21, 31, 1);
  --accent-foreground: rgba(250, 250, 250, 1);

  --destructive: rgba(220, 38, 38, 1);
  --destructive-foreground: rgba(250, 250, 250, 1);

  /* Semantic Status Colors */
  --success: rgba(34, 197, 94, 1);
  --success-foreground: rgba(5, 5, 5, 1);
  --info: rgba(96, 165, 250, 1);
  --info-foreground: rgba(5, 5, 5, 1);
  --warning: rgba(251, 191, 36, 1);
  --warning-foreground: rgba(5, 5, 5, 1);

  --border: rgba(37, 35, 54, 1);
  --input: rgba(22, 21, 31, 0.5);
  --input-background: rgba(22, 21, 31, 0.5);
  --ring: rgba(113, 113, 122, 1);

  --elevation-sm: 0px 0px 48px 0px rgba(0, 0, 0, 0.3);

  /* Charts — dark mode: slightly lighter/more saturated for contrast on dark bg */
  --chart-1: rgba(129, 122, 255, 1);
  /* indigo-violet lighter */
  --chart-2: rgba(52, 211, 153, 1);
  /* emerald lighter */
  --chart-3: rgba(251, 191, 36, 1);
  /* amber lighter */
  --chart-4: rgba(96, 165, 250, 1);
  /* blue lighter */
  --chart-5: rgba(248, 113, 113, 1);
  /* red lighter */
  --chart-6: rgba(196, 132, 252, 1);
  /* purple lighter */
  --chart-7: rgba(45, 212, 191, 1);
  /* teal lighter */
  --chart-8: rgba(253, 164, 175, 1);
  /* rose lighter */

  /* Sidebar */
  --sidebar-foreground: rgba(250, 250, 250, 1);
  --sidebar-primary: rgba(255, 255, 255, 1);
  --sidebar-primary-foreground: rgba(9, 9, 11, 1);
  --sidebar-accent: rgba(63, 63, 70, 1);
  --sidebar-accent-foreground: rgba(250, 250, 250, 1);
  --sidebar-border: rgba(65, 61, 107, 1);
  --sidebar-ring: rgba(161, 161, 170, 1);

  /* Gradients */
  --gradient-diagonal: linear-gradient(135deg, #7b4a7a 0%, #3a5c7d 100%);

  /* Toast - Success */
  --toast-success-bg: rgba(6, 78, 59, 1);
  --toast-success-border: rgba(34, 197, 94, 1);
  --toast-success-icon: rgba(34, 197, 94, 1);
  /* Toast - Warning */
  --toast-warning-bg: rgba(113, 63, 18, 1);
  --toast-warning-border: rgba(251, 191, 36, 1);
  --toast-warning-icon: rgba(251, 191, 36, 1);
  /* Toast - Info */
  --toast-info-bg: rgba(30, 58, 138, 1);
  --toast-info-border: rgba(96, 165, 250, 1);
  --toast-info-icon: rgba(96, 165, 250, 1);
  /* Toast - Error */
  --toast-error-bg: rgba(127, 29, 29, 1);
  --toast-error-border: rgba(248, 113, 113, 1);
  --toast-error-icon: rgba(248, 113, 113, 1);
}