/* Generated by design-system/scripts/build-tokens.mjs. Do not edit. */
@font-face {
  font-family: Geist;
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/geist-latin.woff2") format("woff2");
}
@font-face {
  font-family: Geist;
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/geist-latin-ext.woff2") format("woff2");
}
@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("../fonts/geist-mono-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("../fonts/geist-mono-latin-ext.woff2") format("woff2");
}

:root {
  --wg-paper: #eef5f9;
  --wg-blue: #009fe3;
  --wg-ink: #132636;
  --neutral-25: #fbfdfe;
  --neutral-50: #eef5f9;
  --neutral-100: #dfeaf1;
  --neutral-150: #cfdde7;
  --neutral-200: #bccddb;
  --neutral-300: #9db3c4;
  --neutral-400: #7d95a9;
  --neutral-500: #627a8f;
  --neutral-600: #4b6176;
  --neutral-700: #374c60;
  --neutral-800: #253749;
  --neutral-900: #132636;
  --neutral-950: #0a1722;
  --silver-25: #fcfdfc;
  --silver-50: #f7f8f7;
  --silver-100: #eceeed;
  --silver-150: #e2e4e3;
  --silver-200: #cfd3d1;
  --silver-300: #b5bab8;
  --silver-400: #959d99;
  --silver-500: #78827d;
  --silver-600: #5f6763;
  --silver-700: #49504c;
  --silver-800: #363a38;
  --silver-900: #202221;
  --silver-950: #141514;
  --blue-50: #eaf7fd;
  --blue-100: #d0eefa;
  --blue-200: #a3ddf5;
  --blue-300: #63c5ee;
  --blue-400: #22b0e9;
  --blue-500: #009fe3;
  --blue-600: #0078ad;
  --blue-700: #00618a;
  --blue-800: #004a6b;
  --blue-900: #003650;
  --blue-950: #001f30;
  --sage-50: #f4f9e6;
  --sage-100: #e6f2c4;
  --sage-200: #d0e58f;
  --sage-300: #b3d24f;
  --sage-400: #97bd1f;
  --sage-500: #7fa800;
  --sage-600: #5f8600;
  --sage-700: #4a6b00;
  --sage-800: #395300;
  --sage-900: #2a3d00;
  --sage-950: #182300;
  --ochre-50: #fff4e5;
  --ochre-100: #ffe4c2;
  --ochre-200: #ffcb85;
  --ochre-300: #ffab3d;
  --ochre-400: #f78d0f;
  --ochre-500: #dd7400;
  --ochre-600: #b85e00;
  --ochre-700: #934a00;
  --ochre-800: #713900;
  --ochre-900: #502900;
  --ochre-950: #2e1600;
  --brick-50: #fff0e8;
  --brick-100: #ffe0cf;
  --brick-200: #ffc5a6;
  --brick-300: #ff9f6f;
  --brick-400: #f97c3d;
  --brick-500: #e35d00;
  --brick-600: #c44500;
  --brick-700: #a53700;
  --brick-800: #802b00;
  --brick-900: #5b2100;
  --brick-950: #361404;
  --signal-50: #f0f0ff;
  --signal-100: #e2e2fd;
  --signal-200: #c8c8fa;
  --signal-300: #a5a5f3;
  --signal-400: #7c7ce6;
  --signal-500: #5b5bd6;
  --signal-600: #4b4bc0;
  --signal-700: #3d3d9c;
  --signal-800: #303079;
  --signal-900: #232358;
  --signal-950: #15153a;
  --app-background: var(--neutral-50);
  --background: #ffffff;
  --muted-background: var(--neutral-50);
  --foreground: var(--neutral-900);
  --muted-foreground: var(--neutral-600);
  --faint: var(--neutral-400);
  --primary: var(--neutral-900);
  --primary-hover: var(--neutral-700);
  --primary-active: var(--neutral-950);
  --on-primary: var(--neutral-50);
  --highlight: var(--blue-600);
  --highlight-hover: var(--blue-700);
  --highlight-active: var(--blue-800);
  --on-highlight: #ffffff;
  --highlight-subtle: var(--blue-50);
  --success: var(--sage-700);
  --success-subtle: var(--sage-100);
  --success-text: var(--sage-900);
  --info: var(--ochre-600);
  --info-subtle: var(--ochre-100);
  --info-text: var(--ochre-900);
  --warning: var(--brick-600);
  --warning-subtle: var(--brick-100);
  --warning-text: var(--brick-700);
  --connector: var(--signal-600);
  --on-connector: #ffffff;
  --border: var(--neutral-100);
  --border-strong: var(--neutral-150);
  --border-focus: var(--blue-400);
  --ring: var(--blue-200);
  --hover: var(--neutral-100);
  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --text-xs: 12px;
  --leading-xs: 16px;
  --tracking-xs: 0;
  --text-sm: 14px;
  --leading-sm: 20px;
  --tracking-sm: -0.28px;
  --text-base: 16px;
  --leading-base: 24px;
  --tracking-base: -0.32px;
  --text-lg: 18px;
  --leading-lg: 26px;
  --tracking-lg: -0.36px;
  --text-xl: 20px;
  --leading-xl: 28px;
  --tracking-xl: -0.4px;
  --text-2xl: 24px;
  --leading-2xl: 30px;
  --tracking-2xl: -0.96px;
  --text-3xl: 32px;
  --leading-3xl: 36px;
  --tracking-3xl: -1.28px;
  --text-4xl: 40px;
  --leading-4xl: 42px;
  --tracking-4xl: -2.4px;
  --text-5xl: 48px;
  --leading-5xl: 52px;
  --tracking-5xl: -2.88px;
  --text-6xl: 56px;
  --leading-6xl: 60px;
  --tracking-6xl: -3.36px;
  --text-7xl: 64px;
  --leading-7xl: 68px;
  --tracking-7xl: -3.84px;
  --text-8xl: 72px;
  --leading-8xl: 76px;
  --tracking-8xl: -4.32px;
  --text-9xl: 80px;
  --leading-9xl: 84px;
  --tracking-9xl: -4.8px;
  --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;
  --radius: 0;
  --h-field: 44px;
  --h-field-sm: 40px;
  --h-btn: 48px;
  --shadow: 0 2px 6px rgba(19, 38, 54, .10);
  --shadow-md: 0 4px 12px rgba(19, 38, 54, .12);
  --duration-fast: 150ms;
  --duration: 200ms;
  --duration-slow: 300ms;
  --ease-out: cubic-bezier(0.215, 0.61, 0.355, 1);
}

@media (prefers-color-scheme: dark) {
  :root[data-surface="product"] {
    --app-background: #06101a;
    --background: var(--neutral-950);
    --muted-background: var(--neutral-900);
    --foreground: var(--neutral-50);
    --muted-foreground: var(--neutral-300);
    --faint: var(--neutral-500);
    --primary: var(--neutral-50);
    --primary-hover: var(--neutral-150);
    --primary-active: #ffffff;
    --on-primary: var(--neutral-950);
    --highlight: var(--blue-600);
    --highlight-hover: var(--blue-700);
    --highlight-active: var(--blue-800);
    --on-highlight: #ffffff;
    --highlight-subtle: var(--blue-950);
    --success: var(--sage-400);
    --success-subtle: var(--sage-950);
    --success-text: var(--sage-100);
    --info: var(--ochre-400);
    --info-subtle: var(--ochre-950);
    --info-text: var(--ochre-100);
    --warning: var(--brick-400);
    --warning-subtle: var(--brick-950);
    --warning-text: var(--brick-100);
    --connector: var(--signal-400);
    --on-connector: var(--neutral-950);
    --border: var(--neutral-800);
    --border-strong: var(--neutral-700);
    --border-focus: var(--blue-400);
    --ring: var(--blue-800);
    --hover: var(--neutral-800);
  }
}

.theme-ink {
  --app-background: #06101a;
  --background: var(--neutral-950);
  --muted-background: var(--neutral-900);
  --foreground: var(--neutral-50);
  --muted-foreground: var(--neutral-300);
  --faint: var(--neutral-500);
  --primary: var(--neutral-50);
  --primary-hover: var(--neutral-150);
  --primary-active: #ffffff;
  --on-primary: var(--neutral-950);
  --highlight: var(--blue-600);
  --highlight-hover: var(--blue-700);
  --highlight-active: var(--blue-800);
  --on-highlight: #ffffff;
  --highlight-subtle: var(--blue-950);
  --success: var(--sage-400);
  --success-subtle: var(--sage-950);
  --success-text: var(--sage-100);
  --info: var(--ochre-400);
  --info-subtle: var(--ochre-950);
  --info-text: var(--ochre-100);
  --warning: var(--brick-400);
  --warning-subtle: var(--brick-950);
  --warning-text: var(--brick-100);
  --connector: var(--signal-400);
  --on-connector: var(--neutral-950);
  --border: var(--neutral-800);
  --border-strong: var(--neutral-700);
  --border-focus: var(--blue-400);
  --ring: var(--blue-800);
  --hover: var(--neutral-800);
}

::selection { background: var(--blue-200); color: var(--foreground); }

/* Framework-neutral WigNet primitives. Layout remains owned by each surface. */
.wg-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--foreground);
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 550;
  letter-spacing: -0.04em;
  text-decoration: none;
}
.wg-brand img { display: block; width: 30px; height: 18px; }
.wg-brand--product {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.wg-brand--product img { width: 27px; height: 16px; }

.wg-button {
  min-height: var(--h-btn);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 20px;
  border: 1px solid var(--primary);
  border-radius: 0;
  background: var(--primary);
  color: var(--on-primary);
  font: 550 14px/20px var(--font-sans);
  letter-spacing: -.28px;
  text-decoration: none;
  cursor: pointer;
  transition: color var(--duration) var(--ease-out), background var(--duration) var(--ease-out), border-color var(--duration) var(--ease-out);
}
.wg-button:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
.wg-button:active { background: var(--primary-active); border-color: var(--primary-active); }
.wg-button--highlight { background: var(--highlight); border-color: var(--highlight); color: var(--on-highlight); }
.wg-button--highlight:hover { background: var(--highlight-hover); border-color: var(--highlight-hover); }
.wg-button--highlight:active { background: var(--highlight-active); border-color: var(--highlight-active); }
.wg-button--outline { background: transparent; border-color: var(--border-strong); color: var(--foreground); }
.wg-button--outline:hover { background: var(--hover); border-color: var(--foreground); }
.wg-button--ghost { background: transparent; border-color: transparent; color: var(--muted-foreground); }
.wg-button--ghost:hover { background: var(--hover); color: var(--foreground); }
.wg-button--warning { background: transparent; border-color: var(--warning); color: var(--warning); }
.wg-button--warning:hover { background: var(--warning-subtle); }
.wg-button--small { min-height: var(--h-field-sm); padding: 0 14px; font-size: 12px; }
.wg-button:disabled, .wg-button[aria-disabled="true"] { opacity: .5; cursor: default; pointer-events: none; }

.wg-field {
  width: 100%;
  min-height: var(--h-field);
  padding: 0 12px;
  color: var(--foreground);
  background: var(--background);
  border: 1px solid var(--border-strong);
  border-radius: 0;
  font: 400 16px/24px var(--font-sans);
  letter-spacing: -.32px;
  transition: color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}
.wg-field:focus, .wg-field:focus-visible {
  outline: none;
  border-color: var(--border-focus);
  box-shadow: 0 0 0 2px var(--ring);
}
.wg-field:disabled, .wg-field[readonly] { background: var(--muted-background); color: var(--faint); }
.wg-field::placeholder { color: var(--faint); }
textarea.wg-field { min-height: 140px; padding: 12px; resize: vertical; }
.wg-field-label { display: block; margin: 0 0 7px; font: 550 14px/20px var(--font-sans); letter-spacing: -.28px; }
.wg-field-hint { margin: 8px 0 0; color: var(--muted-foreground); font: 400 13px/20px var(--font-sans); }
.wg-field-error { margin: 8px 0 0; color: var(--warning); font: 400 13px/20px var(--font-sans); }

/* Tabs: switch between panels of one screen, never between pages (that is
   navigation, a link). Mono micro-labels; the current tab takes full ink and
   a 2px underline that sits on the bar's own 1px rule. Scrolls sideways
   rather than wrapping when the labels outgrow a phone. */
.wg-tabs {
  display: flex;
  overflow-x: auto;
  scrollbar-width: none;
  background: var(--background);
  border-bottom: 1px solid var(--border);
}
.wg-tabs::-webkit-scrollbar { display: none; }
.wg-tab {
  /* Equal shares from a zero basis, so tabs line up with any 1fr grid above
     them whatever their label length; a flex item's min-width is still its
     label, so a crowded bar overflows (and scrolls) instead of squashing. */
  flex: 1 1 0;
  min-height: 44px;
  padding: 0 16px;
  margin-bottom: -1px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--muted-foreground);
  font: 400 11px/16px var(--font-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
}
.wg-tab:hover { color: var(--foreground); background: var(--hover); }
.wg-tab[aria-selected="true"] { color: var(--foreground); border-bottom-color: var(--foreground); }
.wg-tab:disabled, .wg-tab[aria-disabled="true"] { color: var(--faint); background: transparent; cursor: default; }
.wg-tabs--start .wg-tab { flex: 0 0 auto; }

.wg-card { padding: 24px; background: var(--background); border: 1px solid var(--border); border-radius: 0; }
.wg-chip {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 2px 8px;
  border: 1px solid transparent;
  border-radius: 0;
  font: 400 11px/16px var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.wg-chip--neutral { color: var(--foreground); background: var(--muted-background); border-color: var(--border); }
.wg-chip--highlight { color: var(--highlight-active); background: var(--highlight-subtle); }
.wg-chip--success { color: var(--success-text); background: var(--success-subtle); }
.wg-chip--info { color: var(--info-text); background: var(--info-subtle); }
.wg-chip--warning { color: var(--warning-text); background: var(--warning-subtle); }
.wg-status-mark { width: 6px; height: 6px; display: inline-block; flex: none; background: currentColor; }
.wg-spinner { width: 28px; height: 28px; border: 2px solid var(--border); border-top-color: var(--foreground); border-radius: 50%; animation: wg-spin .8s linear infinite; }
@keyframes wg-spin { to { transform: rotate(360deg); } }

:where(.wg-button, .wg-field, .wg-tab, .wg-focusable):focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--ring);
}

/* The tab bar scrolls, which would clip an outer ring: draw it inside. */
.wg-tab:focus-visible { box-shadow: inset 0 0 0 2px var(--ring); }

@media (prefers-reduced-motion: reduce) {
  .wg-button, .wg-field, .wg-tab { transition: none; }
  .wg-spinner { animation-duration: 1.6s; }
}