:root {
  --flowtly-color-primary: #3F319A;
  --flowtly-color-primary-hover: #362A82;
  --flowtly-color-primary-active: #2E2470;
  --flowtly-color-primary-disabled: #C9C6E0;
  --flowtly-color-on-primary: #FFFFFF;
  --flowtly-color-accent: #6366F1;
  --flowtly-color-accent-soft: #8B7CF0;
  --flowtly-color-ai: #ed6c02;
  --flowtly-color-ai-bg: rgba(255, 106, 61, 0.06);
  --flowtly-color-ai-border: rgba(255, 106, 61, 0.35);
  --flowtly-color-assistant-accent: #2DD4BF;
  --flowtly-color-success: #316F60;
  --flowtly-color-success-bg: #F2F7F5;
  --flowtly-color-warning: #DE7022;
  --flowtly-color-warning-text: #9C4D10;
  --flowtly-color-warning-bg: #F9E6CC;
  --flowtly-color-error: #B61F1F;
  --flowtly-color-error-bg: #FEE2E2;
  --flowtly-color-error-border: #F2CACA;
  --flowtly-color-info: #3B97FA;
  --flowtly-color-info-text: #175FA8;
  --flowtly-color-info-bg: #E8F2FE;
  --flowtly-color-nav-active: #EEF0FC;
  --flowtly-color-nav-hover: #F2EFFA;
  --flowtly-color-indigo-bright: #473AA6;
  --flowtly-color-indigo-deep: #211A5E;
  --flowtly-color-indigo-deepest: #161141;
  --flowtly-color-wordmark-ink: #171413;
  --flowtly-color-wordmark-period: #3F319A;
  --flowtly-font-body: Inter, system-ui, sans-serif;
  --flowtly-font-display: 'IBM Plex Sans', system-ui, sans-serif;
  --flowtly-font-serif: 'IBM Plex Serif', Georgia, serif;
  --flowtly-font-mono: 'IBM Plex Mono', ui-monospace, monospace;
  --flowtly-font-weight-regular: 400;
  --flowtly-font-weight-medium: 500;
  --flowtly-font-weight-semibold: 600;
  --flowtly-font-weight-bold: 700;
  --flowtly-font-weight-extrabold: 800;
  --flowtly-type-display-size: 54px;
  --flowtly-type-display-line: 1.03;
  --flowtly-type-display-weight: 800;
  --flowtly-type-display-family: display;
  --flowtly-type-h1-size: 32px;
  --flowtly-type-h1-line: 1.15;
  --flowtly-type-h1-weight: 800;
  --flowtly-type-h1-family: body;
  --flowtly-type-h2-size: 24px;
  --flowtly-type-h2-line: 1.2;
  --flowtly-type-h2-weight: 700;
  --flowtly-type-h2-family: body;
  --flowtly-type-h3-size: 18px;
  --flowtly-type-h3-line: 1.25;
  --flowtly-type-h3-weight: 700;
  --flowtly-type-h3-family: body;
  --flowtly-type-body-size: 16px;
  --flowtly-type-body-line: 1.6;
  --flowtly-type-body-weight: 400;
  --flowtly-type-body-family: body;
  --flowtly-type-small-size: 14px;
  --flowtly-type-small-line: 1.5;
  --flowtly-type-small-weight: 400;
  --flowtly-type-small-family: body;
  --flowtly-type-eyebrow-size: 12px;
  --flowtly-type-eyebrow-line: 1.2;
  --flowtly-type-eyebrow-weight: 700;
  --flowtly-type-eyebrow-family: body;
  --flowtly-type-eyebrow-tracking: 0.14em;
  --flowtly-type-eyebrow-transform: uppercase;
  --flowtly-type-mono-label-size: 12px;
  --flowtly-type-mono-label-line: 1.2;
  --flowtly-type-mono-label-weight: 500;
  --flowtly-type-mono-label-family: mono;
  --flowtly-type-mono-label-tracking: 0.1em;
  --flowtly-space-xs: 4px;
  --flowtly-space-sm: 8px;
  --flowtly-space-md: 16px;
  --flowtly-space-lg: 24px;
  --flowtly-space-xl: 40px;
  --flowtly-space-xxl: 64px;
  --flowtly-radius-input: 9px;
  --flowtly-radius-card: 12px;
  --flowtly-radius-pill: 9999px;
  --flowtly-radius-icon: 22%;
  --flowtly-shadow-card: 0 1px 2px rgba(24,24,28,0.10);
  --flowtly-shadow-menu: 0 3px 10px rgba(24,24,28,0.13);
  --flowtly-shadow-modal: 0 10px 30px rgba(24,24,28,0.18);
  --flowtly-shadow-marker: 0 0 0 3px var(--flowtly-canvas), 0 0 0 4px var(--flowtly-border);
  --flowtly-motion-fast: 120ms;
  --flowtly-motion-base: 200ms;
  --flowtly-motion-slow: 320ms;
  --flowtly-motion-ease: cubic-bezier(0.4,0,0.2,1);
  --flowtly-focus-ring: 0 0 0 3px rgba(63,49,154,0.30);
  --flowtly-chart-s1: #5546C8;
  --flowtly-chart-s2: #2DBBA6;
  --flowtly-chart-s3: #E0872E;
  --flowtly-chart-s4: #3B82D9;
  --flowtly-chart-s5: #D9568B;
  --flowtly-chart-s6: #C99B24;
  --flowtly-breakpoint-sm: 480px;
  --flowtly-breakpoint-md: 768px;
  --flowtly-breakpoint-lg: 1024px;
  --flowtly-breakpoint-xl: 1280px;
  --flowtly-breakpoint-xxl: 1536px;
  --flowtly-breakpoint-container: 1280px;
  --flowtly-icon-kit: lucide;
  --flowtly-canvas: #FFFFFF;
  --flowtly-page: #F7F7FA;
  --flowtly-sidebar: #FFFFFF;
  --flowtly-raised: #FFFFFF;
  --flowtly-hero-tint: #ECEBF6;
  --flowtly-section: #F5F4FB;
  --flowtly-text-primary: #18181C;
  --flowtly-text-secondary: #5D6470;
  --flowtly-text-muted: #6C7178;
  --flowtly-border: #ECECF1;
  --flowtly-field-border: #E2E2EA;
  --flowtly-switch-track: #D4D4DE;
  --flowtly-surface-subtle: #FBFBFD;
  --flowtly-text-prose: #2C2C33;
  --flowtly-text-placeholder: #888E9B;
  --flowtly-interactive: #3F319A;
  --flowtly-interactive-hover: #362A82;
}
[data-theme="dark"] {
  --flowtly-canvas: #1B1640;
  --flowtly-page: #161141;
  --flowtly-sidebar: #211A5E;
  --flowtly-raised: #241E52;
  --flowtly-hero-tint: #211A5E;
  --flowtly-section: #1B1640;
  --flowtly-text-primary: #FFFFFF;
  --flowtly-text-secondary: #B7B2DD;
  --flowtly-text-muted: #8E89B8;
  --flowtly-border: rgba(255,255,255,0.12);
  --flowtly-field-border: rgba(255,255,255,0.20);
  --flowtly-switch-track: rgba(255,255,255,0.26);
  --flowtly-surface-subtle: #1F1948;
  --flowtly-text-prose: #EDEAF8;
  --flowtly-text-placeholder: #6E6996;
  --flowtly-interactive: #6E5DE8;
  --flowtly-interactive-hover: #8B7CF0;
  --flowtly-color-nav-hover: rgba(255,255,255,0.06);
  --flowtly-color-nav-active: rgba(255,255,255,0.10);
}


/* Reference alias layer for the status page.
   Copied, name for name, from `flowtly-design/reference/tokens.css` — the same
   layer the accepted archetype is drawn against — and reduced to the aliases this
   page actually uses.

   EVERY ONE RESOLVES TO A GENERATED --flowtly-* TOKEN. Nothing here is a value.
   scripts/build-status.mjs prepends the generated token file from the pinned
   @flowtly-psa/design-tokens package, so the resolved colours are the design
   system's current ones and cannot drift the way a vendored copy does. */
:root {
  --canvas: var(--flowtly-canvas);
  --error: var(--flowtly-color-error);
  --errorBg: var(--flowtly-color-error-bg);
  --field-border: var(--flowtly-field-border);
  --hairline: var(--flowtly-border);
  --ink: var(--flowtly-text-primary);
  --ink2: var(--flowtly-text-secondary);
  --muted: var(--flowtly-text-muted);
  --on-primary: var(--flowtly-color-on-primary);
  --page: var(--flowtly-page);
  --section: var(--flowtly-section);
  --success: var(--flowtly-color-success);
  --successBg: var(--flowtly-color-success-bg);
  --warning: var(--flowtly-color-warning);
  --warning-text: var(--flowtly-color-warning-text);
  --warningBg: var(--flowtly-color-warning-bg);
  --wordmarkInk: var(--flowtly-color-wordmark-ink);
  --wordmarkPeriod: var(--flowtly-color-wordmark-period);
}