/* Tin Can Vista - generated from tokens.json by build-tokens.pl. Do not edit. */
@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,400;0,500;0,600;1,400&family=Big+Shoulders+Stencil+Display:wght@700;800&display=swap');

:root, [data-theme="light"] {
  color-scheme: light;
  --surface: #f4f8fc;
  --surface-raised: #e6eef7;
  --hairline: #cdd9e6;
  --ink: #1c1f23;
  --ink-muted: #55606b;
  --action: #a9441a;
  --on-action: #ffffff;
  --rust: #b5532a;
  --rust-deep: #7a3b1e;
  --rust-tint: #f4ddd0;
  --steel: #3a3f45;
  --gold: #d9a15f;
  --gold-deep: #6b4a12;
  --gold-tint: #f3e2c3;
  --sage: #8ca34e;
  --pine: #3f5a22;
  --sage-tint: #e4ead0;
  --sky: #5f93d0;
  --sky-deep: #1f4f86;
  --sky-tint: #dce7f4;
  --band-rust: #b5532a;
  --on-band-rust: #ffffff;
  --band-steel: #3a3f45;
  --on-band-steel: #eceae6;
}

[data-theme="dark"] {
  color-scheme: dark;
  --surface: #1e2022;
  --surface-raised: #2a2d30;
  --hairline: #3d4145;
  --ink: #eceae6;
  --ink-muted: #aeb2b5;
  --action: #e8814a;
  --on-action: #1e2022;
  --rust: #c25e30;
  --rust-deep: #f0a77d;
  --rust-tint: #3a2519;
  --steel: #7b838a;
  --gold: #c48e4e;
  --gold-deep: #e0b878;
  --gold-tint: #3a2f1a;
  --sage: #8ca34e;
  --pine: #b2cc85;
  --sage-tint: #26311f;
  --sky: #5f93d0;
  --sky-deep: #8db8ea;
  --sky-tint: #1f2f40;
  --band-rust: #a9441a;
  --on-band-rust: #ffffff;
  --band-steel: #15171a;
  --on-band-steel: #eceae6;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --surface: #1e2022;
    --surface-raised: #2a2d30;
    --hairline: #3d4145;
    --ink: #eceae6;
    --ink-muted: #aeb2b5;
    --action: #e8814a;
    --on-action: #1e2022;
    --rust: #c25e30;
    --rust-deep: #f0a77d;
    --rust-tint: #3a2519;
    --steel: #7b838a;
    --gold: #c48e4e;
    --gold-deep: #e0b878;
    --gold-tint: #3a2f1a;
    --sage: #8ca34e;
    --pine: #b2cc85;
    --sage-tint: #26311f;
    --sky: #5f93d0;
    --sky-deep: #8db8ea;
    --sky-tint: #1f2f40;
    --band-rust: #a9441a;
    --on-band-rust: #ffffff;
    --band-steel: #15171a;
    --on-band-steel: #eceae6;
  }
}

:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --radius-sm: 0;
  --radius-md: 2px;
  --radius-lg: 4px;
  --font-display: "Big Shoulders Stencil Display", Impact, sans-serif;
  --font-sans: "Archivo", system-ui, sans-serif;
}

.display {
  font-family: var(--font-display);
  font-size: 64px;
  line-height: 64px;
  font-weight: 800;
  letter-spacing: 0.01em;
}
.h1 {
  font-family: var(--font-display);
  font-size: 48px;
  line-height: 50px;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.h2 {
  font-family: var(--font-display);
  font-size: 34px;
  line-height: 38px;
  font-weight: 700;
}
.h3 {
  font-family: var(--font-sans);
  font-size: 20px;
  line-height: 26px;
  font-weight: 600;
}
.body-lg {
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 30px;
  font-weight: 400;
}
.body {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 26px;
  font-weight: 400;
}
.quote {
  font-family: var(--font-sans);
  font-size: 20px;
  line-height: 30px;
  font-weight: 400;
  font-style: italic;
}
.label {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 20px;
  font-weight: 500;
}
.caption {
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
}
.eyebrow {
  font-family: var(--font-sans);
  font-size: 11px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 0.1em;
}