/**
 * Vendored Lumo design tokens (Vaadin 24.9 / @vaadin/vaadin-lumo-styles).
 * Source: Apache-2.0, Vaadin Ltd. :host → html for static pages.
 * Do not invent parallel palettes — customize via --lumo-* overrides below.
 */

html {
  /* Color — light (defaults; dark overrides when theme~=dark) */
  --lumo-base-color: #fff;

  --lumo-tint-5pct: hsla(0, 0%, 100%, 0.3);
  --lumo-tint-10pct: hsla(0, 0%, 100%, 0.37);
  --lumo-tint-20pct: hsla(0, 0%, 100%, 0.44);
  --lumo-tint-30pct: hsla(0, 0%, 100%, 0.5);
  --lumo-tint-40pct: hsla(0, 0%, 100%, 0.57);
  --lumo-tint-50pct: hsla(0, 0%, 100%, 0.64);
  --lumo-tint-60pct: hsla(0, 0%, 100%, 0.7);
  --lumo-tint-70pct: hsla(0, 0%, 100%, 0.77);
  --lumo-tint-80pct: hsla(0, 0%, 100%, 0.84);
  --lumo-tint-90pct: hsla(0, 0%, 100%, 0.9);
  --lumo-tint: #fff;

  --lumo-shade-5pct: hsla(214, 61%, 25%, 0.05);
  --lumo-shade-10pct: hsla(214, 57%, 24%, 0.1);
  --lumo-shade-20pct: hsla(214, 53%, 23%, 0.16);
  --lumo-shade-30pct: hsla(214, 50%, 22%, 0.26);
  --lumo-shade-40pct: hsla(214, 47%, 21%, 0.38);
  --lumo-shade-50pct: hsla(214, 45%, 20%, 0.52);
  --lumo-shade-60pct: hsla(214, 43%, 19%, 0.6);
  --lumo-shade-70pct: hsla(214, 42%, 18%, 0.69);
  --lumo-shade-80pct: hsla(214, 41%, 17%, 0.83);
  --lumo-shade-90pct: hsla(214, 40%, 16%, 0.94);
  --lumo-shade: hsl(214, 35%, 15%);

  --lumo-contrast-5pct: var(--lumo-shade-5pct);
  --lumo-contrast-10pct: var(--lumo-shade-10pct);
  --lumo-contrast-20pct: var(--lumo-shade-20pct);
  --lumo-contrast-30pct: var(--lumo-shade-30pct);
  --lumo-contrast-40pct: var(--lumo-shade-40pct);
  --lumo-contrast-50pct: var(--lumo-shade-50pct);
  --lumo-contrast-60pct: var(--lumo-shade-60pct);
  --lumo-contrast-70pct: var(--lumo-shade-70pct);
  --lumo-contrast-80pct: var(--lumo-shade-80pct);
  --lumo-contrast-90pct: var(--lumo-shade-90pct);
  --lumo-contrast: var(--lumo-shade);

  --lumo-header-text-color: var(--lumo-contrast);
  --lumo-body-text-color: var(--lumo-contrast-90pct);
  --lumo-secondary-text-color: var(--lumo-contrast-70pct);
  --lumo-tertiary-text-color: var(--lumo-contrast-50pct);
  --lumo-disabled-text-color: var(--lumo-contrast-30pct);

  --lumo-primary-color: hsl(214, 100%, 48%);
  --lumo-primary-color-50pct: hsla(214, 100%, 49%, 0.76);
  --lumo-primary-color-10pct: hsla(214, 100%, 60%, 0.13);
  --lumo-primary-text-color: hsl(214, 100%, 43%);
  --lumo-primary-contrast-color: #fff;

  --lumo-error-color: hsl(3, 85%, 48%);
  --lumo-error-color-50pct: hsla(3, 85%, 49%, 0.5);
  --lumo-error-color-10pct: hsla(3, 85%, 49%, 0.1);
  --lumo-error-text-color: hsl(3, 89%, 42%);
  --lumo-error-contrast-color: #fff;

  --lumo-success-color: hsl(145, 72%, 30%);
  --lumo-success-color-50pct: hsla(145, 72%, 31%, 0.5);
  --lumo-success-color-10pct: hsla(145, 72%, 31%, 0.1);
  --lumo-success-text-color: hsl(145, 85%, 25%);
  --lumo-success-contrast-color: #fff;

  --lumo-warning-color: hsl(48, 100%, 50%);
  --lumo-warning-color-10pct: hsla(48, 100%, 50%, 0.25);
  --lumo-warning-text-color: hsl(32, 100%, 30%);
  --lumo-warning-contrast-color: var(--lumo-shade-90pct);

  /* Typography */
  --lumo-font-family: -apple-system, BlinkMacSystemFont, "Roboto", "Segoe UI", Helvetica, Arial,
    sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --lumo-font-size-xxs: 0.75rem;
  --lumo-font-size-xs: 0.8125rem;
  --lumo-font-size-s: 0.875rem;
  --lumo-font-size-m: 1rem;
  --lumo-font-size-l: 1.125rem;
  --lumo-font-size-xl: 1.375rem;
  --lumo-font-size-xxl: 1.75rem;
  --lumo-font-size-xxxl: 2.5rem;
  --lumo-line-height-xs: 1.25;
  --lumo-line-height-s: 1.375;
  --lumo-line-height-m: 1.625;

  /* Size */
  --lumo-size-xs: 1.625rem;
  --lumo-size-s: 1.875rem;
  --lumo-size-m: 2.25rem;
  --lumo-size-l: 2.75rem;
  --lumo-size-xl: 3.5rem;
  --lumo-icon-size-s: 1.25em;
  --lumo-icon-size-m: 1.5em;
  --lumo-icon-size-l: 2.25em;

  /* Space */
  --lumo-space-xs: 0.25rem;
  --lumo-space-s: 0.5rem;
  --lumo-space-m: 1rem;
  --lumo-space-l: 1.5rem;
  --lumo-space-xl: 2.5rem;

  /* Shape & elevation */
  --lumo-border-radius-s: 0.25em;
  --lumo-border-radius-m: 0.25em;
  --lumo-border-radius-l: 0.5em;
  --lumo-box-shadow-xs: 0 1px 4px -1px var(--lumo-shade-50pct);
  --lumo-box-shadow-s: 0 2px 4px -1px var(--lumo-shade-20pct), 0 3px 12px -1px var(--lumo-shade-30pct);
  --lumo-box-shadow-m: 0 2px 6px -1px var(--lumo-shade-20pct), 0 8px 24px -4px var(--lumo-shade-40pct);
  --lumo-box-shadow-l: 0 3px 18px -2px var(--lumo-shade-20pct), 0 12px 48px -6px var(--lumo-shade-40pct);
  --lumo-box-shadow-xl: 0 4px 24px -3px var(--lumo-shade-20pct), 0 18px 64px -8px var(--lumo-shade-40pct);

  --lumo-clickable-cursor: pointer;

  /* Component tokens used by site controls */
  --vaadin-button-background: var(--lumo-contrast-5pct);
  --vaadin-button-border: none;
  --vaadin-button-border-radius: var(--lumo-border-radius-m);
  --vaadin-button-font-size: var(--lumo-font-size-m);
  --vaadin-button-font-weight: 500;
  --vaadin-button-height: var(--lumo-size-m);
  --vaadin-button-padding: 0 calc(var(--vaadin-button-height) / 3 + var(--lumo-border-radius-m) / 2);
  --vaadin-button-text-color: var(--lumo-primary-text-color);
  --vaadin-button-primary-background: var(--lumo-primary-color);
  --vaadin-button-primary-font-weight: 600;
  --vaadin-button-primary-text-color: var(--lumo-primary-contrast-color);
  --vaadin-focus-ring-color: var(--lumo-primary-color-50pct);
  --vaadin-focus-ring-width: 2px;
  --vaadin-input-field-background: var(--lumo-contrast-10pct);
  --vaadin-input-field-border-radius: var(--lumo-border-radius-m);
  --vaadin-input-field-height: var(--lumo-size-m);
  --vaadin-input-field-value-color: var(--lumo-body-text-color);
  --vaadin-input-field-placeholder-color: var(--lumo-secondary-text-color);
  --vaadin-input-field-label-color: var(--lumo-secondary-text-color);

  color: var(--lumo-body-text-color);
  background-color: var(--lumo-base-color);
  color-scheme: light;
}

html[theme~="dark"] {
  --lumo-base-color: hsl(214, 35%, 21%);

  --lumo-tint-5pct: hsla(214, 65%, 85%, 0.06);
  --lumo-tint-10pct: hsla(214, 60%, 80%, 0.14);
  --lumo-tint-20pct: hsla(214, 64%, 82%, 0.23);
  --lumo-tint-30pct: hsla(214, 69%, 84%, 0.32);
  --lumo-tint-40pct: hsla(214, 73%, 86%, 0.41);
  --lumo-tint-50pct: hsla(214, 78%, 88%, 0.5);
  --lumo-tint-60pct: hsla(214, 82%, 90%, 0.58);
  --lumo-tint-70pct: hsla(214, 87%, 92%, 0.69);
  --lumo-tint-80pct: hsla(214, 91%, 94%, 0.8);
  --lumo-tint-90pct: hsla(214, 96%, 96%, 0.9);
  --lumo-tint: hsl(214, 100%, 98%);

  --lumo-shade-5pct: hsla(214, 0%, 0%, 0.07);
  --lumo-shade-10pct: hsla(214, 4%, 2%, 0.15);
  --lumo-shade-20pct: hsla(214, 8%, 4%, 0.23);
  --lumo-shade-30pct: hsla(214, 12%, 6%, 0.32);
  --lumo-shade-40pct: hsla(214, 16%, 8%, 0.41);
  --lumo-shade-50pct: hsla(214, 20%, 10%, 0.5);
  --lumo-shade-60pct: hsla(214, 24%, 12%, 0.6);
  --lumo-shade-70pct: hsla(214, 28%, 13%, 0.7);
  --lumo-shade-80pct: hsla(214, 32%, 13%, 0.8);
  --lumo-shade-90pct: hsla(214, 33%, 13%, 0.9);
  --lumo-shade: hsl(214, 33%, 13%);

  --lumo-contrast-5pct: var(--lumo-tint-5pct);
  --lumo-contrast-10pct: var(--lumo-tint-10pct);
  --lumo-contrast-20pct: var(--lumo-tint-20pct);
  --lumo-contrast-30pct: var(--lumo-tint-30pct);
  --lumo-contrast-40pct: var(--lumo-tint-40pct);
  --lumo-contrast-50pct: var(--lumo-tint-50pct);
  --lumo-contrast-60pct: var(--lumo-tint-60pct);
  --lumo-contrast-70pct: var(--lumo-tint-70pct);
  --lumo-contrast-80pct: var(--lumo-tint-80pct);
  --lumo-contrast-90pct: var(--lumo-tint-90pct);
  --lumo-contrast: var(--lumo-tint);

  --lumo-primary-color: hsl(214, 90%, 48%);
  --lumo-primary-color-50pct: hsla(214, 90%, 70%, 0.69);
  --lumo-primary-color-10pct: hsla(214, 90%, 55%, 0.13);
  --lumo-primary-text-color: hsl(214, 90%, 77%);
  --lumo-primary-contrast-color: #fff;

  --lumo-error-color: hsl(3, 79%, 49%);
  --lumo-error-color-50pct: hsla(3, 75%, 62%, 0.5);
  --lumo-error-color-10pct: hsla(3, 75%, 62%, 0.14);
  --lumo-error-text-color: hsl(3, 100%, 80%);

  --lumo-success-color: hsl(145, 72%, 30%);
  --lumo-success-color-50pct: hsla(145, 92%, 51%, 0.5);
  --lumo-success-color-10pct: hsla(145, 92%, 51%, 0.1);
  --lumo-success-text-color: hsl(145, 85%, 46%);

  --lumo-warning-color: hsl(43, 100%, 48%);
  --lumo-warning-color-10pct: hsla(40, 100%, 50%, 0.2);
  --lumo-warning-text-color: hsl(45, 100%, 60%);
  --lumo-warning-contrast-color: var(--lumo-shade-90pct);

  color: var(--lumo-body-text-color);
  background-color: var(--lumo-base-color);
  color-scheme: dark;
}

/* Lumo base typography / link colors */
body {
  margin: 0;
  font-family: var(--lumo-font-family);
  font-size: var(--lumo-font-size-m);
  line-height: var(--lumo-line-height-m);
  color: var(--lumo-body-text-color);
  background-color: var(--lumo-base-color);
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--lumo-header-text-color);
  font-weight: 600;
  line-height: var(--lumo-line-height-xs);
  margin-block: 0;
}

h1 { font-size: var(--lumo-font-size-xxxl); }
h2 { font-size: var(--lumo-font-size-xxl); }
h3 { font-size: var(--lumo-font-size-xl); }
h4 { font-size: var(--lumo-font-size-l); }

a:where(:any-link) {
  color: var(--lumo-primary-text-color);
  text-decoration: none;
}

a:where(:any-link):hover {
  text-decoration: underline;
}

p {
  margin-top: 0.5em;
  margin-bottom: 0.75em;
}