/* GENERATED by scripts/build.mjs from tokens/*.json — do not edit by hand.
 * kissd-design v1.0.0
 */

:root {
  --color-kissd-black: #191919;
  --color-kissd-red: #FA4900;
  --color-kissd-magenta: #FB6DFD;
  --color-kissd-lime: #E1FF1C;
  --color-kissd-offwhite: #F7F4EB;
  --color-kissd-grey: #B5ADA8;
  --color-kissd-orange: #FA4900;
  --color-kissd-pink: #FB6DFD;
  --color-kissd-acid: #E1FF1C;

  --kissd-font-stack: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --kissd-ease: cubic-bezier(0.22, 1, 0.36, 1);

  --type-hero-size: 48px;
  --type-hero-md-size: 120px;
  --type-hero-weight: 300;
  --type-hero-leading: 0.85;
  --type-hero-tracking: 0.01em;
  --type-hero-transform: uppercase;
  --type-hero-color: #F7F4EB;

  --type-section-title-size: 30px;
  --type-section-title-md-size: 60px;
  --type-section-title-weight: 300;
  --type-section-title-leading: 1;
  --type-section-title-tracking: 0.015em;
  --type-section-title-transform: uppercase;
  --type-section-title-color: #F7F4EB;

  --type-card-title-lg-size: 30px;
  --type-card-title-lg-md-size: 48px;
  --type-card-title-lg-weight: 300;
  --type-card-title-lg-leading: 0.95;
  --type-card-title-lg-tracking: 0.02em;
  --type-card-title-lg-transform: uppercase;
  --type-card-title-lg-color: #F7F4EB;

  --type-card-title-size: 20px;
  --type-card-title-md-size: 28px;
  --type-card-title-weight: 400;
  --type-card-title-leading: 1.1;
  --type-card-title-tracking: 0.015em;
  --type-card-title-transform: uppercase;
  --type-card-title-color: #F7F4EB;

  --type-card-title-sm-size: 16px;
  --type-card-title-sm-md-size: 18px;
  --type-card-title-sm-weight: 400;
  --type-card-title-sm-leading: 1.25;
  --type-card-title-sm-tracking: 0.015em;
  --type-card-title-sm-transform: uppercase;
  --type-card-title-sm-color: #F7F4EB;

  --type-stat-display-size: 48px;
  --type-stat-display-md-size: 72px;
  --type-stat-display-weight: 300;
  --type-stat-display-leading: 1;
  --type-stat-display-tracking: 0.02em;
  --type-stat-display-transform: none;
  --type-stat-display-color: #F7F4EB;

  --type-eyebrow-size: 12px;
  --type-eyebrow-weight: 400;
  --type-eyebrow-leading: 1.2;
  --type-eyebrow-tracking: 0.115em;
  --type-eyebrow-transform: uppercase;
  --type-eyebrow-color: #FA4900;

  --type-lead-size: 18px;
  --type-lead-md-size: 23px;
  --type-lead-weight: 300;
  --type-lead-leading: 1.55;
  --type-lead-tracking: 0em;
  --type-lead-transform: none;
  --type-lead-color: #F7F4EB;

  --type-intro-size: 17px;
  --type-intro-weight: 300;
  --type-intro-leading: 1.6;
  --type-intro-tracking: 0.018em;
  --type-intro-transform: none;
  --type-intro-color: #B5ADA8;

  --type-body-size: 16px;
  --type-body-md-size: 17px;
  --type-body-weight: 300;
  --type-body-leading: 1.6;
  --type-body-tracking: 0.018em;
  --type-body-transform: none;
  --type-body-color: #F7F4EB;

  --type-body-sm-size: 14px;
  --type-body-sm-weight: 300;
  --type-body-sm-leading: 1.6;
  --type-body-sm-tracking: 0.02em;
  --type-body-sm-transform: none;
  --type-body-sm-color: #B5ADA8;

  --type-caption-size: 12px;
  --type-caption-md-size: 14px;
  --type-caption-weight: 300;
  --type-caption-leading: 1.45;
  --type-caption-tracking: 0.075em;
  --type-caption-transform: none;
  --type-caption-color: #B5ADA8;

  --type-nav-link-size: 13px;
  --type-nav-link-weight: 400;
  --type-nav-link-leading: 1.2;
  --type-nav-link-tracking: 0.075em;
  --type-nav-link-transform: uppercase;
  --type-nav-link-color: #B5ADA8;

  --type-nav-mobile-size: 36px;
  --type-nav-mobile-weight: 300;
  --type-nav-mobile-leading: 1.1;
  --type-nav-mobile-tracking: 0em;
  --type-nav-mobile-transform: none;
  --type-nav-mobile-color: #F7F4EB;

  --type-button-size: 14px;
  --type-button-weight: 300;
  --type-button-leading: 1.2;
  --type-button-tracking: 0.10em;
  --type-button-transform: uppercase;
  --type-button-color: #F7F4EB;

  --type-tag-pill-size: 11px;
  --type-tag-pill-weight: 400;
  --type-tag-pill-leading: 1.2;
  --type-tag-pill-tracking: 0.031em;
  --type-tag-pill-transform: lowercase;
  --type-tag-pill-color: #B5ADA8;
  --tool-bg: #161513;
  --tool-bg-deep: #0e0d0c;
  --tool-panel: #1d1c1a;
  --tool-panel-2: #232220;
  --tool-ink: #F7F4EB;
  --tool-paper: #F7F4EB;
  --tool-muted: #B5ADA8;
  --tool-faint: #8c867f;
  --tool-line: rgba(247, 244, 235, 0.10);
  --tool-line-strong: rgba(247, 244, 235, 0.20);
  --tool-accent: #FA4900;
  --tool-accent-hover: #ff5b18;
  --tool-accent-soft: rgba(250, 73, 0, 0.16);
  --tool-radius-card: 14px;
  --tool-radius-control: 10px;
  --tool-radius-pill: 9999px;
  --tool-body-size: 15px;
  --tool-body-leading: 1.45;
  --tool-body-weight: 400;
  --tool-h1-size: clamp(34px, 4.2vw, 52px);
  --tool-h1-leading: 1.08;
  --tool-h1-weight: 400;
  --tool-h1-tracking: -0.018em;
  --tool-h2-size: 18px;
  --tool-h2-leading: 1.25;
  --tool-h2-weight: 500;
  --tool-h2-tracking: -0.01em;
  --tool-label-size: 12px;
  --tool-label-leading: 1.2;
  --tool-label-weight: 500;
  --tool-label-tracking: 0.01em;
  --tool-eyebrow-size: 11px;
  --tool-eyebrow-tracking: 0.18em;
  --tool-control-height: 42px;
  --tool-control-padding-x: 13px;
  --tool-control-padding-y: 11px;
  --tool-card-padding: 24px;
  --tool-gap-tight: 16px;
  --tool-gap-card: 24px;

  --poster-display-leading: 0.7;
  --poster-display-weight: 300;
  --poster-body-leading: 1.0;
  --poster-body-weight: 400;

  --kissd-z-base: 0;
  --kissd-z-raised: 10;
  --kissd-z-sticky: 20;
  --kissd-z-chrome: 50;
  --kissd-z-overlay: 100;
  --kissd-measure-prose: 640px;
  --kissd-measure-intro: 680px;
  --kissd-measure-section: 1400px;
}

.type-hero {
  font-family: var(--kissd-font-stack);
  font-size: var(--type-hero-size);
  font-weight: var(--type-hero-weight);
  line-height: var(--type-hero-leading);
  letter-spacing: var(--type-hero-tracking);
  text-transform: var(--type-hero-transform);
  color: var(--type-hero-color);
}
.type-section-title {
  font-family: var(--kissd-font-stack);
  font-size: var(--type-section-title-size);
  font-weight: var(--type-section-title-weight);
  line-height: var(--type-section-title-leading);
  letter-spacing: var(--type-section-title-tracking);
  text-transform: var(--type-section-title-transform);
  color: var(--type-section-title-color);
}
.type-card-title-lg {
  font-family: var(--kissd-font-stack);
  font-size: var(--type-card-title-lg-size);
  font-weight: var(--type-card-title-lg-weight);
  line-height: var(--type-card-title-lg-leading);
  letter-spacing: var(--type-card-title-lg-tracking);
  text-transform: var(--type-card-title-lg-transform);
  color: var(--type-card-title-lg-color);
}
.type-card-title {
  font-family: var(--kissd-font-stack);
  font-size: var(--type-card-title-size);
  font-weight: var(--type-card-title-weight);
  line-height: var(--type-card-title-leading);
  letter-spacing: var(--type-card-title-tracking);
  text-transform: var(--type-card-title-transform);
  color: var(--type-card-title-color);
}
.type-card-title-sm {
  font-family: var(--kissd-font-stack);
  font-size: var(--type-card-title-sm-size);
  font-weight: var(--type-card-title-sm-weight);
  line-height: var(--type-card-title-sm-leading);
  letter-spacing: var(--type-card-title-sm-tracking);
  text-transform: var(--type-card-title-sm-transform);
  color: var(--type-card-title-sm-color);
}
.type-stat-display {
  font-family: var(--kissd-font-stack);
  font-size: var(--type-stat-display-size);
  font-weight: var(--type-stat-display-weight);
  line-height: var(--type-stat-display-leading);
  letter-spacing: var(--type-stat-display-tracking);
  text-transform: var(--type-stat-display-transform);
  color: var(--type-stat-display-color);
}
.type-eyebrow {
  font-family: var(--kissd-font-stack);
  font-size: var(--type-eyebrow-size);
  font-weight: var(--type-eyebrow-weight);
  line-height: var(--type-eyebrow-leading);
  letter-spacing: var(--type-eyebrow-tracking);
  text-transform: var(--type-eyebrow-transform);
  color: var(--type-eyebrow-color);
}
.type-lead {
  font-family: var(--kissd-font-stack);
  font-size: var(--type-lead-size);
  font-weight: var(--type-lead-weight);
  line-height: var(--type-lead-leading);
  letter-spacing: var(--type-lead-tracking);
  text-transform: var(--type-lead-transform);
  color: var(--type-lead-color);
}
.type-intro {
  font-family: var(--kissd-font-stack);
  font-size: var(--type-intro-size);
  font-weight: var(--type-intro-weight);
  line-height: var(--type-intro-leading);
  letter-spacing: var(--type-intro-tracking);
  text-transform: var(--type-intro-transform);
  color: var(--type-intro-color);
}
.type-body {
  font-family: var(--kissd-font-stack);
  font-size: var(--type-body-size);
  font-weight: var(--type-body-weight);
  line-height: var(--type-body-leading);
  letter-spacing: var(--type-body-tracking);
  text-transform: var(--type-body-transform);
  color: var(--type-body-color);
}
.type-body-sm {
  font-family: var(--kissd-font-stack);
  font-size: var(--type-body-sm-size);
  font-weight: var(--type-body-sm-weight);
  line-height: var(--type-body-sm-leading);
  letter-spacing: var(--type-body-sm-tracking);
  text-transform: var(--type-body-sm-transform);
  color: var(--type-body-sm-color);
}
.type-caption {
  font-family: var(--kissd-font-stack);
  font-size: var(--type-caption-size);
  font-weight: var(--type-caption-weight);
  line-height: var(--type-caption-leading);
  letter-spacing: var(--type-caption-tracking);
  text-transform: var(--type-caption-transform);
  color: var(--type-caption-color);
}
.type-nav-link {
  font-family: var(--kissd-font-stack);
  font-size: var(--type-nav-link-size);
  font-weight: var(--type-nav-link-weight);
  line-height: var(--type-nav-link-leading);
  letter-spacing: var(--type-nav-link-tracking);
  text-transform: var(--type-nav-link-transform);
  color: var(--type-nav-link-color);
}
.type-nav-mobile {
  font-family: var(--kissd-font-stack);
  font-size: var(--type-nav-mobile-size);
  font-weight: var(--type-nav-mobile-weight);
  line-height: var(--type-nav-mobile-leading);
  letter-spacing: var(--type-nav-mobile-tracking);
  text-transform: var(--type-nav-mobile-transform);
  color: var(--type-nav-mobile-color);
}
.type-button {
  font-family: var(--kissd-font-stack);
  font-size: var(--type-button-size);
  font-weight: var(--type-button-weight);
  line-height: var(--type-button-leading);
  letter-spacing: var(--type-button-tracking);
  text-transform: var(--type-button-transform);
  color: var(--type-button-color);
}
.type-tag-pill {
  font-family: var(--kissd-font-stack);
  font-size: var(--type-tag-pill-size);
  font-weight: var(--type-tag-pill-weight);
  line-height: var(--type-tag-pill-leading);
  letter-spacing: var(--type-tag-pill-tracking);
  text-transform: var(--type-tag-pill-transform);
  color: var(--type-tag-pill-color);
}

@media (min-width: 768px) {
  .type-hero { font-size: var(--type-hero-md-size); }
  .type-section-title { font-size: var(--type-section-title-md-size); }
  .type-card-title-lg { font-size: var(--type-card-title-lg-md-size); }
  .type-card-title { font-size: var(--type-card-title-md-size); }
  .type-card-title-sm { font-size: var(--type-card-title-sm-md-size); }
  .type-stat-display { font-size: var(--type-stat-display-md-size); }
  .type-lead { font-size: var(--type-lead-md-size); }
  .type-body { font-size: var(--type-body-md-size); }
  .type-caption { font-size: var(--type-caption-md-size); }
}

.type-hero-page {
  --type-hero-md-size: 96px;
}
.type-hero-mid {
  --type-hero-md-size: 88px;
}
.type-hero-detail {
  --type-hero-md-size: 72px;
}
.type-hero-work-detail {
  --type-hero-size: 36px;
  --type-hero-md-size: 72px;
}
.type-hero-compact {
  --type-hero-size: 36px;
  --type-hero-md-size: 96px;
}
.type-hero-about {
  --type-hero-md-size: 80px;
  --type-hero-leading: 0.9;
}
@media (min-width: 1024px) {
  .type-hero-about { --type-hero-md-size: 104px; }
}
.type-hero-404 {
  --type-hero-size: 120px;
  --type-hero-md-size: 200px;
  --type-hero-leading: 1;
}
.type-section-title-compact {
  --type-section-title-md-size: 48px;
}
.type-card-title-lg-xl {
  --type-card-title-lg-size: 36px;
  --type-card-title-lg-md-size: 60px;
}
.type-card-title-sm-tight {
  --type-card-title-sm-leading: 1.1;
}
.type-stat-display-sm {
  --type-stat-display-size: 36px;
  --type-stat-display-md-size: 36px;
}
.type-stat-display-mini {
  --type-stat-display-size: 30px;
  --type-stat-display-md-size: 36px;
}
.type-stat-display-static {
  --type-stat-display-md-size: 48px;
}
.type-eyebrow-loose {
  --type-eyebrow-tracking: 0.2em;
}
.type-eyebrow-extra-loose {
  --type-eyebrow-size: 11px;
  --type-eyebrow-tracking: 0.28em;
}
.type-button-compact {
  --type-button-size: 12px;
}
.type-button-chip {
  --type-button-size: 10px;
  --type-button-tracking: 0.2em;
}
.type-lead-lg {
  --type-lead-size: 20px;
  --type-lead-md-size: 30px;
  --type-lead-leading: 1.25;
}
.type-caption-xs {
  --type-caption-size: 10px;
  --type-caption-md-size: 10px;
}
.type-tag-pill-md {
  --type-tag-pill-size: 14px;
  --type-tag-pill-transform: none;
}
.type-tag-pill-sm {
  --type-tag-pill-size: 12px;
  --type-tag-pill-transform: none;
}

.tool-surface {
  background: var(--tool-bg);
  color: var(--tool-ink);
  font-family: var(--kissd-font-stack);
  font-size: var(--tool-body-size);
  font-weight: var(--tool-body-weight);
  line-height: var(--tool-body-leading);
}

.tool-card {
  background: var(--tool-panel);
  border: 1px solid var(--tool-line);
  border-radius: var(--tool-radius-card);
  color: var(--tool-ink);
  padding: var(--tool-card-padding);
}

.tool-heading {
  color: var(--tool-ink);
  font-family: var(--kissd-font-stack);
  font-size: var(--tool-h1-size);
  font-weight: var(--tool-h1-weight);
  line-height: var(--tool-h1-leading);
  letter-spacing: var(--tool-h1-tracking);
  text-transform: none;
}

.tool-subheading {
  color: var(--tool-ink);
  font-family: var(--kissd-font-stack);
  font-size: var(--tool-h2-size);
  font-weight: var(--tool-h2-weight);
  line-height: var(--tool-h2-leading);
  letter-spacing: var(--tool-h2-tracking);
  text-transform: none;
}

.tool-body {
  color: var(--tool-ink);
  font-size: var(--tool-body-size);
  font-weight: var(--tool-body-weight);
  line-height: var(--tool-body-leading);
}

.tool-muted { color: var(--tool-muted); }
.tool-faint { color: var(--tool-faint); }

.tool-label {
  color: var(--tool-muted);
  display: block;
  font-size: var(--tool-label-size);
  font-weight: var(--tool-label-weight);
  line-height: var(--tool-label-leading);
  letter-spacing: var(--tool-label-tracking);
  text-transform: none;
}

.tool-eyebrow {
  color: var(--tool-accent);
  display: block;
  font-size: var(--tool-eyebrow-size);
  font-weight: 500;
  letter-spacing: var(--tool-eyebrow-tracking);
  line-height: 1.2;
  text-transform: uppercase;
}

.tool-button-primary,
.tool-button-secondary,
.tool-chip {
  font-family: var(--kissd-font-stack);
  transition: background-color 0.3s var(--kissd-ease), border-color 0.3s var(--kissd-ease), color 0.3s var(--kissd-ease), box-shadow 0.3s var(--kissd-ease);
}

.tool-button-primary {
  align-items: center;
  background: var(--tool-accent);
  border: 0;
  border-radius: var(--tool-radius-control);
  color: var(--tool-paper);
  cursor: pointer;
  display: inline-flex;
  font-size: 14px;
  font-weight: 600;
  justify-content: center;
  min-height: var(--tool-control-height);
  padding: 0 16px;
}
.tool-button-primary:hover:not(:disabled) { background: var(--tool-accent-hover); }
.tool-button-primary:disabled { cursor: not-allowed; opacity: 0.5; }

.tool-button-secondary,
.tool-chip {
  align-items: center;
  background: var(--tool-panel-2);
  border: 1px solid var(--tool-line-strong);
  border-radius: var(--tool-radius-control);
  color: var(--tool-paper);
  cursor: pointer;
  display: inline-flex;
  font-size: 13px;
  font-weight: 500;
  justify-content: center;
  min-height: 36px;
  padding: 0 13px;
}
.tool-button-secondary:hover,
.tool-chip:hover { border-color: rgba(250, 73, 0, 0.55); }
.tool-chip-active,
.tool-chip[aria-pressed="true"] {
  background: rgba(250, 73, 0, 0.12);
  border-color: var(--tool-accent);
  color: var(--tool-paper);
}
.tool-button-primary:focus-visible,
.tool-button-secondary:focus-visible,
.tool-chip:focus-visible {
  outline: 2px solid var(--tool-accent);
  outline-offset: 2px;
}

.tool-input,
select.tool-input,
textarea.tool-input {
  background: var(--tool-bg-deep);
  border: 1px solid var(--tool-line);
  border-radius: var(--tool-radius-control);
  color: var(--tool-ink);
  font-family: var(--kissd-font-stack);
  font-size: 14px;
  height: var(--tool-control-height);
  min-width: 0;
  padding: var(--tool-control-padding-y) var(--tool-control-padding-x);
  transition: background-color 0.15s var(--kissd-ease), border-color 0.15s var(--kissd-ease), box-shadow 0.15s var(--kissd-ease);
  width: 100%;
}
textarea.tool-input { height: auto; line-height: 1.5; min-height: 160px; resize: vertical; }
select.tool-input {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23B5ADA8' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: right 14px center;
  background-repeat: no-repeat;
  padding-right: 32px;
}
.tool-input:focus {
  border-color: rgba(250, 73, 0, 0.55);
  box-shadow: 0 0 0 3px var(--tool-accent-soft);
  outline: none;
}
.tool-input::placeholder { color: var(--tool-faint); }
.tool-input[type="file"]::file-selector-button {
  background: var(--tool-panel-2);
  border: 1px solid var(--tool-line-strong);
  border-radius: 8px;
  color: var(--tool-paper);
  cursor: pointer;
  font-size: 12px;
  margin-right: 10px;
  padding: 6px 11px;
}

.poster-display {
  font-family: var(--kissd-font-stack);
  font-weight: var(--poster-display-weight);
  line-height: var(--poster-display-leading);
  text-transform: uppercase;
}

.poster-body {
  font-family: var(--kissd-font-stack);
  font-weight: var(--poster-body-weight);
  line-height: var(--poster-body-leading);
}

.poster-field-red {
  background: #FA4900;
  color: #191919;
}

.poster-field-magenta {
  background: #FB6DFD;
  color: #191919;
}

.poster-field-lime {
  background: #E1FF1C;
  color: #191919;
}

.poster-field-grey {
  background: #B5ADA8;
  color: #191919;
}

.poster-field-black {
  background: #191919;
  color: #F7F4EB;
}