/*
 * AUTO-GENERATED from .claude/stitch/design-system.yaml.
 * DO NOT EDIT BY HAND. Edit design-system.yaml and run:
 *   bun run scripts/stitch-tokens-to-css.ts
 *
 * Design system: Voyager Midnight
 * Mode: dark
 */

@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@600;700&family=Inter:wght@400;500;600&family=Space+Grotesk:wght@500;600&family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap");

:root {
  /* Colors */
  --color-background: #020617;
  --color-surface: #020617;
  --color-surface-dim: #020617;
  --color-surface-bright: #475569;
  --color-surface-container-lowest: #020617;
  --color-surface-container-low: #0f172a;
  --color-surface-container: #1e293b;
  --color-surface-container-high: #334155;
  --color-surface-container-highest: #475569;
  --color-surface-variant: #334155;
  --color-on-background: #e3e1ef;
  --color-on-surface: #e3e1ef;
  --color-on-surface-variant: #c3c5d7;
  --color-inverse-surface: #e3e1ef;
  --color-inverse-on-surface: #2f303a;
  --color-primary: #2563eb;
  --color-primary-container: #1e40af;
  --color-primary-fixed: #dbeafe;
  --color-primary-fixed-dim: #3b82f6;
  --color-on-primary: #ffffff;
  --color-on-primary-container: #dbeafe;
  --color-on-primary-fixed: #1e3a8a;
  --color-on-primary-fixed-variant: #1d4ed8;
  --color-inverse-primary: #1d4ed8;
  --color-surface-tint: #2563eb;
  --color-secondary: #a6e6ff;
  --color-secondary-container: #14d1ff;
  --color-secondary-fixed: #b7eaff;
  --color-secondary-fixed-dim: #4cd6ff;
  --color-on-secondary: #003543;
  --color-on-secondary-container: #00566b;
  --color-on-secondary-fixed: #001f28;
  --color-on-secondary-fixed-variant: #004e60;
  --color-tertiary: #7c3aed;
  --color-tertiary-container: #5b21b6;
  --color-tertiary-fixed: #ede9fe;
  --color-tertiary-fixed-dim: #a855f7;
  --color-on-tertiary: #ffffff;
  --color-on-tertiary-container: #ede9fe;
  --color-on-tertiary-fixed: #3b0764;
  --color-on-tertiary-fixed-variant: #5b21b6;
  --color-outline: #94a3b8;
  --color-outline-variant: rgba(255,255,255,0.10);
  --color-error: #dc2626;
  --color-error-container: #991b1b;
  --color-on-error: #ffffff;
  --color-on-error-container: #fee2e2;
  --color-success: #16a34a;
  --color-success-container: #15803d;
  --color-on-success: #ffffff;
  --color-on-success-container: #dcfce7;
  --color-warning: #ea580c;
  --color-warning-container: #9a3412;
  --color-on-warning: #ffffff;
  --color-on-warning-container: #ffedd5;
  --color-scrim: #000000;

  /* Relationship-target palette — muted derivatives of the semantic colors.
     Used wherever a comms/network UI signals a target band (INFLUENCE /
     MANAGE / MAINTAIN / DETACH) or drift severity. Raw --color-* tokens
     stay reserved for brand chrome / status feedback; the --tgt-* family
     is purpose-built so a future palette tweak doesn't bleed into either.
     Source: .claude/specs/comms-network-foundations/requirements.md FR-16.
     Parent: pwa/docs/comms-network-spec.md §8. */
  --tgt-influence: color-mix(in oklab, var(--color-primary) 62%, oklch(0.65 0 0));
  --tgt-manage:    color-mix(in oklab, var(--color-warning) 55%, oklch(0.65 0 0));
  --tgt-maintain:  color-mix(in oklab, var(--color-success) 55%, oklch(0.65 0 0));
  --tgt-detach:    color-mix(in oklab, var(--color-error)   60%, oklch(0.65 0 0));

  --color-hero-a: #1a2744;
  --color-hero-b: #0d1b2a;
  --color-hero-c: #162240;

  /* Spacing — 8px rhythm */
  --space-xs: 4px;
  --space-base: 8px;
  --space-sm: 12px;
  --space-gutter: 16px;
  --space-md: 24px;
  --space-margin: 24px;
  --space-lg: 40px;
  --space-xl: 64px;
  --space-hairline: 2px;
  --space-tight: 6px;
  --space-snug: 10px;
  --space-roomy: 14px;
  --space-wide: 20px;

  /* Roundness */
  --radius-sm: 0.25rem;
  --radius-default: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-full: 9999px;
  --radius-tight: 0.375rem;
  --radius-snug: 0.625rem;
  --radius-roomy: 0.875rem;
  --radius-wide: 1.25rem;
  --radius-pill: 999px;

  /* Typography — six named scales */
  --type-headline-lg-family: "Manrope", system-ui, sans-serif;
  --type-headline-lg-size: 32px;
  --type-headline-lg-weight: 700;
  --type-headline-lg-line-height: 1.2;
  --type-headline-lg-letter-spacing: -0.02em;
  --type-headline-md-family: "Manrope", system-ui, sans-serif;
  --type-headline-md-size: 24px;
  --type-headline-md-weight: 600;
  --type-headline-md-line-height: 1.3;
  --type-headline-md-letter-spacing: -0.01em;
  --type-body-lg-family: "Inter", system-ui, sans-serif;
  --type-body-lg-size: 16px;
  --type-body-lg-weight: 400;
  --type-body-lg-line-height: 1.5;
  --type-body-lg-letter-spacing: 0;
  --type-body-md-family: "Inter", system-ui, sans-serif;
  --type-body-md-size: 14px;
  --type-body-md-weight: 400;
  --type-body-md-line-height: 1.5;
  --type-body-md-letter-spacing: 0;
  --type-label-caps-family: "Space Grotesk", system-ui, sans-serif;
  --type-label-caps-size: 12px;
  --type-label-caps-weight: 600;
  --type-label-caps-line-height: 1;
  --type-label-caps-letter-spacing: 0.1em;
  --type-label-caps-transform: uppercase;
  --type-data-point-family: "Space Grotesk", system-ui, sans-serif;
  --type-data-point-size: 13px;
  --type-data-point-weight: 500;
  --type-data-point-line-height: 1.2;
  --type-data-point-letter-spacing: 0;
  --type-title-md-family: "Manrope", system-ui, sans-serif;
  --type-title-md-size: 20px;
  --type-title-md-weight: 600;
  --type-title-md-line-height: 1.3;
  --type-title-md-letter-spacing: -0.01em;
  --type-title-sm-family: "Manrope", system-ui, sans-serif;
  --type-title-sm-size: 18px;
  --type-title-sm-weight: 600;
  --type-title-sm-line-height: 1.3;
  --type-title-sm-letter-spacing: 0;
  --type-label-sm-family: "Inter", system-ui, sans-serif;
  --type-label-sm-size: 11px;
  --type-label-sm-weight: 500;
  --type-label-sm-line-height: 1.3;
  --type-label-sm-letter-spacing: 0.02em;

  /* Fonts — direct family handles for Tailwind / utility use */
  --font-headline: "Manrope", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-label: "Space Grotesk", system-ui, sans-serif;
  --font-icon: "Material Symbols Outlined";
}

/*
 * Legacy aliases — DEPRECATED. Bridge for pre-Voyager components.
 * Drop a row in design-system.yaml when the last consumer migrates.
 */
:root {
  --bg: var(--color-surface);
  --bg2: var(--color-surface-container);
  --text: var(--color-on-surface);
  --hint: var(--color-on-surface-variant);
  --link: var(--color-primary-container);
  --btn: var(--color-primary-container);
  --btn-text: var(--color-on-primary);
  --err: var(--color-error);
  --bg-secondary: var(--color-surface-container);
  --card-bg: var(--color-surface-container);
  --text-secondary: var(--color-on-surface-variant);
  --accent: var(--color-primary);
  --border: var(--color-outline-variant);
  --input-bg: var(--color-surface-container);
}

/* Utility classes for the named type scales */
.text-headline-lg {
  font-family: var(--type-headline-lg-family);
  font-size: var(--type-headline-lg-size);
  font-weight: var(--type-headline-lg-weight);
  line-height: var(--type-headline-lg-line-height);
  letter-spacing: var(--type-headline-lg-letter-spacing);
}
.text-headline-md {
  font-family: var(--type-headline-md-family);
  font-size: var(--type-headline-md-size);
  font-weight: var(--type-headline-md-weight);
  line-height: var(--type-headline-md-line-height);
  letter-spacing: var(--type-headline-md-letter-spacing);
}
.text-body-lg {
  font-family: var(--type-body-lg-family);
  font-size: var(--type-body-lg-size);
  font-weight: var(--type-body-lg-weight);
  line-height: var(--type-body-lg-line-height);
  letter-spacing: var(--type-body-lg-letter-spacing);
}
.text-body-md {
  font-family: var(--type-body-md-family);
  font-size: var(--type-body-md-size);
  font-weight: var(--type-body-md-weight);
  line-height: var(--type-body-md-line-height);
  letter-spacing: var(--type-body-md-letter-spacing);
}
.text-label-caps {
  font-family: var(--type-label-caps-family);
  font-size: var(--type-label-caps-size);
  font-weight: var(--type-label-caps-weight);
  line-height: var(--type-label-caps-line-height);
  letter-spacing: var(--type-label-caps-letter-spacing);
  text-transform: var(--type-label-caps-transform);
}
.text-data-point {
  font-family: var(--type-data-point-family);
  font-size: var(--type-data-point-size);
  font-weight: var(--type-data-point-weight);
  line-height: var(--type-data-point-line-height);
  letter-spacing: var(--type-data-point-letter-spacing);
}
.text-title-md {
  font-family: var(--type-title-md-family);
  font-size: var(--type-title-md-size);
  font-weight: var(--type-title-md-weight);
  line-height: var(--type-title-md-line-height);
  letter-spacing: var(--type-title-md-letter-spacing);
}
.text-title-sm {
  font-family: var(--type-title-sm-family);
  font-size: var(--type-title-sm-size);
  font-weight: var(--type-title-sm-weight);
  line-height: var(--type-title-sm-line-height);
  letter-spacing: var(--type-title-sm-letter-spacing);
}
.text-label-sm {
  font-family: var(--type-label-sm-family);
  font-size: var(--type-label-sm-size);
  font-weight: var(--type-label-sm-weight);
  line-height: var(--type-label-sm-line-height);
  letter-spacing: var(--type-label-sm-letter-spacing);
}