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

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

@font-face {
  font-family: "Pretendard";
  src: url("assets/font/Pretendard-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Pretendard";
  src: url("assets/font/Pretendard-ExtraBold.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Pretendard";
  src: url("assets/font/Pretendard-Black.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --ink-950: #0b1220;
  --ink-900: #0f172a;
  --ink-700: #334155;
  --ink-500: #64748b;
  --ink-400: #94a3b8;
  --ink-300: #cbd5e1;
  --ink-200: #e2e8f0;
  --ink-050: #f8fafc;
  --white: #ffffff;

  --green-700: #00694a;
  --green-600: #00835c;
  --green-300: #4ade9b;

  --blue-600: #006dbb;

  --on-dark-100: #ffffff;
  --on-dark-72: rgba(255, 255, 255, 0.72);
  --on-dark-50: rgba(255, 255, 255, 0.5);
  --on-dark-24: rgba(255, 255, 255, 0.24);
  --on-dark-18: rgba(255, 255, 255, 0.18);
  --on-dark-16: rgba(255, 255, 255, 0.16);
  --on-dark-14: rgba(255, 255, 255, 0.14);
  --on-dark-10: rgba(255, 255, 255, 0.1);
  --on-dark-08: rgba(255, 255, 255, 0.08);
  --on-dark-06: rgba(255, 255, 255, 0.06);
  --on-dark-05: rgba(255, 255, 255, 0.05);
  --on-dark-02: rgba(255, 255, 255, 0.02);

  --text-heading: var(--ink-900);

  --text-body-color: var(--ink-700);
  --text-muted: var(--ink-500);
  --text-inverse: var(--white);
  --text-accent: var(--green-600);
  --text-accent-on-dark: var(--green-300);
  --text-data: var(--blue-600);

  --surface-page: var(--white);
  --surface-subtle: var(--ink-050);
  --surface-card: var(--white);
  --surface-field: var(--ink-050);
  --surface-dark: var(--ink-900);

  --border-default: var(--ink-200);
  --border-strong: var(--green-600);

  --action-primary: var(--green-600);
  --action-primary-hover: var(--green-700);

  --font-sans:
    Pretendard, -apple-system, "Malgun Gothic", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-black: 800;

  /* 글자 크기·자간은 air/tokens.css 와 같은 값·이름을 쓴다 */
  --t-fine: 14px;
  --t-micro: 16px;
  --t-small: 18px;
  --t-body: 20px;
  --t-lead: clamp(21px, 1.8vw, 24px);
  --t-h3: clamp(26px, 2.3vw, 31px);
  --t-h2-mf: clamp(31px, 3vw, 39px);
  --t-h2-f: clamp(38px, 3.8vw, 49px);
  --t-display: clamp(44px, 4.6vw, 61px);

  --t-hero: clamp(56px, 6.7vw, 96px);
  --t-num: clamp(31px, 3vw, 39px);
  --t-num-xl: clamp(38px, 3.8vw, 49px);

  --ls-display: -0.035em;
  --ls-h2-f: -0.03em;
  --ls-h2-mf: -0.025em;
  --ls-h3: -0.02em;
  --ls-lead: -0.01em;
  --ls-small: -0.01em;
  --ls-body: -0.01em;
  --ls-micro: -0.01em;
  --ls-num: 0.02em;
  --ls-pill: 0.04em;
  --ls-plain: 0.1em;

  --lh-display: 1.2;
  --lh-lead: 1.42;
  --lh-body: 1.75;
  --lh-loose: 1.9;

  --max-page: 1280px;
  --page-gutter: 24px;
  --section-y: clamp(84px, 9.7vw, 140px);

  --bar-h: 68px;

  --radius-sm: 0.5rem;
  --radius-pill: 999px;
  --radius-round: 50%;

  --shadow-float: 0 8px 20px rgba(15, 23, 42, 0.12);
  --shadow-float-hover: 0 12px 26px rgba(15, 23, 42, 0.2);
  --shadow-sym: drop-shadow(0 8px 20px rgba(15, 23, 42, 0.22));
  --shadow-sym-hover: drop-shadow(0 12px 26px rgba(15, 23, 42, 0.32));

  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out-soft: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 0.2s;
  --dur-base: 0.32s;
}

@media (max-width: 720px) {
  :root {
    /* 모바일: 리드는 small 로, 디스플레이는 한 단계 아래(h2-f)로 내린다 */
    --t-lead: var(--t-small);
    --t-display: var(--t-h2-f);
  }
}