/* The palette starts from Readix (readix_web/app/assets/stylesheets/base.css). */
:root {
  color-scheme: light;
  --ink-darkest: oklch(26% 0.05 264);
  --ink-darker: oklch(40% 0.026 262);
  --ink-dark: oklch(56% 0.014 260);
  --ink-medium: oklch(66% 0.008 258);
  --ink-light: oklch(84% 0.005 256);
  --ink-lighter: oklch(92% 0.003 254);
  --ink-lightest: oklch(96% 0.002 252);
  --canvas: oklch(100% 0 0);
  --ink-inverted: oklch(100% 0 0);
  --action: oklch(57.02% 0.1895 260.46);
  /* 58.8%, not 59%: 59% gives only 4.48:1 with white text. */
  --error: oklch(58.8% 0.19 38);

  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI Variable", "Segoe UI", "Noto Sans", "Helvetica Neue", Arial, sans-serif;

  --text-small: 0.875rem;
  --text-normal: 1rem;
  --text-large: 1.75rem;

  --block-half: 0.5rem;
  --block: 1rem;
  --block-double: 2rem;
  --page-width: 26rem;
  --page-width-wide: 48rem;
  --control-height: 2.75rem;
  --rounded-xs: 0.2em;
  --rounded-md: 0.5em;
  --rounded-full: 99rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --ink-darkest: oklch(96.02% 0.0034 260);
    --ink-darker: oklch(86% 0.0061 260);
    --ink-dark: oklch(73.97% 0.009 260);
    --ink-medium: oklch(62% 0.0122 260);
    --ink-light: oklch(40% 0.0148 260);
    --ink-lighter: oklch(30% 0.0178 260);
    --ink-lightest: oklch(25% 0.0204 260);
    --canvas: oklch(20% 0.0195 232.58);
    --ink-inverted: oklch(0% 0 0);
    --action: oklch(74% 0.1293 256);
    --error: oklch(73.95% 0.139 42);
  }
}

* {
  box-sizing: border-box;
}

html {
  color: var(--ink-darkest);
  background: var(--canvas);
  font-family: var(--sans);
}

body {
  margin: 0;
  font-size: var(--text-normal);
  line-height: 1.5;
}

h1 {
  margin: 0 0 var(--block-half);
  font-size: var(--text-large);
  line-height: 1.2;
}

h2 {
  margin: var(--block-double) 0 var(--block-half);
  color: var(--ink-darker);
  font-size: var(--text-small);
  font-weight: 600;
}

p {
  margin: 0 0 var(--block);
}

a {
  color: var(--action);
}

:where(a, button, input, select, textarea, summary):focus-visible {
  border-radius: var(--rounded-xs);
  outline: 2px solid var(--action);
  outline-offset: 3px;
}

.page {
  max-width: var(--page-width);
  margin: 12vh auto var(--block-double);
  padding-inline: var(--block-double);
}

/* The admin tables need more room than the forms. */
.page--wide {
  max-width: var(--page-width-wide);
}

.brand {
  margin-block-end: var(--block-double);
  font-weight: 800;
}

.balance {
  margin-block-end: var(--block-half);
  font-size: var(--text-large);
  font-weight: 700;
  line-height: 1.2;
}

.flash__message {
  margin-block-end: var(--block);
  font-weight: 600;
}

.flash__message--alert {
  color: var(--error);
}