/* Shared tokens and primitives. App and login use the same visual system. */
:root {
  --color-canvas: #f1f5f4;
  --color-surface: #ffffff;
  --color-surface-soft: #f4f7f6;
  --color-text: #182424;
  --color-muted: #475b58;
  --color-border: #cedbd8;
  --color-control-border: #738a85;
  --color-action: #08665b;
  --color-action-hover: #07554c;
  --color-action-soft: #e0f2ed;
  --color-action-text: #08594f;
  --color-focus: #08796b;
  --color-green: #047857;
  --color-green-soft: #ecfdf5;
  --color-blue: #1d4ed8;
  --color-blue-soft: #eff6ff;
  --color-red: #b91c1c;
  --color-red-soft: #fef2f2;
  --color-warning: #92400e;
  --color-warning-soft: #fffbeb;
  --shadow-panel: 0 6px 20px #0f172a14;
  --shadow-dialog: 0 20px 72px #0f172a33;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --radius-control: 8px;
  --radius-card: 8px;
  --radius-dialog: 16px;
  --target-size: 44px;
  --sidebar-width: 368px;
  --header-height: calc(64px + env(safe-area-inset-top, 0px));
  --visual-viewport-height: 100dvh;
  --sheet-height: min(calc(var(--visual-viewport-height) * 0.45), 440px);
  --z-map-ui: 600;
  --z-sidebar: 800;
  --z-header: 1000;
  --z-feedback: 1200;
  /* Compatibility aliases for operational widgets. */
  --ink: var(--color-text);
  --muted: var(--color-muted);
  --border: var(--color-border);
  --surface: var(--color-surface);
  --green: var(--color-green);
  --blue: var(--color-blue);
  --red: var(--color-red);
  font-family:
    "Segoe UI",
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    sans-serif;
  font-size: 16px;
  font-synthesis: none;
  color-scheme: light;
  color: var(--color-text);
  background: var(--color-canvas);
}

:root[data-theme="dark"] {
  --color-canvas: #101616;
  --color-surface: #192321;
  --color-surface-soft: #212e2b;
  --color-text: #eff6f3;
  --color-muted: #b2c5bf;
  --color-border: #364945;
  --color-control-border: #6e8b84;
  --color-action: #16796a;
  --color-action-hover: #126659;
  --color-action-soft: #213e37;
  --color-action-text: #a3f1da;
  --color-focus: #87e6ca;
  --color-green: #6ee7b7;
  --color-green-soft: #14352e;
  --color-blue: #93c5fd;
  --color-blue-soft: #182b4d;
  --color-red: #fda4af;
  --color-red-soft: #3c1b2c;
  --color-warning: #fcd34d;
  --color-warning-soft: #3b3018;
  --shadow-panel: 0 6px 20px #00000030;
  --shadow-dialog: 0 20px 72px #00000066;
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: var(--color-canvas);
  color: var(--color-text);
  line-height: 1.5;
}
button,
input,
select,
textarea {
  font: inherit;
}
button,
a,
input,
select,
textarea,
summary {
  touch-action: manipulation;
}
button,
summary {
  cursor: pointer;
}
button {
  color: inherit;
}
a {
  color: var(--color-action-text);
  text-underline-offset: 3px;
}
svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}
h1,
h2,
h3,
p {
  margin: 0;
}
h1,
h2,
h3 {
  line-height: 1.3;
  font-weight: 650;
}
h2 {
  font-size: 20px;
}
h3 {
  font-size: 16px;
}
p + p {
  margin-top: var(--space-3);
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
}
button:disabled,
input:disabled,
select:disabled,
textarea:disabled {
  cursor: not-allowed;
}
button:disabled {
  opacity: 0.62;
}
label {
  display: block;
  font-size: 14px;
  font-weight: 600;
}
input:not([type="checkbox"]):not([type="hidden"]),
select,
textarea {
  display: block;
  width: 100%;
  margin-top: var(--space-2);
  min-height: var(--target-size);
  padding: 10px 12px;
  border: 1px solid var(--color-control-border);
  border-radius: var(--radius-control);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 16px;
  line-height: 1.4;
}
input::placeholder,
textarea::placeholder {
  color: var(--color-muted);
  opacity: 1;
}
input[type="checkbox"] {
  accent-color: var(--color-action);
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
textarea {
  resize: vertical;
}
label small,
.small-text {
  display: block;
  color: var(--color-muted);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
}
label small {
  margin-top: var(--space-2);
}
summary {
  min-height: var(--target-size);
  font-size: 14px;
  font-weight: 600;
  padding: 11px 0;
}
.btn,
.text-btn,
.icon-btn,
.action-card {
  min-height: var(--target-size);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 10px 14px;
  text-decoration: none;
}
.primary {
  color: #ffffff;
  background: var(--color-action);
  border-color: var(--color-action);
}
.primary:hover:not(:disabled) {
  background: var(--color-action-hover);
  border-color: var(--color-action-hover);
}
.secondary {
  color: var(--color-text);
  background: var(--color-surface);
  border-color: var(--color-control-border);
}
.secondary:hover:not(:disabled) {
  background: var(--color-surface-soft);
}
.text-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 10px 12px;
  color: var(--color-action-text);
  background: transparent;
  border-color: transparent;
}
.text-btn:hover:not(:disabled) {
  background: var(--color-action-soft);
}
.icon-btn {
  display: inline-grid;
  place-items: center;
  width: var(--target-size);
  padding: 0;
  font-size: 25px;
  color: var(--color-muted);
  background: var(--color-surface-soft);
}
.action-card {
  display: grid;
  gap: var(--space-1);
  width: 100%;
  padding: var(--space-4);
  text-align: left;
  color: var(--color-text);
  background: var(--color-surface-soft);
}
.action-card:hover {
  border-color: var(--color-action);
}
.action-card b {
  font-size: 16px;
}
.action-card span {
  color: var(--color-muted);
  font-size: 14px;
  font-weight: 400;
}
.eyebrow,
.section-label {
  display: block;
  color: var(--color-muted);
  font-size: 14px;
  line-height: 1.4;
  font-weight: 650;
}
.dot {
  display: inline-block;
  position: relative;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
  vertical-align: middle;
}
.dot.green {
  background: var(--color-green);
}
.dot.blue {
  background: var(--color-blue);
}
.dot.red {
  background: var(--color-red);
}
.dot.available {
  background: var(--color-green);
  overflow: hidden;
}
.dot.available::after {
  content: "";
  position: absolute;
  inset: 0 0 0 50%;
  background: var(--color-blue);
}
.required {
  color: var(--color-red);
}
.form-error,
.warning-box,
.info-box,
.form-unsaved {
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  font-size: 14px;
  line-height: 1.5;
}
.form-error {
  color: var(--color-red);
  background: var(--color-red-soft);
  border-color: var(--color-red);
}
.warning-box,
.form-unsaved {
  color: var(--color-warning);
  background: var(--color-warning-soft);
  border-color: var(--color-warning);
}
.info-box {
  color: var(--color-action-text);
  background: var(--color-action-soft);
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.theme-switch {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-1);
  padding: var(--space-1);
  background: var(--color-surface-soft);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
}
.theme-switch button {
  min-height: var(--target-size);
  padding: var(--space-2) var(--space-3);
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--color-muted);
  font-size: 14px;
  font-weight: 600;
}
.theme-switch button[aria-pressed="true"] {
  background: var(--color-action-soft);
  color: var(--color-action-text);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto;
    animation: none;
    transition: none;
  }
}

input:not([type="checkbox"]):not([type="hidden"])[aria-invalid="true"],
select[aria-invalid="true"],
textarea[aria-invalid="true"] {
  border-color: var(--color-red);
}