/* Euroscope design tokens: colors, type, canvas sizes and spacing, light and dark. */
:root {
  --es-color-palette-paper: #fbfaf7;
  --es-color-palette-paper-2: #f3f1ec;
  --es-color-palette-paper-3: #e9e6df;
  --es-color-palette-ink: #16151a;
  --es-color-palette-ink-2: #4e4c55;
  --es-color-palette-line: #d6d2c9;
  --es-color-palette-accent: #1f5fb4;
  --es-color-palette-accent-deep: #17488a;
  --es-color-palette-accent-soft: #e4ecf8;
  --es-color-palette-night-raised: #1f1e24;
  --es-color-palette-night-sunken: #0f0e12;
  --es-color-palette-night-text-2: #b8b5be;
  --es-color-palette-night-line: #34323a;
  --es-color-palette-accent-night: #5b8fe0;
  --es-color-palette-accent-night-soft: #1b2a45;
  --es-color-palette-accent-night-text: #9ec0f5;
  --es-color-surface-canvas: var(--es-color-palette-paper);
  --es-color-surface-raised: var(--es-color-palette-paper-2);
  --es-color-surface-sunken: var(--es-color-palette-paper-3);
  --es-color-text-primary: var(--es-color-palette-ink);
  --es-color-text-secondary: var(--es-color-palette-ink-2);
  --es-color-text-tertiary: #68676a;
  --es-color-text-on-mark: var(--es-color-palette-paper);
  --es-color-stroke-hairline: var(--es-color-palette-line);
  --es-color-stroke-muted: #848384;
  --es-color-stroke-ink: var(--es-color-palette-ink);
  --es-color-accent-mark: var(--es-color-palette-accent);
  --es-color-accent-fill: var(--es-color-palette-accent-soft);
  --es-color-accent-text: var(--es-color-palette-accent-deep);
  --es-font-family-serif: Newsreader, "Iowan Old Style", Georgia, serif;
  --es-font-family-sans: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --es-font-family-mono: "IBM Plex Mono", SFMono-Regular, Menlo, monospace;
  --es-font-weight-regular: 400;
  --es-font-weight-medium: 500;
  --es-canvas-scale: 2;
  --es-canvas-inline-width: 728px;
  --es-canvas-inline-height: 408px;
  --es-canvas-wide-width: 800px;
  --es-canvas-wide-height: 400px;
  --es-canvas-og-width: 600px;
  --es-canvas-og-height: 315px;
  --es-canvas-square-width: 540px;
  --es-canvas-square-height: 540px;
  --es-canvas-story-width: 540px;
  --es-canvas-story-height: 960px;
  --es-canvas-padding: 32px;
  --es-canvas-padding-cover: 40px;
  --es-space-1: 4px;
  --es-space-2: 8px;
  --es-space-3: 12px;
  --es-space-4: 16px;
  --es-space-5: 24px;
  --es-space-6: 32px;
  --es-space-7: 40px;
  --es-space-8: 64px;
  --es-stroke-hairline: 1px;
  --es-stroke-base: 1.5px;
  --es-stroke-bold: 2.5px;
  --es-stroke-dash: 6px;
  --es-node-min-width: 140px;
  --es-node-height: 56px;
  --es-node-height-sm: 44px;
  --es-node-height-lg: 72px;
  --es-node-padding-x: 20px;
  --es-icon-size: 18px;
  --es-radius-node: 4px;
  --es-radius-panel: 8px;
  --es-radius-pill: 999px;
  --es-type-display-font-family: var(--es-font-family-serif);
  --es-type-display-font-weight: var(--es-font-weight-medium);
  --es-type-display-font-style: normal;
  --es-type-display-font-size: 44px;
  --es-type-display-line-height: 1.1;
  --es-type-display-letter-spacing: -0.015em;
  --es-type-display: var(--es-type-display-font-weight) var(--es-type-display-font-size)/var(--es-type-display-line-height) var(--es-type-display-font-family);
  --es-type-title-font-family: var(--es-font-family-serif);
  --es-type-title-font-weight: var(--es-font-weight-medium);
  --es-type-title-font-style: normal;
  --es-type-title-font-size: 28px;
  --es-type-title-line-height: 1.15;
  --es-type-title-letter-spacing: -0.01em;
  --es-type-title: var(--es-type-title-font-weight) var(--es-type-title-font-size)/var(--es-type-title-line-height) var(--es-type-title-font-family);
  --es-type-heading-font-family: var(--es-font-family-sans);
  --es-type-heading-font-weight: var(--es-font-weight-medium);
  --es-type-heading-font-style: normal;
  --es-type-heading-font-size: 20px;
  --es-type-heading-line-height: 1.25;
  --es-type-heading-letter-spacing: 0;
  --es-type-heading: var(--es-type-heading-font-weight) var(--es-type-heading-font-size)/var(--es-type-heading-line-height) var(--es-type-heading-font-family);
  --es-type-label-font-family: var(--es-font-family-sans);
  --es-type-label-font-weight: var(--es-font-weight-medium);
  --es-type-label-font-style: normal;
  --es-type-label-font-size: 17px;
  --es-type-label-line-height: 1.25;
  --es-type-label-letter-spacing: 0;
  --es-type-label: var(--es-type-label-font-weight) var(--es-type-label-font-size)/var(--es-type-label-line-height) var(--es-type-label-font-family);
  --es-type-label-sm-font-family: var(--es-font-family-sans);
  --es-type-label-sm-font-weight: var(--es-font-weight-medium);
  --es-type-label-sm-font-style: normal;
  --es-type-label-sm-font-size: 15px;
  --es-type-label-sm-line-height: 1.25;
  --es-type-label-sm-letter-spacing: 0;
  --es-type-label-sm: var(--es-type-label-sm-font-weight) var(--es-type-label-sm-font-size)/var(--es-type-label-sm-line-height) var(--es-type-label-sm-font-family);
  --es-type-body-font-family: var(--es-font-family-sans);
  --es-type-body-font-weight: var(--es-font-weight-regular);
  --es-type-body-font-style: normal;
  --es-type-body-font-size: 17px;
  --es-type-body-line-height: 1.45;
  --es-type-body-letter-spacing: 0;
  --es-type-body: var(--es-type-body-font-weight) var(--es-type-body-font-size)/var(--es-type-body-line-height) var(--es-type-body-font-family);
  --es-type-caption-font-family: var(--es-font-family-sans);
  --es-type-caption-font-weight: var(--es-font-weight-regular);
  --es-type-caption-font-style: normal;
  --es-type-caption-font-size: 14px;
  --es-type-caption-line-height: 1.45;
  --es-type-caption-letter-spacing: 0;
  --es-type-caption: var(--es-type-caption-font-weight) var(--es-type-caption-font-size)/var(--es-type-caption-line-height) var(--es-type-caption-font-family);
  --es-type-kicker-font-family: var(--es-font-family-sans);
  --es-type-kicker-font-weight: var(--es-font-weight-medium);
  --es-type-kicker-font-style: normal;
  --es-type-kicker-font-size: 14px;
  --es-type-kicker-line-height: 1;
  --es-type-kicker-letter-spacing: 0.08em;
  --es-type-kicker-text-transform: uppercase;
  --es-type-kicker: var(--es-type-kicker-font-weight) var(--es-type-kicker-font-size)/var(--es-type-kicker-line-height) var(--es-type-kicker-font-family);
  --es-type-mono-font-family: var(--es-font-family-mono);
  --es-type-mono-font-weight: var(--es-font-weight-regular);
  --es-type-mono-font-style: normal;
  --es-type-mono-font-size: 14px;
  --es-type-mono-line-height: 1.45;
  --es-type-mono-letter-spacing: 0;
  --es-type-mono: var(--es-type-mono-font-weight) var(--es-type-mono-font-size)/var(--es-type-mono-line-height) var(--es-type-mono-font-family);
  --es-type-quote-font-family: var(--es-font-family-serif);
  --es-type-quote-font-weight: var(--es-font-weight-regular);
  --es-type-quote-font-style: italic;
  --es-type-quote-font-size: 28px;
  --es-type-quote-line-height: 1.3;
  --es-type-quote-letter-spacing: -0.005em;
  --es-type-quote: italic var(--es-type-quote-font-weight) var(--es-type-quote-font-size)/var(--es-type-quote-line-height) var(--es-type-quote-font-family);
  --es-type-quote-lg-font-family: var(--es-font-family-serif);
  --es-type-quote-lg-font-weight: var(--es-font-weight-regular);
  --es-type-quote-lg-font-style: italic;
  --es-type-quote-lg-font-size: 36px;
  --es-type-quote-lg-line-height: 1.2;
  --es-type-quote-lg-letter-spacing: -0.005em;
  --es-type-quote-lg: italic var(--es-type-quote-lg-font-weight) var(--es-type-quote-lg-font-size)/var(--es-type-quote-lg-line-height) var(--es-type-quote-lg-font-family);
  --es-type-minimum: 14px;
}

[data-theme="dark"] {
  --es-color-surface-canvas: var(--es-color-palette-ink);
  --es-color-surface-raised: var(--es-color-palette-night-raised);
  --es-color-surface-sunken: var(--es-color-palette-night-sunken);
  --es-color-text-primary: var(--es-color-palette-paper-2);
  --es-color-text-secondary: var(--es-color-palette-night-text-2);
  --es-color-text-tertiary: #878585;
  --es-color-text-on-mark: var(--es-color-palette-ink);
  --es-color-stroke-hairline: var(--es-color-palette-night-line);
  --es-color-stroke-muted: #6a696a;
  --es-color-stroke-ink: var(--es-color-palette-paper-2);
  --es-color-accent-mark: var(--es-color-palette-accent-night);
  --es-color-accent-fill: var(--es-color-palette-accent-night-soft);
  --es-color-accent-text: var(--es-color-palette-accent-night-text);
}