/* Zero to One Core 1.1.1 · Figma base tokens + approved typography override (2026-10-13).
   Mobile-first: Compact <640px, Medium 640–1023px, Wide >=1024px.
   Load licensed Wanted Sans / Manrope separately. No automatic download.
   Light plus explicit inverse pairs. Figma's default mode remains Wide. */
:root {
  --zto-sky-400: #73B5E4;
  --zto-blue-500: #168CE2;
  --zto-blue-600: #0875C1;
  --zto-blue-700: #0664A6;
  --zto-blue-800: #075389;
  --zto-navy-900: #102A43;
  --zto-neutral-000: #FFFFFF;
  --zto-neutral-050: #F2F8FC;
  --zto-blue-050: #E7F3FB;
  --zto-neutral-500: #667085;
  --zto-neutral-200: #D8E4ED;
  --zto-neutral-300: #9CAFC0;
  --zto-neutral-100: #EDF2F6;
  --zto-green-500: #22A06B;
  --zto-green-700: #17734D;
  --zto-green-050: #E9F6EF;
  --zto-red-500: #E5484D;
  --zto-red-700: #B4232A;
  --zto-red-800: #961B24;
  --zto-red-050: #FFF1F2;
  --zto-red-100: #FDE2E4;
  --zto-surface-canvas: var(--zto-neutral-050);
  --zto-surface-default: var(--zto-neutral-000);
  --zto-surface-subtle: var(--zto-blue-050);
  --zto-surface-hover: var(--zto-neutral-050);
  --zto-surface-pressed: var(--zto-blue-050);
  --zto-surface-disabled: var(--zto-neutral-100);
  --zto-brand-sky: var(--zto-sky-400);
  --zto-brand-navy: var(--zto-navy-900);
  --zto-text-primary: var(--zto-navy-900);
  --zto-text-secondary: var(--zto-neutral-600);
  --zto-text-disabled: var(--zto-neutral-500);
  --zto-text-inverse: var(--zto-neutral-000);
  --zto-text-action: var(--zto-blue-700);
  --zto-border-default: var(--zto-neutral-200);
  --zto-border-strong: var(--zto-neutral-300);
  --zto-border-focus: var(--zto-blue-600);
  --zto-action-default: var(--zto-blue-600);
  --zto-action-hover: var(--zto-blue-700);
  --zto-action-pressed: var(--zto-blue-800);
  --zto-action-disabled: var(--zto-neutral-100);
  --zto-danger-accent: var(--zto-red-500);
  --zto-danger-text: var(--zto-red-700);
  --zto-danger-pressed: var(--zto-red-800);
  --zto-danger-subtle: var(--zto-red-050);
  --zto-danger-hover: var(--zto-red-100);
  --zto-success-accent: var(--zto-green-500);
  --zto-success-text: var(--zto-green-700);
  --zto-success-subtle: var(--zto-green-050);
  --zto-space-0: 0px;
  --zto-space-4: 4px;
  --zto-space-8: 8px;
  --zto-space-12: 12px;
  --zto-space-16: 16px;
  --zto-space-24: 24px;
  --zto-space-32: 32px;
  --zto-space-40: 40px;
  --zto-space-48: 48px;
  --zto-space-64: 64px;
  --zto-radius-4: 4px;
  --zto-radius-8: 8px;
  --zto-radius-12: 12px;
  --zto-radius-16: 16px;
  --zto-size-icon: 20px;
  --zto-border-width: 1px;
  --zto-amber-700: #8A5200;
  --zto-warning-text: var(--zto-amber-700);
  --zto-amber-050: #FFF6E5;
  --zto-warning-subtle: var(--zto-amber-050);
  --zto-amber-500: #D99000;
  --zto-warning-accent: var(--zto-amber-500);
  --zto-red-200: #F3B9BD;
  --zto-danger-border: var(--zto-red-200);
  --zto-red-150: #FAD2D6;
  --zto-danger-pressed-background: var(--zto-red-150);
  --zto-sky-100: #D6EAF8;
  --zto-navy-800: #193D59;
  --zto-neutral-400: #7A8D9E;
  --zto-neutral-600: #52677A;
  --zto-surface-inverse: var(--zto-navy-900);
  --zto-surface-inverse-raised: var(--zto-navy-800);
  --zto-text-on-inverse: var(--zto-neutral-000);
  --zto-text-on-inverse-secondary: var(--zto-sky-100);
  --zto-border-control: var(--zto-neutral-400);
  --zto-brand-soft: var(--zto-sky-100);
  --zto-info-text: var(--zto-blue-800);
  --zto-info-subtle: var(--zto-blue-050);
  --zto-action-on-inverse: var(--zto-sky-400);
  --zto-text-on-brand: var(--zto-navy-900);
  --zto-graphic-line: var(--zto-sky-400);
  --zto-space-2: 2px;
  --zto-space-20: 20px;
  --zto-space-80: 80px;
  --zto-space-96: 96px;
  --zto-space-128: 128px;
  --zto-radius-0: 0px;
  --zto-radius-999: 999px;
  --zto-control-40: 40px;
  --zto-control-48: 48px;
  --zto-control-56: 56px;
  --zto-border-focus-width: 2px;
  --zto-layout-content-max: 1200px;
  --zto-layout-gutter-compact: 20px;
  --zto-layout-gutter-wide: 48px;
  --zto-type-display-large-size: 2.5rem;
  --zto-type-display-large-line: 3.5rem;
  --zto-type-display-medium-size: 2rem;
  --zto-type-display-medium-line: 2.75rem;
  --zto-type-heading-large-size: 1.75rem;
  --zto-type-heading-large-line: 2.5rem;
  --zto-type-heading-medium-size: 1.5rem;
  --zto-type-heading-medium-line: 2.25rem;
  --zto-type-heading-small-size: 1.25rem;
  --zto-type-heading-small-line: 2rem;
  --zto-type-body-large-size: 1.125rem;
  --zto-type-body-large-line: 1.875rem;
  --zto-type-body-default-size: 1rem;
  --zto-type-body-default-line: 1.75rem;
  --zto-type-body-compact-size: 0.875rem;
  --zto-type-body-compact-line: 1.5rem;
  --zto-type-label-default-size: 0.875rem;
  --zto-type-label-default-line: 1.25rem;
  --zto-type-caption-size: 0.75rem;
  --zto-type-caption-line: 1.25rem;
  --zto-type-latin-display-size: 3rem;
  --zto-type-latin-display-line: 3.5rem;
  --zto-type-latin-heading-size: 1.75rem;
  --zto-type-latin-heading-line: 2.5rem;
  --zto-type-latin-label-size: 0.875rem;
  --zto-type-latin-label-line: 1.25rem;
  --zto-brand-accent: var(--zto-blue-500);
  --zto-graphic-watermark-opacity: 0.06;
  --zto-graphic-line-width: 2px;
  --zto-layout-gutter-medium: 32px;
  --zto-layout-column-gap-compact: 16px;
  --zto-layout-column-gap-medium: 24px;
  --zto-layout-column-gap-wide: 24px;
  --zto-shadow-floating-x: 0px;
  --zto-shadow-floating-y: 8px;
  --zto-shadow-floating-blur: 24px;
  --zto-shadow-floating-spread: 0px;
  --zto-navy-shadow-12: rgba(16, 42, 67, 0.12);
  --zto-shadow-floating-color: var(--zto-navy-shadow-12);
  --zto-font-body: "Wanted Sans", "Noto Sans KR", "Malgun Gothic", sans-serif;
  --zto-font-latin: "Manrope", "Wanted Sans", "Noto Sans KR", sans-serif;
  --zto-layout-gutter: var(--zto-layout-gutter-compact);
  --zto-layout-column-gap: var(--zto-layout-column-gap-compact);
  --zto-layout-columns: 4;
  --zto-elevation-none: none;
  --zto-elevation-floating: var(--zto-shadow-floating-x) var(--zto-shadow-floating-y) var(--zto-shadow-floating-blur) var(--zto-shadow-floating-spread) var(--zto-shadow-floating-color);
  --zto-motion-fast: 120ms;
  --zto-motion-default: 160ms;
  --zto-motion-emphasis: 240ms;
  --zto-motion-easing: cubic-bezier(0.2, 0, 0, 1);
}

@media (min-width: 640px) {
  :root {
    --zto-type-display-large-size: 3rem;
    --zto-type-display-large-line: 4rem;
    --zto-type-display-medium-size: 2.5rem;
    --zto-type-display-medium-line: 3.5rem;
    --zto-type-heading-large-size: 2rem;
    --zto-type-heading-large-line: 2.75rem;
    --zto-type-heading-medium-size: 1.75rem;
    --zto-type-heading-medium-line: 2.5rem;
    --zto-type-heading-small-size: 1.25rem;
    --zto-type-heading-small-line: 2rem;
    --zto-type-body-large-size: 1.125rem;
    --zto-type-body-large-line: 1.875rem;
    --zto-type-body-default-size: 1rem;
    --zto-type-body-default-line: 1.75rem;
    --zto-type-body-compact-size: 0.875rem;
    --zto-type-body-compact-line: 1.5rem;
    --zto-type-label-default-size: 0.875rem;
    --zto-type-label-default-line: 1.25rem;
    --zto-type-caption-size: 0.75rem;
    --zto-type-caption-line: 1.25rem;
    --zto-type-latin-display-size: 4rem;
    --zto-type-latin-display-line: 4.75rem;
    --zto-type-latin-heading-size: 2rem;
    --zto-type-latin-heading-line: 2.75rem;
    --zto-type-latin-label-size: 0.875rem;
    --zto-type-latin-label-line: 1.25rem;
    --zto-layout-gutter: var(--zto-layout-gutter-medium);
    --zto-layout-column-gap: var(--zto-layout-column-gap-medium);
    --zto-layout-columns: 6;
  }
}

@media (min-width: 1024px) {
  :root {
    --zto-type-display-large-size: 4rem;
    --zto-type-display-large-line: 5.25rem;
    --zto-type-display-medium-size: 3rem;
    --zto-type-display-medium-line: 4rem;
    --zto-type-heading-large-size: 2.5rem;
    --zto-type-heading-large-line: 3.5rem;
    --zto-type-heading-medium-size: 1.75rem;
    --zto-type-heading-medium-line: 2.5rem;
    --zto-type-heading-small-size: 1.25rem;
    --zto-type-heading-small-line: 2rem;
    --zto-type-body-large-size: 1.125rem;
    --zto-type-body-large-line: 1.875rem;
    --zto-type-body-default-size: 1rem;
    --zto-type-body-default-line: 1.75rem;
    --zto-type-body-compact-size: 0.875rem;
    --zto-type-body-compact-line: 1.5rem;
    --zto-type-label-default-size: 0.875rem;
    --zto-type-label-default-line: 1.25rem;
    --zto-type-caption-size: 0.75rem;
    --zto-type-caption-line: 1.25rem;
    --zto-type-latin-display-size: 5rem;
    --zto-type-latin-display-line: 5.75rem;
    --zto-type-latin-heading-size: 2rem;
    --zto-type-latin-heading-line: 2.75rem;
    --zto-type-latin-label-size: 0.875rem;
    --zto-type-latin-label-line: 1.25rem;
    --zto-layout-gutter: var(--zto-layout-gutter-wide);
    --zto-layout-column-gap: var(--zto-layout-column-gap-wide);
    --zto-layout-columns: 12;
  }
}

.zto-type-display-large {
  font-family: var(--zto-font-body);
  font-size: var(--zto-type-display-large-size);
  line-height: var(--zto-type-display-large-line);
  font-weight: 700;
  letter-spacing: 0;
  overflow-wrap: anywhere;
  word-break: keep-all;
}

.zto-type-display-medium {
  font-family: var(--zto-font-body);
  font-size: var(--zto-type-display-medium-size);
  line-height: var(--zto-type-display-medium-line);
  font-weight: 700;
  letter-spacing: 0;
  overflow-wrap: anywhere;
  word-break: keep-all;
}

.zto-type-heading-large {
  font-family: var(--zto-font-body);
  font-size: var(--zto-type-heading-large-size);
  line-height: var(--zto-type-heading-large-line);
  font-weight: 700;
  letter-spacing: 0;
  overflow-wrap: anywhere;
  word-break: keep-all;
}

.zto-type-heading-medium {
  font-family: var(--zto-font-body);
  font-size: var(--zto-type-heading-medium-size);
  line-height: var(--zto-type-heading-medium-line);
  font-weight: 700;
  letter-spacing: 0;
  overflow-wrap: anywhere;
  word-break: keep-all;
}

.zto-type-heading-small {
  font-family: var(--zto-font-body);
  font-size: var(--zto-type-heading-small-size);
  line-height: var(--zto-type-heading-small-line);
  font-weight: 700;
  letter-spacing: 0;
  overflow-wrap: anywhere;
  word-break: keep-all;
}

.zto-type-body-large {
  font-family: var(--zto-font-body);
  font-size: var(--zto-type-body-large-size);
  line-height: var(--zto-type-body-large-line);
  font-weight: 400;
  letter-spacing: 0;
  overflow-wrap: anywhere;
  word-break: keep-all;
}

.zto-type-body-default {
  font-family: var(--zto-font-body);
  font-size: var(--zto-type-body-default-size);
  line-height: var(--zto-type-body-default-line);
  font-weight: 400;
  letter-spacing: 0;
  overflow-wrap: anywhere;
  word-break: keep-all;
}

.zto-type-body-compact {
  font-family: var(--zto-font-body);
  font-size: var(--zto-type-body-compact-size);
  line-height: var(--zto-type-body-compact-line);
  font-weight: 400;
  letter-spacing: 0;
  overflow-wrap: anywhere;
  word-break: keep-all;
}

.zto-type-label-default {
  font-family: var(--zto-font-body);
  font-size: var(--zto-type-label-default-size);
  line-height: var(--zto-type-label-default-line);
  font-weight: 500;
  letter-spacing: 0;
  overflow-wrap: anywhere;
  word-break: keep-all;
}

.zto-type-caption {
  font-family: var(--zto-font-body);
  font-size: var(--zto-type-caption-size);
  line-height: var(--zto-type-caption-line);
  font-weight: 400;
  letter-spacing: 0;
  overflow-wrap: anywhere;
  word-break: keep-all;
}

.zto-type-latin-display {
  font-family: var(--zto-font-latin);
  font-size: var(--zto-type-latin-display-size);
  line-height: var(--zto-type-latin-display-line);
  font-weight: 700;
  letter-spacing: 0;
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
}

.zto-type-latin-heading {
  font-family: var(--zto-font-latin);
  font-size: var(--zto-type-latin-heading-size);
  line-height: var(--zto-type-latin-heading-line);
  font-weight: 700;
  letter-spacing: 0;
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
}

.zto-type-latin-label {
  font-family: var(--zto-font-latin);
  font-size: var(--zto-type-latin-label-size);
  line-height: var(--zto-type-latin-label-line);
  font-weight: 500;
  letter-spacing: 0;
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --zto-motion-fast: 0ms;
    --zto-motion-default: 0ms;
    --zto-motion-emphasis: 0ms;
  }
}