/**
 * Kindra AI Content Bridge
 * Enterprise-focused color system for landing/content pages
 * Light mode only for clarity and brand consistency
 */

:root {
  /* Primary brand palette */
  --color-primary: #7D5BA6;       /* African Violet - core brand */
  --color-secondary: #E6B325;     /* Honey Gold */
  --color-tertiary: #F27059;      /* Coral */

  /* Background and text colors */
  --color-background: #FFFFFF;    /* Clean white background */
  --color-foreground: #333340;    /* Near-black with purple undertone */

  /* Surface variations */
  --color-surface: rgba(125, 91, 166, 0.1);
  --color-surface-alt: rgba(230, 179, 37, 0.1);
  --color-surface-alt-2: rgba(242, 112, 89, 0.1);
  --color-surface-border: rgba(125, 91, 166, 0.3);
  --color-surface-alt-border: rgba(230, 179, 37, 0.3);
  --color-surface-alt-2-border: rgba(242, 112, 89, 0.3);
  --color-surface-disabled: #ecedf5;
  --color-surface-disabled-border: #c3c6d4;

  /* State colors */
  --color-alert: #F27059;         /* Coral for alerts */
  --color-warning: #E6B325;       /* Honey Gold for warnings */
  --color-error: #D83A52;         /* Darker red for errors - WCAG compliant */
  --color-success: #00854D;       /* Deeper green for success - WCAG compliant */
  --color-muted: #676879;         /* Muted text */

  /* Link colors */
  --color-link: #664A88;          /* Darker African Violet for link accessibility */
  --color-link-hover: #553D72;    /* Even darker hover state for light mode */

  /* Text colors */
  --color-headline: #333340;      /* Near-black headline text */
  --color-body: #4D4D5E;          /* Dark gray body text with better contrast */

  /* Interactive states */
  --color-interactive-default: #7D5BA6; /* African Violet for buttons */
  --color-interactive-hover: #664A88;   /* Darker hover state */
  --color-interactive-active: #553D72;  /* Even darker active state */
}

/* Override background image for content pages */
body {
  background-image: none !important; /* Remove background image */
  background-color: var(--color-background); /* Use solid background color */
}

/* Basic styling for content pages */
body {
  color: var(--color-body);
  font-family: 'Atkinson Hyperlegible', sans-serif;
}

a {
  color: var(--color-link);
  text-decoration-color: rgba(102, 74, 136, 0.3);
  transition: all 0.2s ease;
}

a:hover {
  color: var(--color-link-hover);
  text-decoration-color: rgba(102, 74, 136, 0.6);
}

/* Prose styling for Tailwind Typography */
.prose h1, 
.prose h2, 
.prose h3, 
.prose h4, 
.prose h5, 
.prose h6 {
  color: var(--color-headline);
}

.prose p {
  color: var(--color-body);
}

.prose a {
  color: var(--color-link);
  text-decoration-color: rgba(102, 74, 136, 0.3);
}

.prose a:hover {
  color: var(--color-link-hover);
  text-decoration-color: rgba(102, 74, 136, 0.6);
}

.prose blockquote {
  border-left-color: var(--color-primary);
  background-color: var(--color-surface);
  padding: 1rem 1.5rem;
}

.prose code {
  color: var(--color-primary);
  background-color: var(--color-surface);
  padding: 0.2em 0.4em;
  border-radius: 3px;
}

.prose pre {
  background-color: var(--color-surface);
  border: 1px solid var(--color-surface-border);
}

.prose table {
  border-collapse: collapse;
}

.prose thead {
  background-color: var(--color-surface);
}

.prose thead th {
  color: var(--color-headline);
}