/* Generated from design/tokens.json by design/build.mjs. Do not edit by hand. CSS */
@font-face {
  font-family: "IBM Plex Sans";
  src: url("/assets/ibm-plex-sans-3-201.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0100-0101, U+0112-0113, U+012A-012B, U+014C-014D, U+016A-016B, U+0131, U+0152-0153, U+0160-0161, U+0178, U+017D-017E, U+0192, U+02C6, U+02DA, U+02DC, U+0304, U+2002-200B, U+2010-2015, U+2018-201E, U+2020-2022, U+2026, U+2030, U+2032-2033, U+2039-203A, U+2044, U+20AC, U+2122, U+2190-2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Plex Fallback";
  src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("Helvetica");
  font-weight: 400 500;
  size-adjust: 100.41%;
  ascent-override: 102.09%;
  descent-override: 27.39%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Plex Fallback";
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("Helvetica Bold");
  font-weight: 600 700;
  size-adjust: 97.50%;
  ascent-override: 105.13%;
  descent-override: 28.20%;
  line-gap-override: 0%;
}

:root {
  --bg: #FFFFFF;
  --bg-soft: #F3F3F7;
  --bg-off: #F7F7FA;
  --card: #FFFFFF;
  --ink: #15191E;
  --body: #4B525C;
  --muted: #6E7681;
  --faint: #A3A9B2;
  --line: #E3E5EA;
  --accent: #4B3DF5;
  --accent-hover: #3A2ED0;
  --accent-text: #3A2ED0;
  --accent-mid: #7C71FF;
  --accent-light: #BDB6FF;
  --accent-tint: #EFEDFF;
  --on-accent: #FFFFFF;
  --dark-surface: #070B1A;
  --on-dark: #FFFFFF;
  --on-dark-muted: rgba(255,255,255,.7);
  --line-on-dark: rgba(255,255,255,.12);
  --present: #4B3DF5;
  --warn-bg: #FFF8E6;
  --warn-line: #E8D9A8;
  --warn-text: #8A5A00;
  --danger: #C8321F;
  --danger-hover: #A3271A;
  --on-danger: #FFFFFF;

  --font-display: "IBM Plex Sans", "Plex Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-text: "IBM Plex Sans", "Plex Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-system: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --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-20: 80px;
  --space-26: 104px;

  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  --shadow-1: 0 1px 2px rgba(21,25,30,.05);
  --shadow-2: 0 8px 24px rgba(7,11,26,.08);
  --shadow-3: 0 24px 60px rgba(7,11,26,.14);

  --wrap: 1240px;
  --wrap-email: 680px;
  --gutter: clamp(16px, 4vw, 40px);
  --measure: 60ch;

  --motion-fast: 120ms;
  --motion-base: 180ms;
  --motion-slow: 320ms;
  --motion-ease: cubic-bezier(.2,.7,.2,1);
  --motion-float: 7s ease-in-out infinite;
  --motion-march: 1.4s linear infinite;

  color-scheme: light dark;
}

/* Breakpoints (media queries cannot read variables; keep system.css in step): phone 420px, tablet 720px, laptop 960px, desktop 1100px */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0F1218;
    --bg-soft: #151A22;
    --bg-off: #12161D;
    --card: #1A1F28;
    --ink: #E8EAED;
    --body: #B8BEC7;
    --muted: #9AA3AD;
    --faint: #6B7480;
    --line: #2B3038;
    --accent: #9D95FF;
    --accent-hover: #BDB6FF;
    --accent-text: #BDB6FF;
    --accent-mid: #7C71FF;
    --accent-light: #3A2ED0;
    --accent-tint: #1E1C3A;
    --on-accent: #070B1A;
    --dark-surface: #05070F;
    --on-dark: #FFFFFF;
    --on-dark-muted: rgba(255,255,255,.7);
    --line-on-dark: rgba(255,255,255,.12);
    --present: #9D95FF;
    --warn-bg: #2A2418;
    --warn-line: #4A3F22;
    --warn-text: #E2B65B;
    --danger: #E5604E;
    --danger-hover: #F08374;
    --on-danger: #070B1A;
  }
}
:root[data-theme="dark"] {
  --bg: #0F1218;
  --bg-soft: #151A22;
  --bg-off: #12161D;
  --card: #1A1F28;
  --ink: #E8EAED;
  --body: #B8BEC7;
  --muted: #9AA3AD;
  --faint: #6B7480;
  --line: #2B3038;
  --accent: #9D95FF;
  --accent-hover: #BDB6FF;
  --accent-text: #BDB6FF;
  --accent-mid: #7C71FF;
  --accent-light: #3A2ED0;
  --accent-tint: #1E1C3A;
  --on-accent: #070B1A;
  --dark-surface: #05070F;
  --on-dark: #FFFFFF;
  --on-dark-muted: rgba(255,255,255,.7);
  --line-on-dark: rgba(255,255,255,.12);
  --present: #9D95FF;
  --warn-bg: #2A2418;
  --warn-line: #4A3F22;
  --warn-text: #E2B65B;
  --danger: #E5604E;
  --danger-hover: #F08374;
  --on-danger: #070B1A;
}

/* Type styles, one class per role. */
.t-display-1 { font-family: var(--font-display); font-size: clamp(38px, 5.2vw, 76px); line-height: 1.04; letter-spacing: -0.015em; font-weight: 500; }
.t-display-2 { font-family: var(--font-display); font-size: clamp(30px, 3.8vw, 54px); line-height: 1.08; letter-spacing: -0.012em; font-weight: 500; }
.t-title { font-family: var(--font-text); font-size: 24px; line-height: 1.2; letter-spacing: 0; font-weight: 600; }
.t-heading { font-family: var(--font-text); font-size: 18px; line-height: 1.3; letter-spacing: 0; font-weight: 600; }
.t-lede { font-family: var(--font-text); font-size: clamp(17px, 1.3vw, 20px); line-height: 1.5; letter-spacing: 0; font-weight: 400; }
.t-body { font-family: var(--font-text); font-size: 17px; line-height: 1.55; letter-spacing: 0; font-weight: 400; }
.t-small { font-family: var(--font-text); font-size: 15px; line-height: 1.5; letter-spacing: 0; font-weight: 400; }
.t-caption { font-family: var(--font-text); font-size: 14px; line-height: 1.45; letter-spacing: 0; font-weight: 400; }
.t-label { font-family: var(--font-text); font-size: 13px; line-height: 1.3; letter-spacing: 0.06em; font-weight: 600; text-transform: uppercase; }
.t-stat { font-family: var(--font-display); font-size: clamp(38px, 4vw, 56px); line-height: 1; letter-spacing: -0.015em; font-weight: 500; }