/* GENERATED by scripts/brand/build_tokens.mjs from design/tokens.json.
   Do not edit: change the JSON (or `make sync-tokens`), then `make tokens`.
   <link>ed before assets/site.css on every page.
   --cr-<role> is a full colour; light is the default, dark follows the
   theme toggle. See docs/08-brand/brand.md §8 in MAECLY/coverly-roms. */

:root {
  --cr-font-display: Archivo, 'Archivo Display', 'Arial Narrow', sans-serif;
  --cr-font-body:
    'Atkinson Hyperlegible Next', system-ui, -apple-system, 'Segoe UI',
    sans-serif;
  --cr-font-mono:
    'Atkinson Hyperlegible Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --cr-font-weight-regular: 400;
  --cr-font-weight-medium: 500;
  --cr-font-weight-semibold: 600;
  --cr-font-weight-heavy: 800;
  --cr-type-app-caption: 400 12px/1.4 var(--cr-font-body);
  --cr-type-app-base: 400 13px/1.45 var(--cr-font-body);
  --cr-type-app-label: 500 13px/1.45 var(--cr-font-body);
  --cr-type-app-dense: 400 14px/1.45 var(--cr-font-body);
  --cr-type-app-dialog: 400 16px/1.5 var(--cr-font-body);
  --cr-type-app-title: 600 20px/1.3 var(--cr-font-body);
  --cr-type-app-heading: 800 24px/1.15 var(--cr-font-display);
  --cr-type-app-display: 800 32px/1.05 var(--cr-font-display);
  --cr-type-app-mono: 400 12px/1.5 var(--cr-font-mono);
  --cr-type-landing-body: 400 17px/1.6 var(--cr-font-body);
  --cr-type-landing-lead: 400 20px/1.5 var(--cr-font-body);
  --cr-type-landing-eyebrow: 600 13px/1.2 var(--cr-font-display);
  --cr-type-landing-h3: 800 24px/1.15 var(--cr-font-display);
  --cr-type-landing-h2: 800 44px/1.02 var(--cr-font-display);
  --cr-type-landing-h1: 800 88px/0.96 var(--cr-font-display);
  --cr-type-landing-mono: 400 14px/1.55 var(--cr-font-mono);
  --cr-radius-sm: 3px;
  --cr-radius-md: 5px;
  --cr-radius-lg: 8px;
  --cr-radius-xl: 12px;
  --cr-radius-full: 9999px;
  --cr-control-sm: 28px;
  --cr-control-md: 32px;
  --cr-control-lg: 40px;
  --cr-control-landing: 44px;
  --cr-space-0-5: 2px;
  --cr-space-1: 4px;
  --cr-space-1-5: 6px;
  --cr-space-2: 8px;
  --cr-space-3: 12px;
  --cr-space-4: 16px;
  --cr-space-5: 20px;
  --cr-space-6: 24px;
  --cr-space-8: 32px;
  --cr-space-10: 40px;
  --cr-space-12: 48px;
  --cr-space-16: 64px;
  --cr-space-20: 80px;
  --cr-space-24: 96px;
  --cr-border-width-hairline: 1px;
  --cr-border-width-slot: 1.5px;
  --cr-border-width-focus: 2px;
  --cr-border-width-spine: 3px;
  --cr-duration-instant: 0ms;
  --cr-duration-fast: 110ms;
  --cr-duration-base: 150ms;
  --cr-duration-slow: 240ms;
  --cr-duration-slower: 400ms;
  --cr-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --cr-ease-enter: cubic-bezier(0, 0, 0.38, 0.9);
  --cr-ease-exit: cubic-bezier(0.2, 0, 1, 0.9);
  --cr-ease-ink: cubic-bezier(0.2, 0.7, 0.2, 1);
  --cr-ease-spring: cubic-bezier(0.34, 1.5, 0.64, 1);
  --cr-bg: #f2f3ef;
  --cr-surface: #fbfbf9;
  --cr-surface-raised: #ffffff;
  --cr-surface-sunken: #e7e9e3;
  --cr-hover: #e0e3dc;
  --cr-active: #daddd5;
  --cr-border: #d3d7cf;
  --cr-border-strong: #787f76;
  --cr-text: #1b1e1b;
  --cr-text-secondary: #535a52;
  --cr-text-disabled: #787f76;
  --cr-primary: #0e5e6f;
  --cr-primary-hover: #0a4d5b;
  --cr-primary-fg: #ffffff;
  --cr-primary-subtle: #dcebec;
  --cr-primary-subtle-fg: #084551;
  --cr-ring: #0e5e6f;
  --cr-manila: #e6c171;
  --cr-manila-fg: #2a2111;
  --cr-manila-text: #8a5f12;
  --cr-success: #2a6f38;
  --cr-success-bg: #e0f3e2;
  --cr-warning: #9f4b0c;
  --cr-warning-bg: #feeadb;
  --cr-warning-fill: #faa453;
  --cr-warning-fill-fg: #1b1e1b;
  --cr-danger: #b3261e;
  --cr-danger-bg: #fde7e4;
  --cr-danger-fill: #b3261e;
  --cr-danger-fill-fg: #ffffff;
  --cr-info: #2d5ba6;
  --cr-info-bg: #e4edfc;
  --cr-slot-missing: #787f76;
  --cr-slot-filled: #1b1e1b;
  --cr-slot-applied: #0e5e6f;
  --cr-slot-applied-run: #e6c171;
  --cr-code-bg: #121514;
  --cr-code-fg: #eceeea;
  --cr-code-muted: #a8afab;
  --cr-code-accent: #5db6c4;
  --cr-chart-1: #0e5e6f;
  --cr-chart-2: #e6c171;
  --cr-chart-3: #2a6f38;
  --cr-chart-4: #2d5ba6;
  --cr-chart-5: #faa453;
  --cr-scrim: rgb(13 15 15 / 55%);
  --cr-text-muted: #535a52;
  --cr-accent: #0e5e6f;
  --cr-accent-text: #ffffff;
  --cr-error: #b3261e;
  --cr-shadow-raised:
    0 1px 0 rgb(27 30 27 / 5%), 0 4px 12px -4px rgb(27 30 27 / 10%);
  --cr-shadow-overlay:
    0 1px 0 rgb(27 30 27 / 6%), 0 12px 32px -12px rgb(27 30 27 / 22%);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --cr-bg: #121514;
    --cr-surface: #1a1e1d;
    --cr-surface-raised: #202624;
    --cr-surface-sunken: #0d0f0f;
    --cr-hover: #262c2a;
    --cr-active: #2d3331;
    --cr-border: #2d3331;
    --cr-border-strong: #79817e;
    --cr-text: #eceeea;
    --cr-text-secondary: #a8afab;
    --cr-text-disabled: #79817e;
    --cr-primary: #5db6c4;
    --cr-primary-hover: #7cc6d2;
    --cr-primary-fg: #0a262c;
    --cr-primary-subtle: #16333a;
    --cr-primary-subtle-fg: #9fd7e0;
    --cr-ring: #5db6c4;
    --cr-manila: #e0bc6c;
    --cr-manila-fg: #2a2111;
    --cr-manila-text: #e6c77f;
    --cr-success: #6cc983;
    --cr-success-bg: #172c1c;
    --cr-warning: #f0a35a;
    --cr-warning-bg: #352211;
    --cr-warning-fill: #f0a35a;
    --cr-warning-fill-fg: #121514;
    --cr-danger: #ff8a80;
    --cr-danger-bg: #381c1b;
    --cr-danger-fill: #ff8a80;
    --cr-danger-fill-fg: #121514;
    --cr-info: #8fb3f2;
    --cr-info-bg: #19253b;
    --cr-slot-missing: #79817e;
    --cr-slot-filled: #eceeea;
    --cr-slot-applied: #5db6c4;
    --cr-slot-applied-run: #e0bc6c;
    --cr-code-bg: #0d0f0f;
    --cr-code-fg: #eceeea;
    --cr-code-muted: #a8afab;
    --cr-code-accent: #5db6c4;
    --cr-chart-1: #5db6c4;
    --cr-chart-2: #e0bc6c;
    --cr-chart-3: #6cc983;
    --cr-chart-4: #8fb3f2;
    --cr-chart-5: #f0a35a;
    --cr-scrim: rgb(13 15 15 / 55%);
    --cr-text-muted: #a8afab;
    --cr-accent: #5db6c4;
    --cr-accent-text: #0a262c;
    --cr-error: #ff8a80;
    --cr-shadow-raised:
      0 1px 0 rgb(0 0 0 / 30%), 0 6px 16px -6px rgb(0 0 0 / 45%);
    --cr-shadow-overlay:
      0 1px 0 rgb(0 0 0 / 30%), 0 16px 40px -16px rgb(0 0 0 / 70%);
    color-scheme: dark;
  }
}

:root[data-theme='dark'] {
  --cr-bg: #121514;
  --cr-surface: #1a1e1d;
  --cr-surface-raised: #202624;
  --cr-surface-sunken: #0d0f0f;
  --cr-hover: #262c2a;
  --cr-active: #2d3331;
  --cr-border: #2d3331;
  --cr-border-strong: #79817e;
  --cr-text: #eceeea;
  --cr-text-secondary: #a8afab;
  --cr-text-disabled: #79817e;
  --cr-primary: #5db6c4;
  --cr-primary-hover: #7cc6d2;
  --cr-primary-fg: #0a262c;
  --cr-primary-subtle: #16333a;
  --cr-primary-subtle-fg: #9fd7e0;
  --cr-ring: #5db6c4;
  --cr-manila: #e0bc6c;
  --cr-manila-fg: #2a2111;
  --cr-manila-text: #e6c77f;
  --cr-success: #6cc983;
  --cr-success-bg: #172c1c;
  --cr-warning: #f0a35a;
  --cr-warning-bg: #352211;
  --cr-warning-fill: #f0a35a;
  --cr-warning-fill-fg: #121514;
  --cr-danger: #ff8a80;
  --cr-danger-bg: #381c1b;
  --cr-danger-fill: #ff8a80;
  --cr-danger-fill-fg: #121514;
  --cr-info: #8fb3f2;
  --cr-info-bg: #19253b;
  --cr-slot-missing: #79817e;
  --cr-slot-filled: #eceeea;
  --cr-slot-applied: #5db6c4;
  --cr-slot-applied-run: #e0bc6c;
  --cr-code-bg: #0d0f0f;
  --cr-code-fg: #eceeea;
  --cr-code-muted: #a8afab;
  --cr-code-accent: #5db6c4;
  --cr-chart-1: #5db6c4;
  --cr-chart-2: #e0bc6c;
  --cr-chart-3: #6cc983;
  --cr-chart-4: #8fb3f2;
  --cr-chart-5: #f0a35a;
  --cr-scrim: rgb(13 15 15 / 55%);
  --cr-text-muted: #a8afab;
  --cr-accent: #5db6c4;
  --cr-accent-text: #0a262c;
  --cr-error: #ff8a80;
  --cr-shadow-raised:
    0 1px 0 rgb(0 0 0 / 30%), 0 6px 16px -6px rgb(0 0 0 / 45%);
  --cr-shadow-overlay:
    0 1px 0 rgb(0 0 0 / 30%), 0 16px 40px -16px rgb(0 0 0 / 70%);
  color-scheme: dark;
}

.band-dark {
  --cr-bg: #121514;
  --cr-surface: #1a1e1d;
  --cr-surface-raised: #202624;
  --cr-surface-sunken: #0d0f0f;
  --cr-hover: #262c2a;
  --cr-active: #2d3331;
  --cr-border: #2d3331;
  --cr-border-strong: #79817e;
  --cr-text: #eceeea;
  --cr-text-secondary: #a8afab;
  --cr-text-disabled: #79817e;
  --cr-primary: #5db6c4;
  --cr-primary-hover: #7cc6d2;
  --cr-primary-fg: #0a262c;
  --cr-primary-subtle: #16333a;
  --cr-primary-subtle-fg: #9fd7e0;
  --cr-ring: #5db6c4;
  --cr-manila: #e0bc6c;
  --cr-manila-fg: #2a2111;
  --cr-manila-text: #e6c77f;
  --cr-success: #6cc983;
  --cr-slot-missing: #79817e;
  --cr-slot-filled: #eceeea;
  --cr-slot-applied: #5db6c4;
  --cr-slot-applied-run: #e0bc6c;
  --cr-code-bg: #0d0f0f;
  --cr-code-fg: #eceeea;
  --cr-code-muted: #a8afab;
  --cr-code-accent: #5db6c4;
  --cr-scrim: rgb(13 15 15 / 55%);
  --cr-shadow-raised:
    0 1px 0 rgb(0 0 0 / 30%), 0 6px 16px -6px rgb(0 0 0 / 45%);
  --cr-shadow-overlay:
    0 1px 0 rgb(0 0 0 / 30%), 0 16px 40px -16px rgb(0 0 0 / 70%);
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .band-dark {
    --cr-bg: #0d0f0f;
  }
}

:root[data-theme='dark'] .band-dark {
  --cr-bg: #0d0f0f;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --cr-duration-instant: 0ms;
    --cr-duration-fast: 0ms;
    --cr-duration-base: 0ms;
    --cr-duration-slow: 0ms;
    --cr-duration-slower: 0ms;
  }
}