/* TodoLander — shared styles */
@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400;1,700&family=Instrument+Serif:ital@0;1&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root,
:root[data-theme="light"] {
  --paper: oklch(0.98 0.008 80);
  --paper-2: oklch(0.96 0.010 80);
  --paper-3: oklch(0.93 0.012 80);
  --ink: oklch(0.18 0.010 60);
  --ink-2: oklch(0.32 0.010 60);
  --ink-3: oklch(0.52 0.010 60);
  --rule: oklch(0.88 0.010 70);
  --rule-2: oklch(0.82 0.010 70);
  --accent: oklch(0.62 0.14 40);
  --accent-ink: oklch(0.98 0.008 80);
  --shadow-color: 0 0 0;

  /* Tag colors — muted, cohesive */
  --tag-red:    oklch(0.68 0.14 25);
  --tag-orange: oklch(0.74 0.13 55);
  --tag-yellow: oklch(0.84 0.13 95);
  --tag-green:  oklch(0.70 0.12 150);
  --tag-blue:   oklch(0.66 0.12 240);
  --tag-purple: oklch(0.62 0.12 300);
  --tag-pink:   oklch(0.76 0.11 350);

  --serif: 'Instrument Serif', Georgia, serif;
  --sans: 'Inter', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;

  color-scheme: light;
}

:root[data-theme="dark"] {
  --paper: oklch(0.16 0.008 60);
  --paper-2: oklch(0.20 0.009 60);
  --paper-3: oklch(0.24 0.010 60);
  --ink: oklch(0.96 0.008 80);
  --ink-2: oklch(0.82 0.008 80);
  --ink-3: oklch(0.62 0.010 70);
  --rule: oklch(0.28 0.010 60);
  --rule-2: oklch(0.36 0.010 60);
  --accent: oklch(0.72 0.14 45);
  --accent-ink: oklch(0.16 0.008 60);
  --shadow-color: 0 0 0;

  /* Tag colors slightly brighter on dark */
  --tag-red:    oklch(0.72 0.15 25);
  --tag-orange: oklch(0.78 0.14 55);
  --tag-yellow: oklch(0.86 0.14 95);
  --tag-green:  oklch(0.74 0.13 150);
  --tag-blue:   oklch(0.72 0.13 240);
  --tag-purple: oklch(0.68 0.14 300);
  --tag-pink:   oklch(0.80 0.12 350);

  color-scheme: dark;
}

html, body { transition: background-color 0.25s ease, color 0.25s ease; }

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

button {
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}

input, textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

/* Suppress focus ring on mouse interaction only; keyboard focus is handled below */
input:focus:not(:focus-visible),
textarea:focus:not(:focus-visible),
button:focus:not(:focus-visible) { outline: none; }

/* Keyboard focus rings — always visible when navigating by keyboard */
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}
.toggle:focus-visible { outline-offset: 3px; }

/* Letterpressed serif display */
.display {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1;
}

.label-caps {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-3);
}

.hairline { border: 0; border-top: 1px solid var(--rule); }

/* Tag swatch */
.swatch {
  width: 14px; height: 14px; border-radius: 50%;
  display: inline-block;
  border: 1px solid color-mix(in oklab, currentColor 25%, transparent);
}

/* Scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--rule-2); border-radius: 4px; }
::-webkit-scrollbar-track { background: transparent; }

/* ===== Accessibility — dyslexia font ===== */
[data-a11y-dyslexia] { --sans: 'Atkinson Hyperlegible', system-ui, sans-serif; }

/* ===== Accessibility — colorblind shapes ===== */
/* Dots get a slightly larger size so shapes are legible */
[data-a11y-colorblind] .day-dot { width: 9px; height: 9px; }
[data-a11y-colorblind] .sr-dot  { width: 9px; height: 9px; }

/* red — circle (default) */
[data-a11y-colorblind] .day-dot[data-color="red"],
[data-a11y-colorblind] .sr-dot[data-color="red"],
[data-a11y-colorblind] .dot-mini[data-color="red"] { border-radius: 50%; }

/* orange — square */
[data-a11y-colorblind] .day-dot[data-color="orange"],
[data-a11y-colorblind] .sr-dot[data-color="orange"],
[data-a11y-colorblind] .dot-mini[data-color="orange"] { border-radius: 2px; clip-path: none; }

/* yellow — triangle up */
[data-a11y-colorblind] .day-dot[data-color="yellow"],
[data-a11y-colorblind] .sr-dot[data-color="yellow"],
[data-a11y-colorblind] .dot-mini[data-color="yellow"] { clip-path: polygon(50% 0%, 0% 100%, 100% 100%); border-radius: 0; }

/* green — diamond */
[data-a11y-colorblind] .day-dot[data-color="green"],
[data-a11y-colorblind] .sr-dot[data-color="green"],
[data-a11y-colorblind] .dot-mini[data-color="green"] { clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); border-radius: 0; }

/* blue — plus / cross */
[data-a11y-colorblind] .day-dot[data-color="blue"],
[data-a11y-colorblind] .sr-dot[data-color="blue"],
[data-a11y-colorblind] .dot-mini[data-color="blue"] { clip-path: polygon(33% 0%,67% 0%,67% 33%,100% 33%,100% 67%,67% 67%,67% 100%,33% 100%,33% 67%,0% 67%,0% 33%,33% 33%); border-radius: 0; }

/* purple — triangle down */
[data-a11y-colorblind] .day-dot[data-color="purple"],
[data-a11y-colorblind] .sr-dot[data-color="purple"],
[data-a11y-colorblind] .dot-mini[data-color="purple"] { clip-path: polygon(0% 0%, 100% 0%, 50% 100%); border-radius: 0; }

/* pink — hexagon */
[data-a11y-colorblind] .day-dot[data-color="pink"],
[data-a11y-colorblind] .sr-dot[data-color="pink"],
[data-a11y-colorblind] .dot-mini[data-color="pink"] { clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); border-radius: 0; }

/* ===== Accessibility — reduce motion ===== */
/* Respect OS preference automatically */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
/* Manual toggle */
[data-a11y-reduce-motion] *,
[data-a11y-reduce-motion] *::before,
[data-a11y-reduce-motion] *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
  scroll-behavior: auto !important;
}

/* ===== Accessibility — text size ===== */
[data-a11y-text="small"] { zoom: 0.875; }
[data-a11y-text="large"]  { zoom: 1.125; }

/* ===== Accessibility — high contrast (light theme) ===== */
[data-a11y-high-contrast][data-theme="light"],
[data-a11y-high-contrast]:not([data-theme="dark"]) {
  --paper:   oklch(1.00 0 0);
  --paper-2: oklch(0.95 0 0);
  --paper-3: oklch(0.88 0 0);
  --ink:     oklch(0.03 0 0);
  --ink-2:   oklch(0.18 0 0);
  --ink-3:   oklch(0.38 0 0);
  --rule:    oklch(0.58 0 0);
  --rule-2:  oklch(0.48 0 0);
  --accent:  oklch(0.46 0.18 40);
  --tag-red:    oklch(0.40 0.20 25);
  --tag-orange: oklch(0.46 0.18 55);
  --tag-yellow: oklch(0.50 0.17 95);
  --tag-green:  oklch(0.40 0.17 150);
  --tag-blue:   oklch(0.38 0.17 240);
  --tag-purple: oklch(0.38 0.17 300);
  --tag-pink:   oklch(0.44 0.16 350);
}

/* ===== Accessibility — high contrast (dark theme) ===== */
[data-a11y-high-contrast][data-theme="dark"] {
  --paper:   oklch(0.04 0 0);
  --paper-2: oklch(0.10 0 0);
  --paper-3: oklch(0.16 0 0);
  --ink:     oklch(0.98 0 0);
  --ink-2:   oklch(0.88 0 0);
  --ink-3:   oklch(0.72 0 0);
  --rule:    oklch(0.42 0 0);
  --rule-2:  oklch(0.52 0 0);
  --accent:  oklch(0.72 0.18 40);
  --tag-red:    oklch(0.74 0.22 25);
  --tag-orange: oklch(0.80 0.20 55);
  --tag-yellow: oklch(0.90 0.20 95);
  --tag-green:  oklch(0.76 0.20 150);
  --tag-blue:   oklch(0.72 0.20 240);
  --tag-purple: oklch(0.72 0.20 300);
  --tag-pink:   oklch(0.82 0.18 350);
}