:root {
  color-scheme: light dark;
  --ink: #14263d;
  --muted: #465e73;
  --teal: #08736e;
  --teal-dark: #075754;
  --coral: #d95f43;
  --cream: #f6f8f7;
  --surface: #ffffff;
  --surface-muted: #edf4f3;
  --line: #8497a3;
  --white: #ffffff;
  --on-accent: #ffffff;
  --on-emphasis: #ffffff;
  --success: #137a43;
  --success-muted: #e4f5eb;
  --success-text: #12613c;
  --warning-muted: #fff4d6;
  --warning-text: #72510a;
  --status-muted: #e7ecee;
  --danger: #b42318;
  --danger-strong: #8f1c13;
  --interactive-muted: #e5f3f1;
  --interactive-muted-strong: #cfe9e6;
  --danger-muted: #fff1ef;
  --danger-muted-strong: #ffe0db;
  --focus: #005fcc;
  --illustration-surface: #f6efe5;
  --backdrop: rgb(16 42 67 / 0.62);
  --border-width: 0.0625rem;
  --focus-width: 0.1875rem;
  --content-wide: 75rem;
  --content-reading: 45rem;
  --header-height: 4.75rem;
  --target-minimum: 1.5rem;
  --target-comfortable: 2.75rem;
  --radius-sm: 0.625rem;
  --radius-md: 0.875rem;
  --radius-lg: 1.25rem;
  --radius-xl: 1.75rem;
  --radius-pill: 999rem;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;
  --text-xs: 0.78rem;
  --text-sm: 0.92rem;
  --text-body: clamp(1rem, 0.97rem + 0.12vw, 1.08rem);
  --shadow-1: 0 0.25rem 1rem rgb(20 38 61 / 0.08);
  --shadow-2: 0 0.75rem 2rem rgb(20 38 61 / 0.1);
  --shadow-3: 0 1.25rem 3.5rem rgb(20 38 61 / 0.18);
  --shadow: var(--shadow-3);
  --motion-fast: 140ms ease;
  --motion-standard: 220ms ease;
  --layer-backdrop: 50;
  --layer-menu: 60;
  --layer-drawer: 80;
}

html {
  background: var(--cream);
  max-inline-size: 100%;
  overflow-x: clip;
  scroll-padding-block-start: calc(var(--header-height) + var(--space-3));
}

body {
  background:
    radial-gradient(circle at 90% 0%, color-mix(in srgb, var(--teal) 10%, transparent), transparent 32rem),
    linear-gradient(180deg, var(--surface), var(--cream) 70%);
  color: var(--ink);
  font-size: var(--text-body);
  inline-size: 100%;
  max-inline-size: 100%;
  overflow-x: clip;
}

dialog {
  background: var(--surface);
  color: var(--ink);
}

a,
button,
input,
select,
textarea,
summary {
  transition:
    background-color var(--motion-fast),
    border-color var(--motion-fast),
    box-shadow var(--motion-fast),
    color var(--motion-fast),
    transform var(--motion-fast);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: var(--focus-width) solid var(--focus);
  outline-offset: var(--focus-width);
}

button,
.button,
.page-link {
  min-block-size: var(--target-comfortable);
  min-inline-size: var(--target-minimum);
}

summary,
footer a {
  min-block-size: var(--target-minimum);
  min-inline-size: var(--target-minimum);
}

button,
.button {
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-1);
  white-space: nowrap;
}

button:active,
.button:active {
  transform: translateY(0.0625rem) scale(0.99);
}

.button-secondary {
  background: var(--interactive-muted);
  color: var(--teal-dark);
}

.button-danger {
  background: var(--danger-muted);
  border: var(--border-width) solid color-mix(in srgb, var(--danger) 26%, var(--surface));
  color: var(--danger);
}

.site-header {
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(1rem);
  box-shadow: 0 0.0625rem 0 color-mix(in srgb, var(--line) 80%, transparent);
  inline-size: 100%;
  max-inline-size: none;
  min-block-size: var(--header-height);
  padding-block: var(--space-3);
  padding-inline: max(var(--space-4), calc((100% - var(--content-wide)) / 2));
  position: sticky;
  inset-block-start: 0;
  z-index: var(--layer-menu);
}

.brand,
.brand-mark,
.card,
.field input,
.field select,
.field textarea,
.data-table,
.notice,
footer {
  color: var(--ink);
}

.brand-mark {
  background: linear-gradient(145deg, var(--teal-dark), var(--ink));
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-1);
}

.card {
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  border: var(--border-width) solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  padding: clamp(var(--space-4), 3cqi, var(--space-5));
}

a.card:hover,
.retailer-card:hover {
  border-color: color-mix(in srgb, var(--teal) 65%, var(--line));
  box-shadow: var(--shadow-2);
  transform: translateY(-0.125rem);
}

.retailer-card {
  background: var(--surface);
}

.app-shell,
.section-wrap,
.hero,
footer {
  inline-size: min(100%, var(--content-wide));
  margin-inline: auto;
  padding-inline: clamp(var(--space-4), 4vw, var(--space-6));
}

.app-shell {
  container: page-shell / inline-size;
  margin-block: var(--space-4) var(--space-8);
}

.welcome {
  gap: var(--space-5);
  padding-block: clamp(var(--space-6), 6cqi, var(--space-7)) var(--space-6);
}

.welcome h1 {
  font-size: clamp(2.25rem, 7cqi, 4.5rem);
  text-wrap: balance;
}

.hero h1 {
  font-size: clamp(2.25rem, 5cqi, 3.7rem);
  text-wrap: balance;
}

h2,
h3,
.lead {
  text-wrap: pretty;
}

.field input,
.field select,
.field textarea {
  background: var(--surface);
  border: var(--border-width) solid var(--line);
  border-radius: var(--radius-sm);
  min-block-size: var(--target-comfortable);
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--focus);
  outline: var(--focus-width) solid color-mix(in srgb, var(--focus) 30%, transparent);
  outline-offset: var(--border-width);
}

.muted,
.help,
.results-count,
footer {
  color: var(--muted);
}

.notice,
.icon-tile,
.receipt-summary-view div,
.price-note {
  background: var(--surface-muted);
}

.notice {
  color: var(--teal-dark);
}

.notice-warning {
  background: color-mix(in srgb, #f5a524 14%, var(--surface));
  color: color-mix(in srgb, #6b3b05 92%, var(--ink));
}

.data-table {
  background: var(--surface);
}

.data-table th {
  background: var(--surface-muted);
}

.pagination {
  gap: var(--space-2);
  margin-block-start: var(--space-5);
}

.page-link {
  background: var(--surface);
  border: var(--border-width) solid var(--line);
  block-size: var(--target-comfortable);
  color: var(--teal-dark);
  inline-size: auto;
  min-inline-size: var(--target-comfortable);
  padding-inline: var(--space-3);
}

.page-link.current {
  background: var(--teal-dark);
  border-color: var(--teal-dark);
  color: var(--white);
  font-weight: 800;
}

footer {
  align-items: center;
  gap: var(--space-4);
  padding-block: var(--space-6) var(--space-7);
}

.contrast-toggle {
  border: var(--border-width) solid var(--line);
  border-radius: var(--radius-pill);
  margin: 0;
  min-block-size: var(--target-comfortable);
  padding-inline: var(--space-3);
}

@container page-shell (max-width: 42rem) {
  .welcome,
  .setting-row,
  .ledger-card,
  .item-row {
    align-items: stretch;
    flex-direction: column;
  }

  .grid-3,
  .stat-grid,
  .feature-grid,
  .quick-grid,
  .field-grid,
  .receipt-summary-view {
    grid-template-columns: 1fr;
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #eef5f7;
    --muted: #b7c7d1;
    --teal: #59d6ca;
    --teal-dark: #9cece5;
    --coral: #ff957c;
    --cream: #081018;
    --surface: #101b26;
    --surface-muted: #182936;
    --line: #647d8d;
    --white: #ffffff;
    --on-accent: #071314;
    --on-emphasis: #ffffff;
    --success: #67d391;
    --success-muted: #153829;
    --success-text: #8ae8ad;
    --warning-muted: #43320f;
    --warning-text: #ffd479;
    --status-muted: #263946;
    --danger: #ff9d93;
    --danger-strong: #ffc1ba;
    --interactive-muted: #173c3d;
    --interactive-muted-strong: #205150;
    --danger-muted: #44211f;
    --danger-muted-strong: #5d2a27;
    --focus: #7db7ff;
    --illustration-surface: #b8b3ad;
    --backdrop: rgb(0 0 0 / 0.72);
    --shadow-1: 0 0.25rem 1rem rgb(0 0 0 / 0.28);
    --shadow-2: 0 0.75rem 2rem rgb(0 0 0 / 0.34);
    --shadow-3: 0 1.25rem 3.5rem rgb(0 0 0 / 0.48);
  }

  .brand-mark,
  button:not([class]),
  .button:not(.button-secondary, .button-danger) {
    color: #071314;
  }

  .auth-art {
    filter: brightness(0.72) contrast(1.08);
  }
}

html[data-high-contrast] {
  --ink: #ffffff;
  --muted: #ffffff;
  --teal: #00ffff;
  --teal-dark: #00ffff;
  --coral: #ffb000;
  --cream: #000000;
  --surface: #000000;
  --surface-muted: #101010;
  --line: #ffffff;
  --white: #ffffff;
  --on-accent: #000000;
  --on-emphasis: #ffffff;
  --success: #7fff00;
  --success-muted: #000000;
  --success-text: #7fff00;
  --warning-muted: #000000;
  --warning-text: #ffb000;
  --status-muted: #000000;
  --danger: #ff8a80;
  --danger-strong: #ffffff;
  --interactive-muted: #202020;
  --interactive-muted-strong: #303030;
  --danger-muted: #300000;
  --danger-muted-strong: #520000;
  --focus: #ffff00;
  --illustration-surface: #000000;
  --backdrop: #000000;
  --shadow-1: none;
  --shadow-2: none;
  --shadow-3: none;
}

html[data-high-contrast] *,
html[data-high-contrast] *::before,
html[data-high-contrast] *::after {
  text-shadow: none;
}

html[data-high-contrast] .card,
html[data-high-contrast] button,
html[data-high-contrast] .button,
html[data-high-contrast] input,
html[data-high-contrast] select,
html[data-high-contrast] textarea {
  border-color: var(--line);
}

html[data-high-contrast] .question-icon,
html[data-high-contrast] .retailer-icon {
  background: var(--surface);
  border-color: var(--line);
  box-shadow: none;
  color: var(--ink);
}

@media (forced-colors: active) {
  * {
    forced-color-adjust: auto;
  }

  .brand-mark,
  .icon-tile,
  .question-icon,
  .retailer-icon,
  .page-link.current {
    border: var(--border-width) solid ButtonText;
  }
}

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