/**
 * @module typography/apply-design-system
 * @intent 以語意 Token 統一全站字型、字級、行高、字重與字距。
 * @charter COD@1.0.0 · UID@2.0.0
 * @layer 4
 * @owner product-ui
 */

@font-face {
  font-family: "Geist Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("/fonts/geist/geist-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Geist Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("/fonts/geist/geist-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("/fonts/geist-mono/geist-mono-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("/fonts/geist-mono/geist-mono-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --type-font-ui: "Geist Sans", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;
  --type-font-zh: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;
  --type-font-mono: "Geist Mono", "SFMono-Regular", Consolas, monospace;

  --type-size-display: clamp(48px, 4vw, 56px);
  --type-size-page-title: clamp(28px, 2.4vw, 32px);
  --type-size-section-title: clamp(20px, 1.8vw, 24px);
  --type-size-card-title: clamp(15px, 1.15vw, 18px);
  --type-size-body: clamp(14px, 1vw, 16px);
  --type-size-navigation: clamp(14px, .95vw, 15px);
  --type-size-helper: clamp(12px, .85vw, 13px);
  --type-size-code: clamp(11px, .8vw, 12px);
  --type-size-control: clamp(13px, .9vw, 14px);
  --type-size-field: 16px;

  --type-weight-regular: 400;
  --type-weight-medium: 500;
  --type-weight-semibold: 600;
  --type-weight-bold: 700;

  --type-leading-display: 1;
  --type-leading-heading: 1.3;
  --type-leading-card: 1.35;
  --type-leading-body: 1.65;
  --type-leading-control: 1.4;
  --type-leading-helper: 1.55;

  --type-tracking-display: -.02em;
  --type-tracking-heading: 0;
  --type-tracking-body: 0;
  --type-tracking-label: .06em;
  --type-tracking-code: .04em;

  /* Legacy aliases now resolve through the semantic typography scale. */
  --font-sans: var(--type-font-ui);
  --font-mono: var(--type-font-mono);
  --font: var(--type-font-ui);
  --fs-2xs: var(--type-size-code);
  --fs-xs: var(--type-size-helper);
  --fs-sm: var(--type-size-navigation);
  --fs-md: var(--type-size-body);
  --fs-base: var(--type-size-body);
  --fs-lg: var(--type-size-card-title);
  --fs-xl: var(--type-size-section-title);
  --fs-2xl: var(--type-size-page-title);
  --fs-3xl: var(--type-size-page-title);
  --fs-metric: var(--type-size-display);
  --lh-tight: var(--type-leading-heading);
  --lh-snug: var(--type-leading-card);
  --lh-body: var(--type-leading-body);
  --lh-loose: var(--type-leading-body);
  --tracking-tight: var(--type-tracking-heading);
  --tracking-snug: var(--type-tracking-heading);
  --tracking-normal: var(--type-tracking-body);
  --tracking-wide: var(--type-tracking-label);
}

html,
body,
button,
input,
select,
textarea {
  font-family: var(--type-font-ui);
}

body {
  font-size: var(--type-size-body);
  font-weight: var(--type-weight-regular);
  line-height: var(--type-leading-body);
  letter-spacing: var(--type-tracking-body);
  font-synthesis: none;
}

h1,
h2,
h3,
h4,
.page-title h1,
.section-heading h2,
.details-heading h2,
.brief-toolbar-title h2 {
  font-family: var(--type-font-zh);
  font-weight: var(--type-weight-bold);
  line-height: var(--type-leading-heading);
  letter-spacing: var(--type-tracking-heading) !important;
}

.page-title h1,
.brief-toolbar-title h2 {
  font-size: var(--type-size-page-title) !important;
}

.section-heading h2,
.details-heading h2,
.matrix-toolbar h2,
.settings-card h3 {
  font-size: var(--type-size-section-title) !important;
}

.metric-title,
.queue-item strong,
.data-row strong,
.brief-block h3,
.brief-section summary,
.cc-orbit-node__title {
  font-family: var(--type-font-zh);
  font-size: var(--type-size-card-title) !important;
  font-weight: var(--type-weight-semibold) !important;
  line-height: var(--type-leading-card) !important;
  letter-spacing: var(--type-tracking-heading) !important;
}

p,
.detail-description,
.brief-panel input:not([type="checkbox"]):not([type="radio"]),
.brief-panel select,
.brief-panel textarea {
  font-size: var(--type-size-body);
  font-weight: var(--type-weight-regular);
  line-height: var(--type-leading-body);
}

.brief-panel input:not([type="checkbox"]):not([type="radio"]),
.brief-panel select,
.brief-panel textarea {
  font-size: var(--type-size-field) !important;
}

.nav-item span,
.queue-tabs button,
.group-head,
.timeline-head {
  font-size: var(--type-size-navigation) !important;
  font-weight: var(--type-weight-medium) !important;
  line-height: var(--type-leading-control);
}

button,
.pill-btn,
.badge,
.brief-chip,
.chip,
.tag-list span {
  font-size: var(--type-size-control) !important;
  font-weight: var(--type-weight-semibold) !important;
  line-height: var(--type-leading-control) !important;
}

small,
.settings-hint,
.brief-hint,
.field-hint,
.metric-foot,
.brief-section summary small,
.cc-decision-timeline__head span,
.cc-timeline-node__label {
  font-size: var(--type-size-helper) !important;
  font-weight: var(--type-weight-regular) !important;
  line-height: var(--type-leading-helper) !important;
}

code,
kbd,
pre,
samp,
.doc-kicker,
.details-content code,
.brief-toolbar-title code,
.cc-orbit-node__code {
  font-family: var(--type-font-mono) !important;
  font-size: var(--type-size-code) !important;
  font-weight: var(--type-weight-medium) !important;
  line-height: var(--type-leading-control) !important;
  letter-spacing: var(--type-tracking-code) !important;
  font-variant-numeric: tabular-nums;
}

.metric-value strong,
.cc-metric__value strong,
.cc-momentum__score strong {
  font-family: var(--type-font-ui) !important;
  font-size: var(--type-size-display) !important;
  font-weight: var(--type-weight-bold) !important;
  line-height: var(--type-leading-display) !important;
  letter-spacing: var(--type-tracking-display) !important;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "kern" 1;
}

.metric-label,
.completion-label,
.doc-kicker {
  letter-spacing: var(--type-tracking-label) !important;
}

@media (max-width: 720px) {
  :root {
    --type-size-display: 48px;
    --type-size-page-title: 28px;
    --type-size-section-title: 20px;
    --type-size-card-title: 15px;
  }
}