/*
 * MyAug - Brand Unification CSS
 * Version: 1.0
 * Author: dev-design-0
 *
 * This stylesheet aligns the public marketing website with the official
 * "Blue-Gray Noir" color palette used in the MyAug Dashboard.
 */

:root {
  /* Dark Mode (Blue-Gray Noir) - PRIMARY PALETTE */
  /* Sourced from KB-DASHBOARD-COLORS-001 */

  /* Background Colors */
  --bg-canvas: #1e1d26;       /* Page background */
  --bg-card: #2d2c36;         /* Card, widget, and panel backgrounds */
  --bg-secondary: #41404c;   /* Sidebar, other subtle elements */
  --bg-tertiary: #4d4b5a;    /* Hover states */
  --bg-elevated: #56546a;    /* Modals, dropdowns */

  /* Text Colors (WCAG AA Compliant) */
  --text-primary: #e8e7ed;      /* Primary body text */
  --text-secondary: #b8b7c3;    /* Secondary, less important text */
  --text-tertiary: #8b8a96;     /* Tertiary, subtle text */
  --text-heading: #ffffff;      /* All headings */

  /* Accent Colors */
  --accent-primary: #6b9cff;    /* Primary buttons, links, highlights */
  --accent-hover: #5a8ef5;      /* Hover state for primary accent */
  --text-link: #6b9cff;         /* Link color */

  /* Status Colors */
  --color-success: #4ade80;     /* Success messages, icons */
  --color-error: #f87171;       /* Error messages, icons */
  --color-warning: #fbbf24;     /* Warning messages, icons */

  /* Borders */
  --border-default: #4d4b5a;    /* Default borders */
  --border-subtle: #3a394a;     /* Softer borders */
  --border-strong: #63627a;     /* More prominent borders */
}

/*
 * RECOMMENDATIONS - Apply these styles to the public website's main stylesheet.
 */

/* 1. Set the foundational background and text colors */
body {
  background-color: var(--bg-canvas);
  color: var(--text-primary);
}

/* 2. Update heading colors */
h1, h2, h3, h4, h5, h6 {
  color: var(--text-heading);
}

/* 3. Standardize button and link styles */
.button-primary,
.cta-button {
  background-color: var(--accent-primary);
  color: var(--text-heading);
  /* Add other button styles like padding, border-radius, etc. */
}

.button-primary:hover,
.cta-button:hover {
  background-color: var(--accent-hover);
}

a,
.link {
  color: var(--text-link);
  text-decoration: none;
}

a:hover,
.link:hover {
  text-decoration: underline;
}

/* 4. Update card and panel styles */
.card,
.panel {
  background-color: var(--bg-card);
  border: 1px solid var(--border-default);
}

/* 5. Replace off-brand highlight colors */
.highlight-text,
.special-word {
    color: var(--accent-primary);
}