/* Generated by tools/gen_design_tokens.py from frontend/tokens/tokens.json. Do not edit; edit the token file and regenerate. */
:root {
  --cnx-color-accent-default: #2f4fc4;
  --cnx-color-accent-hover: #2744ae;
  --cnx-color-accent-on: #ffffff;
  --cnx-color-accent-text: #2744ae;
  --cnx-color-bg-canvas: #f4f5f7;
  --cnx-color-bg-subtle: #eceef2;
  --cnx-color-bg-surface: #ffffff;
  --cnx-color-border-default: #dce0e6;
  --cnx-color-border-strong: #666c79;
  --cnx-color-status-danger: #c0322b;
  --cnx-color-status-info: #3569a8;
  --cnx-color-status-success: #1e7a4c;
  --cnx-color-status-warning: #9d5d00;
  --cnx-color-status-surface-danger: #fbeaea;
  --cnx-color-status-surface-info: #e6eef8;
  --cnx-color-status-surface-success: #e5f3eb;
  --cnx-color-status-surface-warning: #fbf1de;
  --cnx-color-tag-violet: #6a3d9a;
  --cnx-color-tag-surface-violet: #f2ebfa;
  --cnx-color-text-default: #12151b;
  --cnx-color-text-inverse: #f4f5f7;
  --cnx-color-text-muted: #4b5261;
  --cnx-color-text-subtle: #666c79;
  --cnx-font-family-mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  --cnx-font-family-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --cnx-font-line-height-body: 1.54;
  --cnx-font-line-height-tight: 1.2;
  --cnx-font-size-2xl: 1.75rem;
  --cnx-font-size-lg: 0.9375rem;
  --cnx-font-size-md: 0.8125rem;
  --cnx-font-size-sm: 0.75rem;
  --cnx-font-size-xl: 1.25rem;
  --cnx-font-size-xs: 0.65625rem;
  --cnx-font-tracking-display: -0.02em;
  --cnx-font-tracking-label: 0.06em;
  --cnx-font-weight-bold: 700;
  --cnx-font-weight-medium: 500;
  --cnx-font-weight-regular: 400;
  --cnx-font-weight-semibold: 600;
  --cnx-motion-duration-fast: 120ms;
  --cnx-motion-duration-normal: 200ms;
  --cnx-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --cnx-nav-icon-size: 1.1875rem;
  --cnx-nav-icon-stroke: 1.6;
  --cnx-nav-item-radius: 12px;
  --cnx-nav-item-size: 2.625rem;
  --cnx-nav-rail-width: 17rem;
  --cnx-radius-full: 9999px;
  --cnx-radius-lg: 6px;
  --cnx-radius-md: 4px;
  --cnx-radius-sm: 3px;
  --cnx-shadow-md: 0 4px 12px 0 #00000026;
  --cnx-shadow-sm: 0 1px 2px 0 #0000001a;
  --cnx-size-content-max: 80rem;
  --cnx-size-control-height: 1.875rem;
  --cnx-size-icon: 1rem;
  --cnx-space-0: 0;
  --cnx-space-0-5: 0.125rem;
  --cnx-space-1: 0.25rem;
  --cnx-space-12: 3rem;
  --cnx-space-2: 0.5rem;
  --cnx-space-3: 0.75rem;
  --cnx-space-4: 1rem;
  --cnx-space-6: 1.5rem;
  --cnx-space-8: 2rem;
  --cnx-z-dropdown: 1000;
  --cnx-z-modal: 1300;
  --cnx-z-sticky: 1100;
  --cnx-z-toast: 1400;
}

:root[data-theme="dark"] {
  --cnx-color-accent-default: #7b93f5;
  --cnx-color-accent-hover: #9db0ff;
  --cnx-color-accent-on: #0b1030;
  --cnx-color-accent-text: #9db0ff;
  --cnx-color-bg-canvas: #0f1115;
  --cnx-color-bg-subtle: #1e222b;
  --cnx-color-bg-surface: #161920;
  --cnx-color-border-default: #2b303b;
  --cnx-color-border-strong: #818996;
  --cnx-color-status-danger: #f2706a;
  --cnx-color-status-info: #86b3e8;
  --cnx-color-status-success: #58c48d;
  --cnx-color-status-warning: #e9a94a;
  --cnx-color-status-surface-danger: #3a1716;
  --cnx-color-status-surface-info: #14263b;
  --cnx-color-status-surface-success: #12301f;
  --cnx-color-status-surface-warning: #33260d;
  --cnx-color-tag-violet: #cfaef0;
  --cnx-color-tag-surface-violet: #2a1d3f;
  --cnx-color-text-default: #e7eaf0;
  --cnx-color-text-inverse: #0f1115;
  --cnx-color-text-muted: #a7aebb;
  --cnx-color-text-subtle: #818996;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --cnx-color-accent-default: #7b93f5;
    --cnx-color-accent-hover: #9db0ff;
    --cnx-color-accent-on: #0b1030;
    --cnx-color-accent-text: #9db0ff;
    --cnx-color-bg-canvas: #0f1115;
    --cnx-color-bg-subtle: #1e222b;
    --cnx-color-bg-surface: #161920;
    --cnx-color-border-default: #2b303b;
    --cnx-color-border-strong: #818996;
    --cnx-color-status-danger: #f2706a;
    --cnx-color-status-info: #86b3e8;
    --cnx-color-status-success: #58c48d;
    --cnx-color-status-warning: #e9a94a;
    --cnx-color-status-surface-danger: #3a1716;
    --cnx-color-status-surface-info: #14263b;
    --cnx-color-status-surface-success: #12301f;
    --cnx-color-status-surface-warning: #33260d;
    --cnx-color-tag-violet: #cfaef0;
    --cnx-color-tag-surface-violet: #2a1d3f;
    --cnx-color-text-default: #e7eaf0;
    --cnx-color-text-inverse: #0f1115;
    --cnx-color-text-muted: #a7aebb;
    --cnx-color-text-subtle: #818996;
  }
}

/* legacy-aliases: the pre-token style.css names, resolved through the tokens above so they follow the mode. New code uses --cnx-*. */
:root {
  --accent: var(--cnx-color-accent-default);
  --accent-link: var(--cnx-color-accent-text);
  --accent-soft: var(--cnx-color-accent-default);
  --bg-body: var(--cnx-color-bg-canvas);
  --bg-card: var(--cnx-color-bg-surface);
  --bg-card-alt: var(--cnx-color-bg-subtle);
  --bg-hover: var(--cnx-color-bg-subtle);
  --bg-hover-lit: var(--cnx-color-border-default);
  --bg-input: var(--cnx-color-bg-canvas);
  --bg-panel: var(--cnx-color-bg-surface);
  --border: var(--cnx-color-border-default);
  --border-input: var(--cnx-color-border-strong);
  --border-subtle: var(--cnx-color-border-default);
  --brand-accent: var(--cnx-color-accent-text);
  --brand-bg: var(--cnx-color-bg-surface);
  --brand-dark: var(--cnx-color-bg-surface);
  --brand-primary: var(--cnx-color-accent-default);
  --card: var(--cnx-color-bg-surface);
  --content-max: var(--cnx-size-content-max);
  --danger: var(--cnx-color-status-danger);
  --danger-fg: var(--cnx-color-status-danger);
  --font-mono: var(--cnx-font-family-mono);
  --fs-2xs: var(--cnx-font-size-sm);
  --fs-base: var(--cnx-font-size-lg);
  --fs-lg: var(--cnx-font-size-xl);
  --fs-md: var(--cnx-font-size-md);
  --fs-sm: var(--cnx-font-size-md);
  --fs-xl: var(--cnx-font-size-xl);
  --fs-xs: var(--cnx-font-size-sm);
  --gap-2xl: var(--cnx-space-8);
  --gap-lg: var(--cnx-space-4);
  --gap-md: var(--cnx-space-3);
  --gap-sm: var(--cnx-space-2);
  --gap-xl: var(--cnx-space-6);
  --gap-xs: var(--cnx-space-1);
  --info: var(--cnx-color-status-info);
  --info-fg: var(--cnx-color-status-info);
  --ok: var(--cnx-color-status-success);
  --radius-lg: var(--cnx-radius-lg);
  --radius-md: var(--cnx-radius-md);
  --radius-pill: var(--cnx-radius-full);
  --radius-sm: var(--cnx-radius-md);
  --radius-xl: var(--cnx-radius-lg);
  --spacing-lg: var(--cnx-space-6);
  --spacing-md: var(--cnx-space-4);
  --spacing-sm: var(--cnx-space-2);
  --spacing-xl: var(--cnx-space-8);
  --success: var(--cnx-color-status-success);
  --success-fg: var(--cnx-color-status-success);
  --text: var(--cnx-color-text-default);
  --text-bright: var(--cnx-color-text-default);
  --text-dim: var(--cnx-color-text-subtle);
  --text-label: var(--cnx-color-text-subtle);
  --text-muted: var(--cnx-color-text-muted);
  --text-nav: var(--cnx-color-text-muted);
  --warning: var(--cnx-color-status-warning);
  --warning-fg: var(--cnx-color-status-warning);
  --warning-surface: var(--cnx-color-status-surface-warning);
}