/* theme.css — reusable light/dark toggle component
   Extracted from webb design system (oklch color palette).

   Contract: consuming page needs:
     <input type="checkbox" id="t" class="sr-only">
     <label for="t" class="toggle"></label>
*/

@property --scroll-hue {
  syntax: '<number>';
  initial-value: 55;
  inherits: true;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
}

:root {
  --hue: 55;
  --scroll-hue: var(--hue);

  /* ── Light palette ── */
  --ground-l: oklch(0.96 0.012 var(--hue));
  --text-l:   oklch(0.15 0.02  var(--hue));
  --text-2-l: oklch(0.45 0.025 var(--hue));
  --rule-l:   oklch(0.84 0.02  var(--hue));
  --gold-l:        oklch(0.48 0.16 var(--scroll-hue));
  --gold-bright-l: oklch(0.40 0.18 var(--scroll-hue));
  --glow-l:        oklch(0.91 0.05 var(--scroll-hue) / 0.2);

  /* ── Dark palette ── */
  --ground-d: oklch(0.16 0.025 var(--hue));
  --text-d:   oklch(0.82 0.02  var(--hue));
  --text-2-d: oklch(0.50 0.025 var(--hue));
  --rule-d:   oklch(0.28 0.02  var(--hue));
  --gold-d:        oklch(0.65 0.17 var(--scroll-hue));
  --gold-bright-d: oklch(0.75 0.19 var(--scroll-hue));
  --glow-d:        oklch(0.20 0.04 var(--scroll-hue) / 0.4);

  /* ── Active: light by default ── */
  --ground:      var(--ground-l);
  --text:        var(--text-l);
  --text-2:      var(--text-2-l);
  --rule:        var(--rule-l);
  --gold:        var(--gold-l);
  --gold-bright: var(--gold-bright-l);
  --glow:        var(--glow-l);
  color-scheme: light;

  /* ── Fonts ── */
  --font-serif: 'Source Serif 4', Georgia, serif;
  --font-mono:  'DM Mono', Menlo, monospace;

  /* ── Timing ── */
  --ease:     cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration: 0.35s;
}

/* ── System prefers dark ── */

@media (prefers-color-scheme: dark) {
  :root {
    --ground:      var(--ground-d);
    --text:        var(--text-d);
    --text-2:      var(--text-2-d);
    --rule:        var(--rule-d);
    --gold:        var(--gold-d);
    --gold-bright: var(--gold-bright-d);
    --glow:        var(--glow-d);
    color-scheme: dark;
  }
}

/* ── Toggle flips from system default ── */

:root:has(#t:checked) {
  --ground:      var(--ground-d);
  --text:        var(--text-d);
  --text-2:      var(--text-2-d);
  --rule:        var(--rule-d);
  --gold:        var(--gold-d);
  --gold-bright: var(--gold-bright-d);
  --glow:        var(--glow-d);
  color-scheme: dark;
}

/* ── Toggle + dark system → flip back to light ── */

@media (prefers-color-scheme: dark) {
  :root:has(#t:checked) {
    --ground:      var(--ground-l);
    --text:        var(--text-l);
    --text-2:      var(--text-2-l);
    --rule:        var(--rule-l);
    --gold:        var(--gold-l);
    --gold-bright: var(--gold-bright-l);
    --glow:        var(--glow-l);
    color-scheme: light;
  }
}

/* ── Toggle dot ── */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.toggle {
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 50%;
  border: 1.5px solid var(--text-2);
  background: transparent;
  cursor: pointer;
  transition:
    border-color var(--duration) var(--ease),
    background var(--duration) var(--ease);
}

.toggle:hover {
  border-color: var(--gold);
}

:root:has(#t:focus-visible) .toggle {
  outline: 1px solid var(--gold);
  outline-offset: 3px;
}

/* ── Selection ── */

::selection {
  background: var(--gold);
  color: var(--ground);
}

/* ── Reduced motion ── */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}