CSS Accent Color Generator

/* Accent Color Styles */
:root {
  accent-color: #0066cc;
  color-scheme: light dark;
}

/* ================================================
   CSS Accent Color - Complete Implementation
   ================================================ */

/* Root accent color definition */
:root {
  --accent-primary: #0066cc;
  accent-color: var(--accent-primary);
  color-scheme: light dark;
}

/* Apply globally to all form controls */
*,
*::before,
*::after {
  accent-color: inherit;
}

/* Individual element styling if needed */
input[type="checkbox"] {
  accent-color: var(--accent-primary);
}

input[type="radio"] {
  accent-color: var(--accent-primary);
}

input[type="range"] {
  accent-color: var(--accent-primary);
}

progress {
  accent-color: var(--accent-primary);
}

/* Dark mode variant */
@media (prefers-color-scheme: dark) {
  :root {
    --accent-primary: #1e84ea;
  }
}

/* Custom themed form group */
.form-group--primary {
  --accent-primary: #0066cc;
}

.form-group--success {
  --accent-primary: #10b981;
}

.form-group--warning {
  --accent-primary: #f59e0b;
}

.form-group--danger {
  --accent-primary: #ef4444;
}

/* Form group inherits accent color */
.form-group {
  accent-color: var(--accent-primary);
}

/* Auto contrast text color based on accent */
.accent-text {
  color: #0066cc;
}

/* Accent background with auto text color */
.accent-bg {
  background-color: #0066cc;
  color: #ffffff;
}

/* Focus ring using accent color */
input:focus-visible,
select:focus-visible,
button:focus-visible {
  outline: 2px solid #0066cc;
  outline-offset: 2px;
}

/* Selection highlighting */
::selection {
  background-color: #0066cc;
  color: #ffffff;
}

/* Links matching accent color */
a {
  color: #0066cc;
}

a:hover {
  color: #0052b8;
}

/* Buttons with accent color theme */
.btn-accent {
  background-color: #0066cc;
  color: #ffffff;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.btn-accent:hover {
  background-color: #0057bd;
}

.btn-accent:active {
  background-color: #004db3;
}

.btn-accent-outline {
  background-color: transparent;
  color: #0066cc;
  border: 2px solid #0066cc;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-accent-outline:hover {
  background-color: #0066cc;
  color: #ffffff;
}