/* Accessibility: theme, color-vision modes, font scale, skip link, focus */

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: var(--space-4);
  z-index: 1000;
  padding: 0.55rem 0.9rem;
  border-radius: var(--radius-md);
  background: var(--color-ink);
  color: var(--color-paper);
  text-decoration: none;
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  transform: translateY(-200%);
}

.skip-link:focus,
.skip-link:focus-visible {
  transform: translateY(0);
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

:where(a, button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

html[data-font-scale="100"] {
  font-size: 100%;
}

html[data-font-scale="125"] {
  font-size: 125%;
}

html[data-font-scale="150"] {
  font-size: 150%;
}

/* ── Light (day) theme ── */
html[data-theme="light"] {
  --color-paper: #eef1f5;
  --color-paper-raised: #ffffff;
  --color-ink: #1a1f29;
  --color-ink-muted: #4a5568;
  --color-ink-faint: #718096;
  --color-border: #d0d7e2;
  --color-border-strong: #9aa8bc;
  --color-accent: #c2410c;
  --color-accent-soft: rgba(194, 65, 12, 0.12);
  --color-accent-hover: #9a3412;
  --color-status-planned: #64748b;
  --color-status-progress: #b45309;
  --color-status-progress-bg: rgba(180, 83, 9, 0.1);
  --color-status-ready: #047857;
  --color-status-ready-bg: rgba(4, 120, 87, 0.1);
  --bg-glow-1: rgba(194, 65, 12, 0.08);
  --bg-glow-2: rgba(15, 23, 42, 0.04);
  --bg-grad-top: #f7f8fb;
  --bg-grad-mid: var(--color-paper);
  --bg-grad-bottom: #e8edf4;
  --header-bg: rgba(255, 255, 255, 0.88);
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.08);
  --shadow-md: 0 18px 40px rgba(15, 23, 42, 0.12);
}

/* Dark defaults for body chrome vars (tokens.css holds color tokens) */
html[data-theme="dark"],
html:not([data-theme]) {
  --bg-glow-1: rgba(226, 74, 50, 0.16);
  --bg-glow-2: rgba(244, 239, 230, 0.05);
  --bg-grad-top: #050608;
  --bg-grad-mid: var(--color-paper);
  --bg-grad-bottom: #0a0b10;
  --header-bg: rgba(18, 21, 28, 0.82);
}

/* ── Color-vision / elderly-friendly palettes (override accent + status) ── */
/* Deuteranopia-friendly: blue + amber, avoid red/green reliance */
html[data-color-mode="deuteranopia"] {
  --color-accent: #2563eb;
  --color-accent-soft: rgba(37, 99, 235, 0.16);
  --color-accent-hover: #1d4ed8;
  --color-status-progress: #d97706;
  --color-status-progress-bg: rgba(217, 119, 6, 0.14);
  --color-status-ready: #0284c7;
  --color-status-ready-bg: rgba(2, 132, 199, 0.14);
  --bg-glow-1: rgba(37, 99, 235, 0.14);
}

/* Protanopia-friendly: teal + gold */
html[data-color-mode="protanopia"] {
  --color-accent: #0d9488;
  --color-accent-soft: rgba(13, 148, 136, 0.16);
  --color-accent-hover: #0f766e;
  --color-status-progress: #ca8a04;
  --color-status-progress-bg: rgba(202, 138, 4, 0.14);
  --color-status-ready: #0891b2;
  --color-status-ready-bg: rgba(8, 145, 178, 0.14);
  --bg-glow-1: rgba(13, 148, 136, 0.14);
}

/* High contrast for low vision / elderly */
html[data-color-mode="high-contrast"][data-theme="dark"],
html[data-color-mode="high-contrast"]:not([data-theme]) {
  --color-paper: #000000;
  --color-paper-raised: #0a0a0a;
  --color-ink: #ffff00;
  --color-ink-muted: #f5f5a0;
  --color-ink-faint: #d4d46a;
  --color-border: #ffff00;
  --color-border-strong: #ffffff;
  --color-accent: #00ffff;
  --color-accent-soft: rgba(0, 255, 255, 0.2);
  --color-accent-hover: #7fffff;
  --color-status-planned: #ffffff;
  --color-status-progress: #ffff00;
  --color-status-progress-bg: rgba(255, 255, 0, 0.15);
  --color-status-ready: #00ff00;
  --color-status-ready-bg: rgba(0, 255, 0, 0.12);
  --bg-glow-1: transparent;
  --bg-glow-2: transparent;
  --bg-grad-top: #000;
  --bg-grad-mid: #000;
  --bg-grad-bottom: #000;
  --header-bg: rgba(0, 0, 0, 0.95);
}

html[data-color-mode="high-contrast"][data-theme="light"] {
  --color-paper: #ffffff;
  --color-paper-raised: #ffffff;
  --color-ink: #000000;
  --color-ink-muted: #1a1a1a;
  --color-ink-faint: #333333;
  --color-border: #000000;
  --color-border-strong: #000000;
  --color-accent: #0000ee;
  --color-accent-soft: rgba(0, 0, 238, 0.12);
  --color-accent-hover: #0000aa;
  --color-status-planned: #333333;
  --color-status-progress: #8b4513;
  --color-status-progress-bg: rgba(139, 69, 19, 0.12);
  --color-status-ready: #006400;
  --color-status-ready-bg: rgba(0, 100, 0, 0.12);
  --bg-glow-1: transparent;
  --bg-glow-2: transparent;
  --bg-grad-top: #fff;
  --bg-grad-mid: #fff;
  --bg-grad-bottom: #fff;
  --header-bg: rgba(255, 255, 255, 0.98);
}

/* ── A11y toolbar ── */
.a11y-panel {
  position: relative;
  z-index: 12;
}

.a11y-panel__summary {
  list-style: none;
  appearance: none;
  cursor: pointer;
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-md);
  background: var(--color-accent-soft);
  color: var(--color-accent);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: var(--space-2) var(--space-4);
  user-select: none;
  white-space: nowrap;
}

.a11y-panel__summary::-webkit-details-marker {
  display: none;
}

.a11y-panel__summary:hover,
.a11y-panel[open] > .a11y-panel__summary {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.a11y-panel__body {
  position: absolute;
  right: 0;
  top: calc(100% + 0.4rem);
  min-width: min(20rem, 86vw);
  padding: var(--space-4);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  background: var(--color-paper-raised);
  box-shadow: var(--shadow-md);
  display: grid;
  gap: var(--space-4);
}

.a11y-group {
  display: grid;
  gap: var(--space-2);
}

.a11y-group__label {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-ink-muted);
  letter-spacing: 0.04em;
}

.a11y-options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.a11y-options button {
  appearance: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-ink-muted);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
}

.a11y-options button:hover {
  color: var(--color-ink);
  border-color: var(--color-border-strong);
}

.a11y-options button[aria-pressed="true"] {
  color: var(--color-accent);
  background: var(--color-accent-soft);
  border-color: var(--color-accent);
}

.a11y-hint {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--color-ink-faint);
  line-height: 1.45;
}

@media (max-width: 720px) {
  .a11y-panel__body {
    right: auto;
    left: 0;
  }
}