:root {
  /* Colors from KONYCT_COLORS */
  --communiv-primary: #000000; /* Changed to black for high contrast */
  --communiv-secondary: #000000; /* Changed to black */
  --background-base: #fdf7f3; /* Mobile App's background */
  --card-bg: #f3ede9; /* Mobile App's surface */
  --border-color: #e1dbd6; /* Mobile App's softBorder */
  --text-base: #000000; /* Changed to black for primary text */
  --text-secondary: #555555; /* Changed to darker gray for secondary text */
  --highlight-text: #000000; /* Changed to black */
  --success-color: #10b981;
  --warning-color: #f59e0b;
  --error-color: #ef4444;
  --info-color: #3b82f6;

  /* Button colors */
  --button-primary-bg: #000000;
  --button-primary-text: #ffffff;
  --button-secondary-bg: #ffffff;
  --button-secondary-text: #000000;

  /* Spacing from SPACING */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-lg: 16px;
  --spacing-xl: 24px;
  --spacing-2xl: 32px;
  --spacing-3xl: 48px;

  /* Radius from RADIUS */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 20px;
  --radius-full: 9999px;

  /* Font Sizes from FONT_SIZE */
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-base: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 20px;
  --font-size-2xl: 24px;

  /* Hero Gradient (adapted from new colors) */
  --hero-gradient-start: #fef7f5; /* Lighter version of background */
  --hero-gradient-end: #fdf7f3;
}

[data-theme="dark"] {
  /* Dark mode colors, adapted from KONYCT_COLORS.mono */
  --communiv-primary: #ffffff; /* Changed to white for dark mode */
  --communiv-secondary: #ffffff; /* Changed to white */
  --background-base: #1a1a1a; /* Mobile App's mono.black */
  --card-bg: #2a2a2a; /* Mobile App's mono.gray900 */
  --border-color: #4a4a4a; /* Mobile App's mono.gray700 */
  --text-base: #ffffff; /* Changed to white for dark mode */
  --text-secondary: #aaaaaa; /* Mobile App's mono.gray400 */
  --highlight-text: #ffffff; /* Changed to white */
  --success-color: #10b981;
  --warning-color: #f59e0b;
  --error-color: #ef4444;
  --info-color: #3b82f6;

  /* Button colors for dark mode - inverted */
  --button-primary-bg: #ffffff;
  --button-primary-text: #000000;
  --button-secondary-bg: #000000;
  --button-secondary-text: #ffffff;

  /* Hero Gradient for Dark Mode */
  --hero-gradient-start: #2a2a2a;
  --hero-gradient-end: #1a1a1a;
}

body {
  background-color: var(--background-base);
  color: var(--text-base);
  transition:
    background-color 0.3s ease,
    color 0.3s ease;
}

/* Base styles for elements that Tailwind might not directly control with the variables */
h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--text-base);
}

a {
  color: var(--communiv-primary);
}

/* Adjusting the scrollbar for better aesthetics, especially in dark mode */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: var(--card-bg);
}

::-webkit-scrollbar-thumb {
  background: var(--communiv-primary);
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--communiv-secondary);
}