/* ========================================================================
   theme-toggle.css -- tri-state light/dark/system control in the header

   Component layer. Paired with js/theme-toggle.js and the _ThemeIcon
   partial. Consumes tokens from tokens.css.

   The button carries [data-theme-state] = light | dark | system, which
   selects which of the three glyphs is visible. Doing this in CSS rather
   than JS keeps the prerendered HTML correct before any script runs.

   Sizing matches .nav-toggle (44px tap target, same border and radius) so
   the two controls read as a pair.

   Breakpoints (inlined; custom properties are not allowed in @media):
     md: 768px
   ======================================================================== */

/* Wrapper that keeps .site-header__inner's flex arithmetic unchanged --
   see nav.css section 1. */
.site-header__controls {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.theme-toggle {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-ink);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;            /* WCAG 2.5.5 minimum tap target */
    height: 44px;
    padding: 0;
}

.theme-toggle:hover {
    border-color: var(--color-border-strong);
    color: var(--color-accent-ink);
}

.theme-toggle__icon {
    width: 18px;
    height: 18px;
    display: none;
}

/* Exactly one glyph per state. */
.theme-toggle[data-theme-state="light"]  .theme-toggle__icon--light,
.theme-toggle[data-theme-state="dark"]   .theme-toggle__icon--dark,
.theme-toggle[data-theme-state="system"] .theme-toggle__icon--system {
    display: block;
}