/* Generated by tools/build-tokens.js from design/figma-tokens.json — don't edit by hand.
   Source: Figma · Portfolio Site (tt0ao2lpz82D8DG46fIfSx), exported 2026-10-21.
   Breakpoints: desktop ≥1024px, tablet 768–1023px, mobile ≤767px. */

:root {
  --text-primary: #1a1a1a;
  --text-secondary: #6b6b6b;
  --text-inverse: #ffffff;
  --border-default: #e3e3e6;
  --surface-page: #ffffff;
  --surface-placeholder: #eeeeee;
  --surface-card: #f7f7f8;
  --accent-todo: #d9480f;
  --accent-marker-action: #3d59ff;
  --glass-fill: #d4d4d41a;
  --glass-fill-hover: #d4d4d440;
  --glass-fill-pressed: #a0a0a059;
  --glass-stroke: #cccccc40;
  --glass-panel: #f7f7f7b8;
  --glass-tint-dark: #1a1a1ab8;
  --glass-tint-dark-hover: #1a1a1ad9;
  --glass-tint-dark-pressed: #000000cc;
  --focus-ring: #1a1a1a;
  --segment-active-from: #1a1a1a;
  --segment-active-to: #808080;
  --segment-hover: #1a1a1a0f;
  --segment-pressed: #1a1a1a1f;
  --nav-dash: #6b6b6b8c;

  /* Desktop */
  --layout-frame-width: 1440px;
  --layout-text-column: 680px;
  --layout-text-margin: 380px;
  --layout-figure-width: 982px;
  --layout-figure-width-wide: 1252px;
  --layout-figure-margin: 229px;
  --layout-figure-inset: 48px;
  --layout-figure-gap: 14px;
  --layout-figure-radius: 24px;
  --space-article: 96px;
  --space-section: 56px;
  --space-subsection: 24px;
  --space-page: 48px;
  --space-page-bottom: 128px;
  --header-height: 102px;
  --header-padding-x: 36px;
  --header-padding-top: 36px;
  --header-pill-height: 50px;
  --header-pill-padding-x: 10px;
  --header-pill-gap: 10px;
  --header-pill-font: 20px;
  --header-avatar: 56px;
  --header-segment-height: 44px;
  --header-segment-padding-x: 16px;
  --type-title-size: 64px;
  --type-title-line: 67px;
  --type-h2-size: 42px;
  --type-h2-line: 44px;
  --type-h3-size: 22px;
  --type-h3-line: 32px;
  --type-h4-size: 21px;
  --type-h4-line: 30px;
  --type-lead-size: 24px;
  --type-lead-line: 36px;
  --type-body-size: 18px;
  --type-body-line: 28px;
  --type-body-strong-size: 20px;
  --type-body-strong-line: 32px;
  --type-quote-size: 26px;
  --type-quote-line: 34px;
  --type-principle-size: 32px;
  --type-principle-line: 32px;
  --type-metric-size: 54px;
  --type-metric-line: 70px;
  --type-legend-title-size: 16px;
  --type-legend-title-line: 23px;
  --type-legend-subtitle-size: 14px;
  --type-legend-subtitle-line: 20px;
  --type-legend-event-size: 15px;
  --type-legend-event-line: 21px;
  --type-legend-code-size: 13px;
  --type-legend-code-line: 18px;
  --type-marker-size: 11px;
  --type-marker-line: 15px;
}

/* Tablet */
@media (max-width: 1023px) {
  :root {
    --layout-frame-width: 768px;
    --layout-text-margin: 44px;
    --layout-figure-width: 752px;
    --layout-figure-width-wide: 752px;
    --layout-figure-margin: 8px;
    --layout-figure-inset: 40px;
    --layout-figure-gap: 12px;
    --space-article: 80px;
    --space-section: 48px;
    --space-page: 40px;
    --space-page-bottom: 96px;
    --header-height: 80px;
    --header-padding-x: 24px;
    --header-padding-top: 24px;
    --header-pill-height: 40px;
    --header-pill-padding-x: 8px;
    --header-pill-gap: 8px;
    --header-pill-font: 16px;
    --header-avatar: 40px;
    --header-segment-height: 34px;
    --header-segment-padding-x: 12px;
    --type-legend-title-size: 18px;
    --type-legend-title-line: 24px;
    --type-legend-subtitle-size: 15px;
    --type-legend-subtitle-line: 22px;
    --type-legend-event-size: 16px;
    --type-legend-event-line: 22px;
    --type-legend-code-size: 14px;
    --type-legend-code-line: 20px;
    --type-marker-size: 12px;
    --type-marker-line: 16px;
  }
}

/* Mobile */
@media (max-width: 767px) {
  :root {
    --layout-frame-width: 390px;
    --layout-text-column: 350px;
    --layout-text-margin: 20px;
    --layout-figure-width: 374px;
    --layout-figure-width-wide: 374px;
    --layout-figure-inset: 16px;
    --layout-figure-radius: 20px;
    --space-article: 64px;
    --space-section: 40px;
    --space-subsection: 20px;
    --space-page: 32px;
    --space-page-bottom: 80px;
    --header-height: 76px;
    --header-padding-x: 16px;
    --header-padding-top: 16px;
    --header-pill-height: 44px;
    --header-pill-padding-x: 12px;
    --header-avatar: 44px;
    --header-segment-height: 38px;
    --type-title-size: 40px;
    --type-title-line: 44px;
    --type-h2-size: 32px;
    --type-h2-line: 36px;
    --type-h3-size: 20px;
    --type-h3-line: 28px;
    --type-h4-size: 19px;
    --type-h4-line: 26px;
    --type-lead-size: 20px;
    --type-lead-line: 30px;
    --type-body-size: 17px;
    --type-body-line: 26px;
    --type-body-strong-size: 18px;
    --type-body-strong-line: 28px;
    --type-quote-size: 22px;
    --type-quote-line: 30px;
    --type-principle-size: 26px;
    --type-principle-line: 28px;
    --type-metric-size: 44px;
    --type-metric-line: 56px;
    --type-legend-event-size: 17px;
    --type-legend-event-line: 24px;
    --type-marker-size: 14px;
    --type-marker-line: 18px;
  }
}

/* Text styles (Figma Case/*) */
.t-eyebrow {
  font-family: "Literaturnaya Plain", Georgia, serif;
  font-weight: 400;
  font-style: normal;
  font-size: 13px;
  line-height: 18px;
  letter-spacing: 0.08em;
}

.t-title {
  font-family: "Literaturnaya", Georgia, serif;
  font-weight: 400;
  font-style: normal;
  font-size: var(--type-title-size);
  line-height: var(--type-title-line);
  letter-spacing: -0.01em;
}

.t-lead {
  font-family: "Fixel Text", system-ui, sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: var(--type-lead-size);
  line-height: var(--type-lead-line);
  letter-spacing: -0.005em;
}

.t-section-number {
  font-family: "Fixel Text", system-ui, sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.06em;
}

.t-h2 {
  font-family: "Literaturnaya", Georgia, serif;
  font-weight: 400;
  font-style: normal;
  font-size: var(--type-h2-size);
  line-height: var(--type-h2-line);
  letter-spacing: -0.012em;
}

.t-h3 {
  font-family: "Fixel Display", system-ui, sans-serif;
  font-weight: 600;
  font-style: normal;
  font-size: var(--type-h3-size);
  line-height: var(--type-h3-line);
  letter-spacing: normal;
}

.t-h4 {
  font-family: "Fixel Display", system-ui, sans-serif;
  font-weight: 600;
  font-style: normal;
  font-size: var(--type-h4-size);
  line-height: var(--type-h4-line);
  letter-spacing: -0.004em;
}

.t-body {
  font-family: "Fixel Text", system-ui, sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: var(--type-body-size);
  line-height: var(--type-body-line);
  letter-spacing: -0.013000000000000001em;
}

.t-body-strong {
  font-family: "Fixel Text", system-ui, sans-serif;
  font-weight: 600;
  font-style: normal;
  font-size: var(--type-body-strong-size);
  line-height: var(--type-body-strong-line);
  letter-spacing: -0.003em;
}

.t-list-label {
  font-family: "Literaturnaya", Georgia, serif;
  font-weight: 700;
  font-style: italic;
  font-size: var(--type-body-size);
  line-height: var(--type-body-line);
  letter-spacing: -0.013000000000000001em;
}

.t-quote {
  font-family: "Literaturnaya", Georgia, serif;
  font-weight: 400;
  font-style: italic;
  font-size: var(--type-quote-size);
  line-height: var(--type-quote-line);
  letter-spacing: -0.065em;
}

.t-quote-author {
  font-family: "Fixel Text", system-ui, sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 15px;
  line-height: 22px;
  letter-spacing: normal;
}

.t-principle {
  font-family: "Literaturnaya", Georgia, serif;
  font-weight: 400;
  font-style: italic;
  font-size: var(--type-principle-size);
  line-height: var(--type-principle-line);
  letter-spacing: -0.043em;
}

.t-meta-label {
  font-family: "Fixel Text", system-ui, sans-serif;
  font-weight: 600;
  font-style: normal;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: normal;
}

.t-meta-value {
  font-family: "Fixel Text", system-ui, sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: normal;
}

.t-caption {
  font-family: "Fixel Text", system-ui, sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 14px;
  line-height: 21px;
  letter-spacing: normal;
}

.t-figure-label {
  font-family: "Fixel Text", system-ui, sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 13px;
  line-height: 18px;
  letter-spacing: 0.04em;
}

.t-table-header {
  font-family: "Fixel Text", system-ui, sans-serif;
  font-weight: 600;
  font-style: normal;
  font-size: 13px;
  line-height: 18px;
  letter-spacing: 0.04em;
}

.t-table-cell {
  font-family: "Fixel Text", system-ui, sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 15px;
  line-height: 22px;
  letter-spacing: -0.001em;
}

.t-metric-value {
  font-family: "Literaturnaya", Georgia, serif;
  font-weight: 400;
  font-style: normal;
  font-size: var(--type-metric-size);
  line-height: var(--type-metric-line);
  letter-spacing: -0.015em;
}

.t-metric-label {
  font-family: "Fixel Text", system-ui, sans-serif;
  font-weight: 600;
  font-style: normal;
  font-size: 16px;
  line-height: 22px;
  letter-spacing: -0.001em;
}

.t-small {
  font-family: "Fixel Text", system-ui, sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: normal;
}

.t-legend-title {
  font-family: "Fixel Text", system-ui, sans-serif;
  font-weight: 600;
  font-style: normal;
  font-size: var(--type-legend-title-size);
  line-height: var(--type-legend-title-line);
  letter-spacing: normal;
}

.t-legend-subtitle {
  font-family: "Fixel Text", system-ui, sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: var(--type-legend-subtitle-size);
  line-height: var(--type-legend-subtitle-line);
  letter-spacing: normal;
}

.t-legend-event {
  font-family: "Fixel Text", system-ui, sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: var(--type-legend-event-size);
  line-height: var(--type-legend-event-line);
  letter-spacing: normal;
}

.t-legend-code {
  font-family: "Fixel Text", system-ui, sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: var(--type-legend-code-size);
  line-height: var(--type-legend-code-line);
  letter-spacing: normal;
}

.t-marker {
  font-family: "Fixel Text", system-ui, sans-serif;
  font-weight: 600;
  font-style: normal;
  font-size: var(--type-marker-size);
  line-height: var(--type-marker-line);
  letter-spacing: normal;
}

.t-ui-label {
  font-family: "Fixel Text", system-ui, sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: var(--header-pill-font);
  line-height: 1.4;
  letter-spacing: normal;
}

.t-ui-code {
  font-family: "Fixel Text", system-ui, sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: var(--header-pill-font);
  line-height: 1;
  letter-spacing: 0.14em;
}