/* Signed Source design tokens — v1.0 */

@font-face {
  font-family: "Newsreader";
  src: url("../fonts/web/Newsreader-Regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Newsreader";
  src: url("../fonts/web/Newsreader-Italic.woff2") format("woff2");
  font-style: italic;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Newsreader";
  src: url("../fonts/web/Newsreader-SemiBold.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "Public Sans";
  src: url("../fonts/web/PublicSans-Regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Public Sans";
  src: url("../fonts/web/PublicSans-Italic.woff2") format("woff2");
  font-style: italic;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Public Sans";
  src: url("../fonts/web/PublicSans-Medium.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "Public Sans";
  src: url("../fonts/web/PublicSans-SemiBold.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "Public Sans";
  src: url("../fonts/web/PublicSans-Bold.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/web/IBMPlexMono-Regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/web/IBMPlexMono-Medium.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

:root {
  color-scheme: light;

  /* Raw palette */
  --ss-protocol-ink: #17343a;
  --ss-vellum: #f6f1e7;
  --ss-source-teal: #0d746c;
  --ss-witness-copper: #c67443;
  --ss-mist: #dce9e5;
  --ss-slate: #52666a;
  --ss-white: #ffffff;
  --ss-deep-surface: #21464c;
  --ss-source-teal-light: #68bdb1;
  --ss-witness-copper-light: #e4a06c;
  --ss-error: #b54848;

  /* Semantic color */
  --ss-color-background: var(--ss-vellum);
  --ss-color-surface: var(--ss-white);
  --ss-color-surface-subtle: var(--ss-mist);
  --ss-color-text: var(--ss-protocol-ink);
  --ss-color-text-muted: var(--ss-slate);
  --ss-color-action: var(--ss-source-teal);
  --ss-color-action-text: var(--ss-white);
  --ss-color-origin: var(--ss-witness-copper);
  --ss-color-border: var(--ss-mist);
  --ss-color-danger: var(--ss-error);

  /* Type */
  --ss-font-display: "Newsreader", Georgia, serif;
  --ss-font-body: "Public Sans", system-ui, sans-serif;
  --ss-font-mono: "IBM Plex Mono", ui-monospace, monospace;
  --ss-type-display: clamp(3.25rem, 7vw, 5.75rem);
  --ss-type-h1: clamp(2.5rem, 5vw, 4rem);
  --ss-type-h2: clamp(2rem, 3.5vw, 3rem);
  --ss-type-h3: 1.5rem;
  --ss-type-lead: 1.25rem;
  --ss-type-body: 1rem;
  --ss-type-small: 0.875rem;
  --ss-type-label: 0.75rem;
  --ss-type-data: 0.875rem;

  /* Space and shape */
  --ss-space-xs: 0.5rem;
  --ss-space-sm: 0.75rem;
  --ss-space-md: 1rem;
  --ss-space-lg: 1.5rem;
  --ss-space-xl: 2rem;
  --ss-space-2xl: 3rem;
  --ss-space-3xl: 4.5rem;
  --ss-space-4xl: 6rem;
  --ss-radius-compact: 6px;
  --ss-radius-standard: 10px;
  --ss-radius-large: 18px;

  /* Layout */
  --ss-layout-max: 72rem;
  --ss-reading-measure: 42rem;
  --ss-lead-measure: 45rem;
  --ss-page-gutter: clamp(1.25rem, 4vw, 3rem);
}

[data-theme="dark"] {
  color-scheme: dark;
  --ss-color-background: var(--ss-protocol-ink);
  --ss-color-surface: var(--ss-deep-surface);
  --ss-color-surface-subtle: var(--ss-deep-surface);
  --ss-color-text: var(--ss-vellum);
  --ss-color-text-muted: var(--ss-mist);
  --ss-color-action: var(--ss-source-teal-light);
  --ss-color-action-text: var(--ss-protocol-ink);
  --ss-color-origin: var(--ss-witness-copper-light);
  --ss-color-border: var(--ss-source-teal-light);
  --ss-color-danger: #ef8f8f;
}

.ss-display,
.ss-h1,
.ss-h2 {
  color: var(--ss-color-text);
  font-family: var(--ss-font-display);
  font-synthesis: none;
  font-weight: 600;
  text-wrap: balance;
}

.ss-display {
  font-size: var(--ss-type-display);
  line-height: 0.96;
}

.ss-h1 {
  font-size: var(--ss-type-h1);
  line-height: 1.02;
}

.ss-h2 {
  font-size: var(--ss-type-h2);
  line-height: 1.08;
}

.ss-h3 {
  color: var(--ss-color-text);
  font: 600 var(--ss-type-h3) / 1.2 var(--ss-font-body);
}

.ss-body,
.ss-lead,
.ss-small,
.ss-label {
  color: var(--ss-color-text);
  font-family: var(--ss-font-body);
  font-synthesis: none;
}

.ss-body {
  font-size: var(--ss-type-body);
  line-height: 1.65;
  max-width: var(--ss-reading-measure);
}

.ss-lead {
  font-size: var(--ss-type-lead);
  line-height: 1.55;
  max-width: var(--ss-lead-measure);
}

.ss-small {
  font-size: var(--ss-type-small);
  line-height: 1.5;
}

.ss-label {
  font-size: var(--ss-type-label);
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.2;
  text-transform: uppercase;
}

.ss-data {
  color: var(--ss-color-text);
  font: 400 var(--ss-type-data) / 1.5 var(--ss-font-mono);
  overflow-wrap: anywhere;
}

.ss-focus-ring:focus-visible {
  outline: 2px solid var(--ss-color-action);
  outline-offset: 3px;
}

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