/*
 * Custom color palette overrides for HostyEC website.
 *
 * This stylesheet defines a fresh and elegant palette based around
 * teal (#308285) and light aqua (#7AC4DF).  By redefining CSS
 * custom properties on the :root selector, we override the default
 * variables from the bundled Tailwind CSS without modifying the
 * compiled stylesheet directly.  These changes apply globally across
 * the site wherever the variables are referenced.
 */

:root {
  /* Primary and secondary brand colors */
  --primary: #308285;
  --primary-foreground: #ffffff;
  --secondary: #7ac4df;
  --secondary-foreground: #ffffff;

  /* Accent and muted surfaces */
  --accent: #7ac4df;
  --accent-foreground: #308285;
  --muted: #f2fbfa;
  --muted-foreground: #308285;

  /* Border and ring colors using semi-transparent teal */
  --border: #30828533;
  --ring: #30828566;

  /* Chart colors used throughout the UI */
  --chart-1: #308285;
  --chart-2: #7ac4df;
  --chart-3: #e0e0e0;
  --chart-4: #f2fbfa;
  --chart-5: #b0e0e6;

  /* Override Tailwind default palette for blue/green shades to align with Hosty branding.  
   * These variables are used internally by the bundled Tailwind CSS when classes like
   * `text-blue-600` or `bg-green-600` are referenced.  By redefining them here,
   * we ensure those classes adopt our primary palette instead of the default blues and greens. */
  --color-blue-600: #308285;    /* primary teal */
  --color-blue-700: #27696f;    /* darker teal */
  --color-blue-800: #1e5158;    /* deepest teal */
  --color-green-600: #308285;   /* unify green accents with primary */

  /* Sidebar palette for light theme */
  --sidebar: #f2fbfa;
  --sidebar-foreground: #308285;
  --sidebar-primary: #308285;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #7ac4df;
  --sidebar-accent-foreground: #308285;
  --sidebar-border: #30828533;
  --sidebar-ring: #30828566;
}

/* Additional definitions for dark mode.  These adjust
 * the sidebar to retain contrast when the theme is dark.
 */
.dark {
  --sidebar: #308285;
  --sidebar-foreground: #ffffff;
  --sidebar-primary: #7ac4df;
  --sidebar-primary-foreground: #308285;
  --sidebar-accent: #7ac4df;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: #7ac4df33;
  --sidebar-ring: #7ac4df66;
}