/* ============================================================================
   JT DESIGN TOKENS — GENERATED FILE, DO NOT EDIT BY HAND

   Written by build/tokens.js from build/figma-tokens.json, which is a
   snapshot of the Figma variable collections and text styles.

   To change a value: change it in Figma, refresh the snapshot, rerun
   `node build/tokens.js`. Editing this file directly means the next
   regenerate silently reverts you.

   Snapshot taken: 2026-09-07 (headings re-read from the live text styles; variables unchanged)   from: JT website
   ========================================================================== */

/* --- Text ---------------------------------------------------------------- */
:root {
  --text-heading: #cbddea;
  --text-heading-bright: #ebf6fe;
  --text-orange: #eb8b2d;
  --text-orange-dark: #d06700;
  --text-blue: #00d4ff;
  --text-blue-pale: #40d1ff;
  --text-paragraph: #bdcddb;
  --text-paragraph-bright: #e8f4fd;
  --text-paragraph-pale: #7a8ca0;
}

/* --- Panel --------------------------------------------------------------- */
:root {
  --panel-fill-neutral: rgba(255, 255, 255, 0.03);
  --panel-stroke-neutral: rgba(137, 227, 245, 0.11);
  --panel-fill-highlighted: rgba(64, 209, 255, 0.05);
  --panel-stroke-highlighted: rgba(64, 209, 255, 0.36);
  --panel-fill-dark: rgba(8, 13, 20, 0.5);
  --panel-stroke-important: rgba(208, 103, 0, 0.4);
}

/* --- Spacing scale ------------------------------------------------------- */
:root {
  --space-2: 2px;
  --space-4: 4px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-36: 36px;
  --space-40: 40px;
  --space-48: 48px;
  --space-56: 56px;
  --space-64: 64px;
  --space-72: 72px;
  --space-80: 80px;
  --space-96: 96px;
  --space-120: 120px;
  --space-160: 160px;
  --space-200: 200px;
  --space-240: 240px;
}

/* --- Breakpoint collection ------------------------------------------------
   Four modes of one set of variables. The narrowest is the base
   declaration; the rest are min-width blocks, so a rule reads a token once
   and is responsive. A value of 0 means "no constraint at this width" —
   `--panel-max: 0` is how the comp says the panel is full-bleed on phones,
   so treat 0 as none, not as a literal zero width.
     Compact 360–509      → min-width: 360px
     Wide 510–719         → min-width: 510px
     Tablet 720–1024      → min-width: 720px
     Desktop 1025–1440    → min-width: 1025px
   ------------------------------------------------------------------------ */
:root {
  --grid-columns: 4;
  --grid-margin: 12px;
  --grid-gutter: 16px;
  --grid-container-max: 0;
  --panel-max: 0;
  --panel-padding-x: 20px;
  --panel-padding-y: 24px;
  --panel-inset: 12px;
  --panel-columns: 1;
  --panel-gutter: 16px;
  --panel-reading-max: 0;
  --rhythm-none: 0;
  --rhythm-inline: 8px;
  --rhythm-tight: 12px;
  --rhythm-prose: 16px;
  --rhythm-block: 20px;
  --rhythm-subsection: 24px;
  --rhythm-section: 40px;
  --rhythm-shell: 48px;
  --rhythm-page: 96px;
}

@media (min-width: 510px) {
  :root {
    --grid-columns: 6;
    --grid-margin: 24px;
    --grid-gutter: 24px;
    --grid-container-max: 0;
    --panel-max: 0;
    --panel-padding-x: 32px;
    --panel-padding-y: 40px;
    --panel-inset: 24px;
    --panel-columns: 2;
    --panel-gutter: 24px;
    --panel-reading-max: 0;
    --rhythm-none: 0;
    --rhythm-inline: 8px;
    --rhythm-tight: 12px;
    --rhythm-prose: 16px;
    --rhythm-block: 24px;
    --rhythm-subsection: 32px;
    --rhythm-section: 48px;
    --rhythm-shell: 56px;
    --rhythm-page: 120px;
  }
}

@media (min-width: 720px) {
  :root {
    --grid-columns: 8;
    --grid-margin: 32px;
    --grid-gutter: 24px;
    --grid-container-max: 960px;
    --panel-max: 960px;
    --panel-padding-x: 48px;
    --panel-padding-y: 56px;
    --panel-inset: 32px;
    --panel-columns: 4;
    --panel-gutter: 24px;
    --panel-reading-max: 864px;
    --rhythm-none: 0;
    --rhythm-inline: 8px;
    --rhythm-tight: 12px;
    --rhythm-prose: 20px;
    --rhythm-block: 24px;
    --rhythm-subsection: 32px;
    --rhythm-section: 56px;
    --rhythm-shell: 64px;
    --rhythm-page: 160px;
  }
}

@media (min-width: 1025px) {
  :root {
    --grid-columns: 12;
    --grid-margin: 48px;
    --grid-gutter: 24px;
    --grid-container-max: 1344px;
    --panel-max: 1040px;
    --panel-padding-x: 80px;
    --panel-padding-y: 72px;
    --panel-inset: 48px;
    --panel-columns: 4;
    --panel-gutter: 32px;
    --panel-reading-max: 880px;
    --rhythm-none: 0;
    --rhythm-inline: 8px;
    --rhythm-tight: 12px;
    --rhythm-prose: 20px;
    --rhythm-block: 24px;
    --rhythm-subsection: 32px;
    --rhythm-section: 56px;
    --rhythm-shell: 64px;
    --rhythm-page: 200px;
  }
}

/* --- Text styles ----------------------------------------------------------
   One group per Figma text style. Families stay as the two stack tokens the
   site already had, because a token holding only "Tektur" would lose the
   fallbacks that keep the page readable before the webfont lands.
   ------------------------------------------------------------------------ */
:root {
  /* Heading/H1 — Tektur Bold 48/normal 1px */
  --h1-family: var(--display);
  --h1-size: 48px;
  --h1-weight: 700;
  --h1-line: normal;
  --h1-tracking: 1px;
  /* Heading/H2 — Tektur Bold 40/normal 1px */
  --h2-family: var(--display);
  --h2-size: 40px;
  --h2-weight: 700;
  --h2-line: normal;
  --h2-tracking: 1px;
  /* Heading/H3 — Tektur SemiBold 34/normal 1px */
  --h3-family: var(--display);
  --h3-size: 34px;
  --h3-weight: 600;
  --h3-line: normal;
  --h3-tracking: 1px;
  /* Heading/H4 — Tektur SemiBold 23/normal 2px */
  --h4-family: var(--display);
  --h4-size: 23px;
  --h4-weight: 600;
  --h4-line: normal;
  --h4-tracking: 2px;
  /* Heading/H5 — Tektur Medium 17/normal 2px */
  --h5-family: var(--display);
  --h5-size: 17px;
  --h5-weight: 500;
  --h5-line: normal;
  --h5-tracking: 2px;
  /* Heading/H6 — Tektur Medium 13/normal 2px */
  --h6-family: var(--display);
  --h6-size: 13px;
  --h6-weight: 500;
  --h6-line: normal;
  --h6-tracking: 2px;
  /* Display/Quote Display — Tektur Medium 32/normal 4px */
  --display-quote-display-family: var(--display);
  --display-quote-display-size: 32px;
  --display-quote-display-weight: 500;
  --display-quote-display-line: normal;
  --display-quote-display-tracking: 4px;
  /* Display/Quote — Tektur Medium 24/normal 5px */
  --display-quote-family: var(--display);
  --display-quote-size: 24px;
  --display-quote-weight: 500;
  --display-quote-line: normal;
  --display-quote-tracking: 5px;
  /* Display/Numeral — Tektur Bold 48/normal 0px */
  --display-numeral-family: var(--display);
  --display-numeral-size: 48px;
  --display-numeral-weight: 700;
  --display-numeral-line: normal;
  --display-numeral-tracking: 0px;
  /* Body/Paragraph — Exo 2 Light 16/26px 1px */
  --body-paragraph-family: var(--text);
  --body-paragraph-size: 16px;
  --body-paragraph-weight: 300;
  --body-paragraph-line: 26px;
  --body-paragraph-tracking: 1px;
  /* Body/Paragraph Small — Exo 2 Light 14/24px 1.2px */
  --body-paragraph-small-family: var(--text);
  --body-paragraph-small-size: 14px;
  --body-paragraph-small-weight: 300;
  --body-paragraph-small-line: 24px;
  --body-paragraph-small-tracking: 1.2px;
  /* Body/Caption — Exo 2 Light 13/normal 0px */
  --body-caption-family: var(--text);
  --body-caption-size: 13px;
  --body-caption-weight: 300;
  --body-caption-line: normal;
  --body-caption-tracking: 0px;
  /* Body/Label — Tektur Regular 13/normal 2px UPPER */
  --body-label-family: var(--display);
  --body-label-size: 13px;
  --body-label-weight: 400;
  --body-label-line: normal;
  --body-label-tracking: 2px;
  --body-label-case: uppercase;
  /* Body/Label Small — Tektur Medium 11/normal 1.7px UPPER */
  --body-label-small-family: var(--display);
  --body-label-small-size: 11px;
  --body-label-small-weight: 500;
  --body-label-small-line: normal;
  --body-label-small-tracking: 1.7px;
  --body-label-small-case: uppercase;
  /* UI/Nav Link — Tektur Regular 14/normal 2.1px UPPER */
  --ui-nav-link-family: var(--display);
  --ui-nav-link-size: 14px;
  --ui-nav-link-weight: 400;
  --ui-nav-link-line: normal;
  --ui-nav-link-tracking: 2.1px;
  --ui-nav-link-case: uppercase;
  /* UI/Submenu Item — Tektur Regular 12/20px 1.4px */
  --ui-submenu-item-family: var(--display);
  --ui-submenu-item-size: 12px;
  --ui-submenu-item-weight: 400;
  --ui-submenu-item-line: 20px;
  --ui-submenu-item-tracking: 1.4px;
  /* UI/Button Label — Tektur SemiBold 13/normal 2px UPPER */
  --ui-button-label-family: var(--display);
  --ui-button-label-size: 13px;
  --ui-button-label-weight: 600;
  --ui-button-label-line: normal;
  --ui-button-label-tracking: 2px;
  --ui-button-label-case: uppercase;
  /* Brand/Wordmark — Tektur Bold 24/normal 2.4px UPPER */
  --brand-wordmark-family: var(--display);
  --brand-wordmark-size: 24px;
  --brand-wordmark-weight: 700;
  --brand-wordmark-line: normal;
  --brand-wordmark-tracking: 2.4px;
  --brand-wordmark-case: uppercase;
  /* Brand/Wordmark Small — Tektur Bold 18/normal 3px UPPER */
  --brand-wordmark-small-family: var(--display);
  --brand-wordmark-small-size: 18px;
  --brand-wordmark-small-weight: 700;
  --brand-wordmark-small-line: normal;
  --brand-wordmark-small-tracking: 3px;
  --brand-wordmark-small-case: uppercase;
}