/* ----------------------------------------------------------
  Color scales
  ---------------------------------------------------------- */
:root {
  /* Monochrome light */
  --c-bg:      #ffffff; /* white */
  --c-surface: #fafafa; /* gray‑50 */
  --c-text:    #111111; /* near‑black */
  --c-muted:   #6b7280; /* gray‑500 */
  --c-border:  #d1d5db; /* gray‑300 */

  /* Default accent (cobalt) */
  --c-accent: #1d4ed8; /* blue‑700 */

  /* Accent palette — dark‑neon hues (WCAG‑AA on white & black) */
  --c-red:     #b91c1c; /* red‑700 */
  --c-orange:  #c2410c; /* orange‑700 */
  --c-yellow:  #a16207; /* yellow‑700 */
  --c-lime:    #4d7c0f; /* lime‑700 */
  --c-green:   #15803d; /* green‑700 */
  --c-teal:    #0f766e; /* teal‑700 */
  --c-cyan:    #0369a1; /* cyan‑700 */
  --c-blue:    #1d4ed8; /* blue‑700 */
  --c-indigo:  #4338ca; /* indigo‑700 */
  --c-violet:  #553c9a; /* violet‑700 */
  --c-purple:  #6b21a8; /* purple‑700 */
  --c-pink:    #be185d; /* pink‑700 */
}

@media (prefers-color-scheme: dark) {
  :root {
    --c-bg:      #000000; /* black */
    --c-surface: #1a1a1a; /* gray‑900 */
    --c-text:    #f3f4f6; /* gray‑100 */
    --c-muted:   #9ca3af; /* gray‑400 */
    --c-border:  #4b5563; /* gray‑600 */

    /* Dark defaults keep same accent set — contrast is still AA */
  }
}

/* ----------------------------------------------------------
  Accent utility classes (opt‑in)
  ---------------------------------------------------------- */
.accent-red     { --c-accent: var(--c-red); }
.accent-orange  { --c-accent: var(--c-orange); }
.accent-yellow  { --c-accent: var(--c-yellow); }
.accent-lime    { --c-accent: var(--c-lime); }
.accent-green   { --c-accent: var(--c-green); }
.accent-teal    { --c-accent: var(--c-teal); }
.accent-cyan    { --c-accent: var(--c-cyan); }
.accent-blue    { --c-accent: var(--c-blue); }
.accent-indigo  { --c-accent: var(--c-indigo); }
.accent-violet  { --c-accent: var(--c-violet); }
.accent-purple  { --c-accent: var(--c-purple); }
.accent-pink    { --c-accent: var(--c-pink); }
.accent-body    { --c-accent: var(--c-text); }

/* Example: <div class="accent-teal"> will recolor its nested links/buttons */