/* Frontier Design System — generated from tokens.json by build.js. Don't edit it: change tokens.json and run npm run build. */

:root, [data-theme="dark"] {
  color-scheme: dark;
  --background-100: #1a1712;
  --background-200: #141109;
  --gray-100: #211d17;
  --gray-200: #2a241c;
  --gray-300: #332c23;
  --gray-400: #3d362c;
  --gray-500: #51493e;
  --gray-600: #776e62;
  --gray-700: #958d81;
  --gray-800: #aaa296;
  --gray-900: #c3bdb3;
  --gray-1000: #f2f4f5;
  --sun-100: #281b10;
  --sun-200: #322111;
  --sun-300: #3f2813;
  --sun-400: #543519;
  --sun-500: #744b24;
  --sun-600: #9e6630;
  --sun-700: #d99a5e;
  --sun-800: #e2a263;
  --sun-900: #e8a868;
  --sun-1000: #ffe6bf;
  --sky-100: #1b1d29;
  --sky-200: #212435;
  --sky-300: #282c42;
  --sky-400: #363b58;
  --sky-500: #4b5279;
  --sky-600: #6770a6;
  --sky-700: #939fe6;
  --sky-800: #a2aff7;
  --sky-900: #aeb9f8;
  --sky-1000: #e1e7ff;
  --green-100: #15211d;
  --green-200: #182924;
  --green-300: #1c332c;
  --green-400: #25443b;
  --green-500: #345f52;
  --green-600: #478270;
  --green-700: #69b69e;
  --green-800: #79c6ae;
  --green-900: #8dcdb8;
  --green-1000: #d2f0e5;
  --red-100: #2d1713;
  --red-200: #3a1b15;
  --red-300: #482118;
  --red-400: #602b21;
  --red-500: #843d2e;
  --red-600: #b4533f;
  --red-700: #fa785d;
  --red-800: #ff927a;
  --red-900: #ec8a6f;
  --red-1000: #ffe0d9;
  --on-sun: #1a1712;
  --on-sky: #1a1712;
  --on-red: #1a1712;
  --current: var(--sun-700);
  --scrim: #080604a0;
  --focus: var(--sky-900);
  --link: var(--sky-900);
  --selected: var(--sky-100);
  --state-delivered: var(--green-700);
  --state-transit: var(--sun-700);
  --state-ordered: var(--sky-700);
  --state-projected: var(--gray-600);
  --state-no-quote: var(--gray-600);
  --state-late: var(--red-700);
  --health-on-track: var(--green-700);
  --health-at-risk: var(--sun-700);
  --health-off-track: var(--red-700);
  --health-unknown: var(--gray-600);
  --deadline: var(--red-700);
  --dawn-night: #171b2e;
  --dawn-navy: #1d2236;
  --dawn-plum: #4a4256;
  --dawn-mauve: #6b5a5a;
  --dawn-rose: #a7766a;
  --dawn-amber: #d99a5e;
  --dawn-sun: #e8a868;
  --dawn-cream: #ffe6bf;
  --mark-ground: #0c0b09;
  --mark-edge: #3d362c;
  --mark-ink: #f2f4f5;
  --mark-sun: #d99a5e;
  --shadow-sm: 0 1px 2px #00000052;
  --shadow-md: 0 0 0 1px #3d362c, 0 4px 8px -4px #00000080, 0 16px 24px -8px #00000066;
  --shadow-lg: 0 0 0 1px #3d362c, 0 24px 64px -12px #000000b3;
  --focus-ring: 0 0 0 2px #1a1712, 0 0 0 4px #aeb9f8;
}

[data-theme="light"] {
  color-scheme: light;
  --background-100: #fcfbf9;
  --background-200: #f6f4f0;
  --gray-100: #f4f2ee;
  --gray-200: #edeae4;
  --gray-300: #e5e1da;
  --gray-400: #dcd7ce;
  --gray-500: #c6bfb3;
  --gray-600: #8c8478;
  --gray-700: #6e675d;
  --gray-800: #5d574e;
  --gray-900: #4a453e;
  --gray-1000: #1a1712;
  --sun-100: #fff5ec;
  --sun-200: #ffecdd;
  --sun-300: #fde0c8;
  --sun-400: #f5cdac;
  --sun-500: #e5b287;
  --sun-600: #ce8f56;
  --sun-800: #b8783d;
  --sun-900: #8b4e00;
  --sun-1000: #492600;
  --sky-100: #f4f6ff;
  --sky-200: #ecefff;
  --sky-300: #dfe5ff;
  --sky-400: #ccd4f9;
  --sky-500: #b1bbeb;
  --sky-600: #8f9ad6;
  --sky-700: #5b63b8;
  --sky-800: #4c53a3;
  --sky-900: #454c8c;
  --sky-1000: #272c55;
  --green-100: #edfaf5;
  --green-200: #e2f5ee;
  --green-300: #d3ede4;
  --green-400: #bbdfd3;
  --green-500: #99caba;
  --green-600: #6ead99;
  --green-700: #43917a;
  --green-800: #2f7f69;
  --green-900: #216e5a;
  --green-1000: #013a2d;
  --red-100: #fff4f1;
  --red-200: #ffebe7;
  --red-300: #ffded6;
  --red-400: #ffc6ba;
  --red-500: #fca490;
  --red-600: #e87b64;
  --red-700: #c4452d;
  --red-800: #ab3720;
  --red-900: #a53019;
  --red-1000: #5d0d00;
  --on-sky: #ffffff;
  --on-red: #ffffff;
  --current: var(--sun-800);
  --scrim: #1a171247;
  --focus: var(--sky-900);
  --link: var(--sky-900);
  --selected: var(--sky-100);
  --state-delivered: var(--green-700);
  --state-transit: var(--sun-800);
  --state-ordered: var(--sky-700);
  --state-projected: var(--gray-600);
  --state-no-quote: var(--gray-600);
  --state-late: var(--red-700);
  --health-on-track: var(--green-700);
  --health-at-risk: var(--sun-800);
  --health-off-track: var(--red-700);
  --health-unknown: var(--gray-600);
  --deadline: var(--red-700);
  --shadow-sm: 0 1px 2px #1a171214;
  --shadow-md: 0 0 0 1px #1a171214, 0 4px 8px -4px #1a17120f, 0 16px 24px -8px #1a17121f;
  --shadow-lg: 0 0 0 1px #1a171214, 0 24px 64px -12px #1a171238;
  --focus-ring: 0 0 0 2px #fcfbf9, 0 0 0 4px #454c8c;
}

:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;
  --control-sm: 32px;
  --control-md: 40px;
  --control-lg: 48px;
  --tabs-height: 48px;
  --band-height: 48px;
  --sidebar-width: 210px;
  --sidebar-rail: 56px;
  --row-height: 48px;
  --timeline-list-label: 520px;
  --timeline-day: 44px;
  --width-page: 1320px;
  --width-wide: 1440px;
  --width-prose: 64ch;
  --width-sheet: 480px;
  --gutter: clamp(16px, 3vw, 40px);
  --gradient-dawn: linear-gradient(180deg, #171b2e 0%, #4a4256 45%, #a7766a 80%, #e8a868 100%);
  --gradient-sky: linear-gradient(180deg, #171b2e 0%, #28263d 36%, #4a4256 68%, #6b5a5a 100%);
  --gradient-sunrise: radial-gradient(90% 120% at 64% 135%, #ffd69680 0%, #f0966433 32%, #f0966400 60%);
  --gradient-horizon: linear-gradient(90deg, #e8a86800 4%, #e8a868b3 46%, #ffe6bf 64%, #e8a868b3 78%, #e8a86800 98%);
  --gradient-glow: radial-gradient(50% 50% at 50% 62%, #d99a5e38 0%, #a7766a26 38%, #4a425617 66%, #1a171200 100%);
  --font-sans: Geist, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

@font-face { font-family: "Geist"; src: url("fonts/geist-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("fonts/geist-mono-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

/* Heading */
.heading-56 { font-family: var(--font-sans); font-size: 56px; line-height: 60px; font-weight: 300; letter-spacing: -0.035em; }
.heading-48 { font-family: var(--font-sans); font-size: 48px; line-height: 52px; font-weight: 300; letter-spacing: -0.035em; }
.heading-40 { font-family: var(--font-sans); font-size: 40px; line-height: 48px; font-weight: 300; letter-spacing: -0.03em; }
.heading-32 { font-family: var(--font-sans); font-size: 32px; line-height: 40px; font-weight: 300; letter-spacing: -0.025em; }
.heading-24 { font-family: var(--font-sans); font-size: 24px; line-height: 32px; font-weight: 300; letter-spacing: -0.02em; }
.heading-20 { font-family: var(--font-sans); font-size: 20px; line-height: 28px; font-weight: 400; letter-spacing: -0.015em; }
.heading-16 { font-family: var(--font-sans); font-size: 16px; line-height: 24px; font-weight: 500; letter-spacing: -0.01em; }
.heading-14 { font-family: var(--font-sans); font-size: 14px; line-height: 20px; font-weight: 500; }
/* Label */
.label-16 { font-family: var(--font-sans); font-size: 16px; line-height: 20px; font-weight: 400; }
.label-14 { font-family: var(--font-sans); font-size: 14px; line-height: 20px; font-weight: 400; }
.label-13 { font-family: var(--font-sans); font-size: 13px; line-height: 16px; font-weight: 400; }
.label-12 { font-family: var(--font-sans); font-size: 12px; line-height: 16px; font-weight: 400; }
.eyebrow-12 { font-family: var(--font-sans); font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: 0.12em; }
/* Copy */
.copy-20 { font-family: var(--font-sans); font-size: 20px; line-height: 30px; font-weight: 300; letter-spacing: -0.01em; }
.copy-16 { font-family: var(--font-sans); font-size: 16px; line-height: 26px; font-weight: 400; }
.copy-15 { font-family: var(--font-sans); font-size: 15px; line-height: 22px; font-weight: 400; }
.copy-14 { font-family: var(--font-sans); font-size: 14px; line-height: 22px; font-weight: 400; }
.copy-13 { font-family: var(--font-sans); font-size: 13px; line-height: 20px; font-weight: 400; }
/* Button */
.button-16 { font-family: var(--font-sans); font-size: 16px; line-height: 20px; font-weight: 500; }
.button-14 { font-family: var(--font-sans); font-size: 14px; line-height: 20px; font-weight: 500; }
.button-12 { font-family: var(--font-sans); font-size: 12px; line-height: 16px; font-weight: 500; }
/* Mono */
.label-mono-14 { font-family: var(--font-mono); font-size: 14px; line-height: 20px; font-weight: 400; }
.label-mono-13 { font-family: var(--font-mono); font-size: 13px; line-height: 16px; font-weight: 400; }
.label-mono-12 { font-family: var(--font-mono); font-size: 12px; line-height: 16px; font-weight: 400; }
.copy-mono-13 { font-family: var(--font-mono); font-size: 13px; line-height: 20px; font-weight: 400; }