/* Kodex DS tokens flat — generated for Perfex kodex_theme 2026-07-17 */
/* === variables-primitives === */
/**
 * @generated — do not edit. Run: npm run tokens:build
 * Source: 02_DESIGN_TOKENS/primitives/*.json (2.0.0)
 */
:root {
  --kodex-color-blue: #001BFF;
  --kodex-color-navy: #001D3A;
  --kodex-color-dark-1: #1E1E24;
  --kodex-color-dark-2: #14141A;
  --kodex-color-dark: #1E1E24;
  --kodex-color-charcoal-deep: #14141A;
  --kodex-color-light-1: #F7F7F7;
  --kodex-color-light: #F7F7F7;
  --kodex-color-off-white: #F7F7F7;
  --kodex-color-black: #000000;
  --kodex-color-white: #FFFFFF;
  --kodex-color-orange: #FA4616;
  --kodex-color-success: #0D7A4E;
  --kodex-color-error: #C41E3A;
  --kodex-color-neutral-900: #40424D;
  --kodex-color-neutral-700: #6E7180;
  --kodex-color-neutral-500: #9DA2B3;
  --kodex-color-neutral-300: #BCBFCC;
  --kodex-color-neutral-200: #D3D6E0;
  --kodex-color-neutral-100: #EDEFF7;
  --kodex-color-gray-700: #40424D;
  --kodex-color-gray-500: #6E7180;
  --kodex-color-gray-400: #9DA2B3;
  --kodex-color-gray-350: #BCBFCC;
  --kodex-color-gray-300: #D3D6E0;
  --kodex-color-gray-200: #EDEFF7;
  --kodex-color-chrome-base: #8A8D8F;
  --kodex-color-chrome-highlight: #D9DADC;
  --kodex-color-chrome-shadow: #5B5D60;
  --kodex-color-chrome-gradient: linear-gradient(135deg, #EAEBEC 0%, #D9DADC 18%, #9A9DA0 46%, #8A8D8F 62%, #6B6E70 80%, #5B5D60 100%);
  --kodex-color-transparent: transparent;
  --kodex-space-0: 0;
  --kodex-space-1: 4px;
  --kodex-space-2: 8px;
  --kodex-space-3: 12px;
  --kodex-space-4: 16px;
  --kodex-space-5: 20px;
  --kodex-space-6: 24px;
  --kodex-space-8: 32px;
  --kodex-space-10: 40px;
  --kodex-space-12: 48px;
  --kodex-space-16: 64px;
  --kodex-radius-none: 0;
  --kodex-radius-sm: 4px;
  --kodex-radius-md: 4px;
  --kodex-radius-full: 9999px;
  --kodex-bg-chrome: var(--kodex-color-chrome-gradient);
}


/* === variables-semantic === */
/**
 * @generated — do not edit. Run: npm run tokens:build
 * Source: 02_DESIGN_TOKENS/themes/light.json + dark.json (1.0.0)
 */
:root {
  --kodex-bg-canvas: #FFFFFF;
  --kodex-bg-surface: #FFFFFF;
  --kodex-bg-subtle: #F5F5F5;
  --kodex-bg-muted: #EDEFF7;
  --kodex-bg-inverse: #14141A;
  --kodex-border-default: #D3D6E0;
  --kodex-border-subtle: #EDEFF7;
  --kodex-border-strong: #9DA2B3;
  --kodex-text-primary: #14141A;
  --kodex-text-secondary: #40424D;
  --kodex-text-muted: #6E7180;
  --kodex-text-disabled: #9DA2B3;
  --kodex-text-inverse: #FFFFFF;
  --kodex-text-link: #001BFF;
  --kodex-text-emphasis: #001D3A;
  --kodex-action-primary: #001BFF;
  --kodex-action-primary-fg: #FFFFFF;
  --kodex-action-primary-hover: #0015CC;
  --kodex-feedback-info: #001BFF;
  --kodex-feedback-info-bg: #E8EBFF;
  --kodex-feedback-success: #0D7A4E;
  --kodex-feedback-success-bg: #E6F4ED;
  --kodex-feedback-warning: #FA4616;
  --kodex-feedback-warning-bg: #FEEEE8;
  --kodex-feedback-error: #C41E3A;
  --kodex-feedback-error-bg: #FCE8EC;
  --kodex-accent: #001BFF;
  --kodex-accent-muted: #E8EBFF;
  --kodex-action-primary-active: #001199;
  --kodex-text-link-hover: #0015cc;
  --kodex-text-link-visited: var(--kodex-color-navy);
}

[data-theme='light'],
.theme-light {
  --kodex-bg-canvas: #FFFFFF;
  --kodex-bg-surface: #FFFFFF;
  --kodex-bg-subtle: #F5F5F5;
  --kodex-bg-muted: #EDEFF7;
  --kodex-bg-inverse: #14141A;
  --kodex-border-default: #D3D6E0;
  --kodex-border-subtle: #EDEFF7;
  --kodex-border-strong: #9DA2B3;
  --kodex-text-primary: #14141A;
  --kodex-text-secondary: #40424D;
  --kodex-text-muted: #6E7180;
  --kodex-text-disabled: #9DA2B3;
  --kodex-text-inverse: #FFFFFF;
  --kodex-text-link: #001BFF;
  --kodex-text-emphasis: #001D3A;
  --kodex-action-primary: #001BFF;
  --kodex-action-primary-fg: #FFFFFF;
  --kodex-action-primary-hover: #0015CC;
  --kodex-feedback-info: #001BFF;
  --kodex-feedback-info-bg: #E8EBFF;
  --kodex-feedback-success: #0D7A4E;
  --kodex-feedback-success-bg: #E6F4ED;
  --kodex-feedback-warning: #FA4616;
  --kodex-feedback-warning-bg: #FEEEE8;
  --kodex-feedback-error: #C41E3A;
  --kodex-feedback-error-bg: #FCE8EC;
  --kodex-accent: #001BFF;
  --kodex-accent-muted: #E8EBFF;
  --kodex-action-primary-active: #001199;
  --kodex-text-link-hover: #0015cc;
  --kodex-text-link-visited: var(--kodex-color-navy);
}

[data-theme='dark'],
.theme-dark {
  --kodex-bg-canvas: #14141A;
  --kodex-bg-surface: #1E1E24;
  --kodex-bg-subtle: #1E1E24;
  --kodex-bg-muted: #40424D;
  --kodex-bg-inverse: #FFFFFF;
  --kodex-border-default: #40424D;
  --kodex-border-subtle: #2A2A32;
  --kodex-border-strong: #6E7180;
  --kodex-text-primary: #FFFFFF;
  --kodex-text-secondary: #D3D6E0;
  --kodex-text-muted: #9DA2B3;
  --kodex-text-disabled: #6E7180;
  --kodex-text-inverse: #14141A;
  --kodex-text-link: #D9DADC;
  --kodex-text-link-hover: #FA4616;
  --kodex-text-emphasis: #FA4616;
  --kodex-action-primary: #001BFF;
  --kodex-action-primary-fg: #FFFFFF;
  --kodex-action-primary-hover: #334DFF;
  --kodex-feedback-info: #001BFF;
  --kodex-feedback-info-bg: #0A1440;
  --kodex-feedback-success: #2ECC71;
  --kodex-feedback-success-bg: #0D2E1C;
  --kodex-feedback-warning: #FA4616;
  --kodex-feedback-warning-bg: #3D1A0A;
  --kodex-feedback-error: #E8486A;
  --kodex-feedback-error-bg: #3D0A14;
  --kodex-accent: #001BFF;
  --kodex-accent-muted: #0A1440;
  --kodex-action-primary-active: #0015cc;
  --kodex-text-link-visited: #9da2b3;
  --kodex-text-emphasis: var(--kodex-color-orange);
}


/* === variables === */
/**
 * Kodex design tokens — CSS custom properties (typography, motion, components).
 * Primitives + semantic colors: @generated via npm run tokens:build
 * Dark mode: add [data-theme="dark"] or .theme-dark on root.
 * Sector: add data-sector="fintech" etc. for accent overrides.
 */
:root {
  /* Typography */
  --kodex-font-display: 'Neue Haas Grotesk Display', 'Satoshi', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --kodex-font-body: 'Satoshi', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --kodex-font-mono: 'Roboto Mono', 'SFMono-Regular', Menlo, monospace;
  --kodex-font-size-body: 14px;
  --kodex-line-height-body: 1.5;

  /* Spacing — reference generated --kodex-space-* */
  /* Web typography — @generated (base: mobilePortrait) */
  --kodex-type-h1-size: 36px;
  --kodex-type-h1-line-height: 1.08;
  --kodex-type-h1-margin-bottom: 16px;
  --kodex-type-h1-weight: 700;
  --kodex-type-h2-size: 26px;
  --kodex-type-h2-line-height: 1.12;
  --kodex-type-h2-margin-bottom: 14px;
  --kodex-type-h2-weight: 700;
  --kodex-type-h3-size: 18px;
  --kodex-type-h3-line-height: 1.2;
  --kodex-type-h3-margin-bottom: 12px;
  --kodex-type-h3-weight: 500;
  --kodex-type-h4-size: 14px;
  --kodex-type-h4-line-height: 1.3;
  --kodex-type-h4-margin-bottom: 10px;
  --kodex-type-h4-weight: 500;
  --kodex-type-h5-size: 18px;
  --kodex-type-h5-line-height: 1.38;
  --kodex-type-h5-margin-bottom: 8px;
  --kodex-type-h5-weight: 500;
  --kodex-type-h6-size: 12px;
  --kodex-type-h6-line-height: 1.4;
  --kodex-type-h6-margin-bottom: 8px;
  --kodex-type-h6-weight: 500;
  --kodex-type-lead-size: 12px;
  --kodex-type-lead-line-height: 1.6;
  --kodex-type-lead-margin-bottom: 16px;
  --kodex-type-lead-weight: 400;
  --kodex-type-body-size: 12px;
  --kodex-type-body-line-height: 1.6;
  --kodex-type-body-margin-bottom: 16px;
  --kodex-type-body-weight: 400;
  --kodex-type-body-sm-size: 12px;
  --kodex-type-body-sm-line-height: 1.5;
  --kodex-type-body-sm-margin-bottom: 12px;
  --kodex-type-body-sm-weight: 400;
  --kodex-type-caption-size: 12px;
  --kodex-type-caption-line-height: 1.4;
  --kodex-type-caption-margin-bottom: 8px;
  --kodex-type-caption-weight: 500;
  --kodex-type-quote-size: 20px;
  --kodex-type-quote-line-height: 1.52;
  --kodex-type-quote-margin-bottom: 20px;
  --kodex-type-quote-weight: 400;

  /* Breakpoint anchors */
  --kodex-bp-mobileLandscape-min: 441px;
  --kodex-bp-ipadPortrait-min: 768px;
  --kodex-bp-ipadLandscape-min: 1025px;
  --kodex-bp-laptop-min: 1367px;
  --kodex-bp-desktop-min: 1513px;
  --kodex-bp-desktopLarge-min: 1921px;
  --kodex-bp-monitor-min: 2561px;

  /* Web buttons — shared */
  --kodex-web-btn-font-size: 16px;
  --kodex-web-btn-font-weight: 500;
  --kodex-web-btn-line-height: 1.25;
  --kodex-web-btn-radius: var(--kodex-radius-sm);
  --kodex-web-btn-padding-x: 20px;
  --kodex-web-btn-padding-y: 12px;
  --kodex-web-btn-min-height: 44px;
  --kodex-web-btn-disabled-opacity: 0.45;

  /* Primary */
  --kodex-web-btn-primary-bg: var(--kodex-action-primary);
  --kodex-web-btn-primary-fg: var(--kodex-action-primary-fg);
  --kodex-web-btn-primary-border: transparent;
  --kodex-web-btn-primary-shadow: none;
  --kodex-web-btn-primary-bg-hover: var(--kodex-action-primary-hover);
  --kodex-web-btn-primary-bg-active: var(--kodex-action-primary-active);

  /* Secondary */
  --kodex-web-btn-secondary-bg: var(--kodex-bg-surface);
  --kodex-web-btn-secondary-fg: var(--kodex-text-primary);
  --kodex-web-btn-secondary-border: var(--kodex-border-default);
  --kodex-web-btn-secondary-bg-hover: var(--kodex-bg-subtle);
  --kodex-web-btn-secondary-border-hover: var(--kodex-border-strong);
  --kodex-web-btn-secondary-bg-active: var(--kodex-bg-muted);

  /* Tertiary / ghost */
  --kodex-web-btn-tertiary-bg: transparent;
  --kodex-web-btn-tertiary-fg: var(--kodex-text-link);
  --kodex-web-btn-tertiary-border: transparent;
  --kodex-web-btn-tertiary-bg-hover: var(--kodex-bg-subtle);
  --kodex-web-btn-tertiary-fg-hover: var(--kodex-text-link-hover);
  --kodex-web-btn-tertiary-bg-active: var(--kodex-bg-muted);
  --kodex-web-btn-tertiary-focus-ring: var(--kodex-focus-ring);

  /* Focus ring */
  --kodex-focus-ring: 2px solid var(--kodex-accent);
  --kodex-focus-ring-offset: 2px;

  /* Links */
  --kodex-link-color: var(--kodex-text-link);
  --kodex-link-color-hover: var(--kodex-text-link-hover);
  --kodex-link-color-visited: var(--kodex-text-link-visited);
  --kodex-link-decoration: none;
  --kodex-link-decoration-hover: underline;
  --kodex-link-nav-color: var(--kodex-text-secondary);
  --kodex-link-nav-color-hover: var(--kodex-text-primary);
  --kodex-link-nav-color-active: var(--kodex-text-link);

  /* Motion */
  --kodex-motion-duration-fast: 150ms;
  --kodex-motion-duration-base: 200ms;
  --kodex-motion-duration-slow: 300ms;
  --kodex-motion-easing-default: ease-in-out;
  --kodex-motion-easing-enter: cubic-bezier(0.16, 1, 0.3, 1);
  --kodex-motion-easing-exit: cubic-bezier(0.4, 0, 1, 1);
  --kodex-motion-transition-color: color var(--kodex-motion-duration-base) var(--kodex-motion-easing-default),
    background-color var(--kodex-motion-duration-base) var(--kodex-motion-easing-default),
    border-color var(--kodex-motion-duration-base) var(--kodex-motion-easing-default);
  --kodex-motion-transition-transform: transform var(--kodex-motion-duration-base) var(--kodex-motion-easing-enter);
  --kodex-motion-scroll-fade-duration: 300ms;
  --kodex-motion-scroll-slide-duration: 400ms;
  --kodex-motion-scroll-zoom-duration: 350ms;
  --kodex-motion-scroll-slide-distance: 16px;
  --kodex-motion-scroll-zoom-scale: 0.97;

  /* Form inputs */
  --kodex-input-font-size: 16px;
  --kodex-input-font-weight: 400;
  --kodex-input-line-height: 1.5;
  --kodex-input-padding-x: 12px;
  --kodex-input-padding-y: 10px;
  --kodex-input-radius: var(--kodex-radius-md);
  --kodex-input-bg: var(--kodex-bg-surface);
  --kodex-input-fg: var(--kodex-text-primary);
  --kodex-input-border: var(--kodex-border-default);
  --kodex-input-placeholder: var(--kodex-text-muted);
  --kodex-input-border-hover: var(--kodex-border-strong);
  --kodex-input-border-focus: var(--kodex-accent);
  --kodex-input-focus-ring: 0 0 0 2px rgba(0, 27, 255, 0.2);
  --kodex-input-border-error: var(--kodex-feedback-error);
  --kodex-input-error-ring: 0 0 0 2px rgba(196, 30, 58, 0.15);
  --kodex-input-disabled-opacity: 0.5;

  /* Form labels */
  --kodex-label-font-size: 14px;
  --kodex-label-font-weight: 500;
  --kodex-label-line-height: 1.4;
  --kodex-label-margin-bottom: 6px;
  --kodex-label-color: var(--kodex-text-secondary);

  /* Badges */
  --kodex-badge-font-size: 11px;
  --kodex-badge-font-weight: 600;
  --kodex-badge-letter-spacing: 0.08em;
  --kodex-badge-padding-x: 8px;
  --kodex-badge-padding-y: 4px;
  --kodex-badge-radius: var(--kodex-radius-sm);
  --kodex-badge-bg: var(--kodex-accent-muted);
  --kodex-badge-fg: var(--kodex-accent);
  --kodex-badge-success-bg: var(--kodex-feedback-success-bg);
  --kodex-badge-success-fg: var(--kodex-feedback-success);
  --kodex-badge-warning-bg: var(--kodex-feedback-warning-bg);
  --kodex-badge-warning-fg: var(--kodex-feedback-warning);
  --kodex-badge-error-bg: var(--kodex-feedback-error-bg);
  --kodex-badge-error-fg: var(--kodex-feedback-error);

  /* Tooltips */
  --kodex-tooltip-font-size: 13px;
  --kodex-tooltip-line-height: 1.45;
  --kodex-tooltip-padding-x: 12px;
  --kodex-tooltip-padding-y: 8px;
  --kodex-tooltip-radius: var(--kodex-radius-md);
  --kodex-tooltip-max-width: 240px;
  --kodex-tooltip-bg: var(--kodex-color-charcoal-deep);
  --kodex-tooltip-fg: var(--kodex-color-white);
  --kodex-tooltip-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  --kodex-tooltip-trigger-hover: var(--kodex-text-link);
  --kodex-tooltip-enter-duration: var(--kodex-motion-duration-base);
  --kodex-tooltip-exit-duration: var(--kodex-motion-duration-fast);

  /* Pattern */
  --kodex-pattern-opacity-light: 0.08;
  --kodex-pattern-opacity-dark: 0.1;
}

[data-sector='legaltech'],
[data-sector='private_equity'] {
  --kodex-accent: var(--kodex-color-navy);
}

[data-sector='fintech'],
[data-sector='aerospace'] {
  --kodex-accent: var(--kodex-color-blue);
}

[data-sector='b2b_industrial'] {
  --kodex-accent: var(--kodex-color-gray-700);
}

/* === variables-density === */
/**
 * @generated — do not edit. Run: npm run tokens:build
 * Source: 02_DESIGN_TOKENS/primitives/spacing.json (1.0.0)
 */
:root {
  --kodex-table-cell-padding-x: 8px;
  --kodex-table-cell-padding-y: 4px;
  --kodex-input-padding-x: 12px;
  --kodex-input-padding-y: 8px;
  --kodex-button-padding-x: 16px;
  --kodex-button-padding-y: 8px;
  --kodex-card-padding: 16px;
  --kodex-stack-gap-sm: 8px;
  --kodex-stack-gap-md: 12px;
  --kodex-stack-gap-lg: 16px;
  --kodex-form-field-gap: 16px;
}


/* === variables-typography === */
/**
 * @generated — do not edit. Run: npm run tokens:build
 * Source: 02_DESIGN_TOKENS/primitives/typography.json (2.0.0)
 */
:root {
  --kodex-font-display: 'Neue Haas Grotesk Display', 'Satoshi', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --kodex-font-body: 'Satoshi', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --kodex-font-mono: 'Roboto Mono', 'SFMono-Regular', Menlo, monospace;
  --kodex-font-size-xs: 12px;
  --kodex-font-size-sm: 13px;
  --kodex-font-size-body: 14px;
  --kodex-font-size-md: 16px;
  --kodex-font-size-lg: 18px;
  --kodex-font-size-xl: 20px;
  --kodex-font-size-2xl: 24px;
  --kodex-font-size-3xl: 28px;
  --kodex-font-size-4xl: 40px;
  --kodex-font-size-5xl: 56px;
  --kodex-font-weight-regular: 400;
  --kodex-font-weight-medium: 500;
  --kodex-font-weight-semibold: 600;
  --kodex-font-weight-bold: 700;
  --kodex-font-weight-black: 900;
  --kodex-line-height-tight: 1.2;
  --kodex-line-height-snug: 1.35;
  --kodex-line-height-normal: 1.5;
  --kodex-line-height-relaxed: 1.6;
}


/* === variables-elevation === */
/**
 * @generated — do not edit. Run: npm run tokens:build
 * Source: 02_DESIGN_TOKENS/primitives/elevation.json (1.0.0)
 */
:root {
  --kodex-shadow-none: none;
  --kodex-shadow-sm: 0 1px 2px color-mix(in srgb, var(--kodex-color-black) 6%, transparent);
  --kodex-shadow-md: 0 4px 12px color-mix(in srgb, var(--kodex-color-black) 10%, transparent);
  --kodex-shadow-lg: 0 8px 24px color-mix(in srgb, var(--kodex-color-black) 12%, transparent);
  --kodex-z-base: 0;
  --kodex-z-dropdown: 100;
  --kodex-z-sticky: 110;
  --kodex-z-modal: 200;
  --kodex-z-toast: 300;
  --kodex-z-tooltip: 400;
}


/* === variables-layout === */
/**
 * @generated — do not edit. Run: npm run tokens:build
 * Source: 02_DESIGN_TOKENS/primitives/layout.json (1.0.0)
 */
:root {
  --kodex-grid-columns: 12;
  --kodex-grid-gutter: 16px;
  --kodex-grid-margin: 24px;
  --kodex-grid-min-column-width: 200px;
  --kodex-shell-sidebar-width: 240px;
  --kodex-shell-sidebar-width-collapsed: 64px;
  --kodex-shell-header-height: 52px;
}


/* === kodex-ds-visual-layer === */
/**
 * Kodex DS v2.1 visual layer — kodex-ds-visual-spec.json + Brand Kit palette.
 * Light-first with equal dark parity. Cobalt CTA; orange warning-only.
 */

[data-theme='dark'],
.theme-dark {
  --kodex-bg-canvas: #14141a;
  --kodex-bg-surface: #1e1e24;
  --kodex-bg-subtle: #252530;
  --kodex-bg-muted: #2c2c36;
  --kodex-bg-overlay: rgba(255, 255, 255, 0.04);
  --kodex-bg-surface-raised: #252530;
  --kodex-bg-surface-sunken: #18181e;
  --kodex-border-subtle: rgba(255, 255, 255, 0.06);
  --kodex-border-default: rgba(255, 255, 255, 0.1);
  --kodex-border-strong: rgba(255, 255, 255, 0.16);
  --kodex-border-focus: #001bff;
  --kodex-text-primary: #ffffff;
  --kodex-text-secondary: rgba(255, 255, 255, 0.68);
  --kodex-text-tertiary: rgba(255, 255, 255, 0.42);
  --kodex-text-disabled: rgba(255, 255, 255, 0.28);
  --kodex-text-inverse: #14141a;
  --kodex-text-link: #6b8aff;
  --kodex-action-primary: #001bff;
  --kodex-action-primary-hover: #3355ff;
  --kodex-action-primary-active: #0016cc;
  --kodex-action-primary-fg: #ffffff;
  --kodex-accent: #001bff;
  --kodex-feedback-info: #6b8aff;
  --kodex-feedback-success: #3dab7a;
  --kodex-feedback-warning: #fa4616;
  --kodex-feedback-error: #e85a6b;
  --kodex-feedback-success-bg: color-mix(in srgb, #3dab7a 18%, transparent);
  --kodex-feedback-warning-bg: color-mix(in srgb, #fa4616 18%, transparent);
  --kodex-feedback-error-bg: color-mix(in srgb, #e85a6b 18%, transparent);
  --kodex-feedback-info-bg: color-mix(in srgb, #6b8aff 18%, transparent);
  --kodex-shadow-card: 0 2px 8px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  --kodex-shadow-modal: 0 24px 64px rgba(0, 0, 0, 0.75);
  --kodex-shadow-inner: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  --kodex-chart-1: #6b8aff;
  --kodex-chart-2: #9da2b3;
  --kodex-chart-3: #3dab7a;
  --kodex-chart-4: #bcbfcc;
  --kodex-chart-5: #fa4616;
  --kodex-chart-grid: rgba(255, 255, 255, 0.08);
}

[data-theme='light'],
.theme-light {
  --kodex-bg-canvas: #f7f7f7;
  --kodex-bg-surface: #ffffff;
  --kodex-bg-subtle: #edeff7;
  --kodex-bg-muted: #d3d6e0;
  --kodex-bg-overlay: rgba(0, 0, 0, 0.03);
  --kodex-bg-surface-raised: #ffffff;
  --kodex-bg-surface-sunken: #edeff7;
  --kodex-border-subtle: rgba(64, 66, 77, 0.08);
  --kodex-border-default: #d3d6e0;
  --kodex-border-strong: #bcbfcc;
  --kodex-border-focus: #001bff;
  --kodex-text-primary: #40424d;
  --kodex-text-secondary: #6e7180;
  --kodex-text-tertiary: #9da2b3;
  --kodex-text-disabled: #bcbfcc;
  --kodex-text-inverse: #ffffff;
  --kodex-text-link: #001bff;
  --kodex-action-primary: #001bff;
  --kodex-action-primary-hover: #0016cc;
  --kodex-action-primary-active: #001299;
  --kodex-action-primary-fg: #ffffff;
  --kodex-accent: #001bff;
  --kodex-feedback-info: #001bff;
  --kodex-feedback-success: #0d7a4e;
  --kodex-feedback-warning: #fa4616;
  --kodex-feedback-error: #c41e3a;
  --kodex-feedback-success-bg: color-mix(in srgb, #0d7a4e 12%, transparent);
  --kodex-feedback-warning-bg: color-mix(in srgb, #fa4616 12%, transparent);
  --kodex-feedback-error-bg: color-mix(in srgb, #c41e3a 12%, transparent);
  --kodex-feedback-info-bg: color-mix(in srgb, #001bff 10%, transparent);
  --kodex-shadow-card: 0 1px 3px rgba(0, 0, 0, 0.08);
  --kodex-shadow-modal: 0 24px 48px rgba(0, 0, 0, 0.18);
  --kodex-shadow-inner: inset 0 1px 0 rgba(255, 255, 255, 0.9);
  --kodex-chart-1: #001bff;
  --kodex-chart-2: #001d3a;
  --kodex-chart-3: #0d7a4e;
  --kodex-chart-4: #6e7180;
  --kodex-chart-5: #9da2b3;
  --kodex-chart-grid: rgba(64, 66, 77, 0.12);
}

:root {
  --kodex-radius-sm: 4px;
  --kodex-radius-md: 4px;
  --kodex-radius-lg: 4px;
  --kodex-color-chrome-gradient: linear-gradient(
    135deg,
    #eaebec 0%,
    #d9dadc 18%,
    #9a9da0 46%,
    #8a8d8f 62%,
    #6b6e70 80%,
    #5b5d60 100%
  );
  --kodex-bg-chrome: var(--kodex-color-chrome-gradient);
  --kodex-font-family-sans: Satoshi, 'Satoshi Fallback', sans-serif;
  --kodex-font-family-mono: 'Roboto Mono', ui-monospace, monospace;
  --kodex-font-size-body: 15px;
  --kodex-font-size-label: 13px;
  --kodex-font-size-title: 18px;
  --kodex-font-size-display: 32px;
  --kodex-space-unit: 4px;
  --kodex-control-height-sm: 36px;
  --kodex-control-height-md: 42px;
  --kodex-control-height-lg: 48px;
  --kodex-motion-duration-instant: 50ms;
  --kodex-motion-duration-hover: 100ms;
  --kodex-motion-duration-base: 160ms;
  --kodex-motion-duration-enter: 220ms;
  --kodex-motion-easing: cubic-bezier(0.2, 0.8, 0.2, 1);
  --kodex-focus-ring: 2px solid var(--kodex-border-focus, #001bff);
  --kodex-focus-ring-offset: 2px;
}

/* === crm-theme === */
/**
 * KodexCRM semantic tokens — light + dark
 * Maps to brand kit primitives via CSS variables (BD-01, BD-16).
 * Use on admin surfaces; pairs with data-theme on preview panels.
 */
[data-theme='light'] {
  --kodex-crm-sidebar-bg: var(--kodex-color-charcoal-deep);
  --kodex-crm-sidebar-text: #e8e9ed;
  --kodex-crm-sidebar-active: var(--kodex-color-orange);
  --kodex-crm-canvas: #f0f1f4;
  --kodex-crm-surface: var(--kodex-color-white);
  --kodex-crm-kanban-header: var(--kodex-action-primary);
  --kodex-crm-kanban-body: color-mix(in srgb, var(--kodex-action-primary) 4%, var(--kodex-color-white));
  --kodex-crm-search-bg: var(--kodex-color-white);
  --kodex-crm-stat-positive: var(--kodex-feedback-success);
  --kodex-crm-stat-negative: var(--kodex-feedback-error);
  --kodex-crm-stat-pending: var(--kodex-color-orange);
  --kodex-pattern-cell-active: var(--kodex-action-primary);
  --kodex-pattern-cell-inactive: color-mix(in srgb, var(--kodex-action-primary) 10%, var(--kodex-color-gray-300));
  --kodex-pattern-cell-success: var(--kodex-feedback-success);
  --kodex-pattern-cell-error: var(--kodex-feedback-error);
  --kodex-pattern-cell-warning: var(--kodex-feedback-warning);
  --kodex-pattern-cell-gap: 3px;
}

[data-theme='dark'] {
  --kodex-crm-sidebar-bg: #0e0e12;
  --kodex-crm-sidebar-text: #e8e9ed;
  --kodex-crm-sidebar-active: var(--kodex-color-orange);
  --kodex-crm-canvas: var(--kodex-color-charcoal-deep);
  --kodex-crm-surface: var(--kodex-color-dark);
  --kodex-crm-kanban-header: var(--kodex-action-primary);
  --kodex-crm-kanban-body: color-mix(in srgb, var(--kodex-action-primary) 8%, var(--kodex-color-dark));
  --kodex-crm-search-bg: var(--kodex-color-dark);
  --kodex-crm-stat-positive: var(--kodex-feedback-success);
  --kodex-crm-stat-negative: var(--kodex-feedback-error);
  --kodex-crm-stat-pending: var(--kodex-color-orange);
  --kodex-pattern-cell-active: var(--kodex-color-white);
  --kodex-pattern-cell-inactive: #2a2a32;
  --kodex-pattern-cell-success: var(--kodex-feedback-success);
  --kodex-pattern-cell-error: var(--kodex-feedback-error);
  --kodex-pattern-cell-warning: var(--kodex-feedback-warning);
  --kodex-pattern-cell-gap: 3px;
}

/* === kds-component-tokens === */
/**
 * @kodex/ds component tokens — mapped from kodex-ds-visual-spec.json + Kodex brand.
 */

:root {
  /* Badge — spec: xs medium, 2px 8px, colored status backgrounds */
  --kds-badge-font-size: 11px;
  --kds-badge-font-weight: 500;
  --kds-badge-letter-spacing: 0.01em;
  --kds-badge-padding-y: 2px;
  --kds-badge-padding-x: 8px;
  --kds-badge-radius: var(--kodex-radius-sm);
  --kds-badge-bg: var(--kodex-bg-muted);
  --kds-badge-fg: var(--kodex-text-secondary);
  --kds-badge-success-bg: var(--kodex-feedback-success-bg);
  --kds-badge-success-fg: var(--kodex-feedback-success);
  --kds-badge-warning-bg: var(--kodex-feedback-warning-bg);
  --kds-badge-warning-fg: var(--kodex-feedback-warning);
  --kds-badge-error-bg: var(--kodex-feedback-error-bg);
  --kds-badge-error-fg: var(--kodex-feedback-error);

  /* Table — spec: 10px 16px cells, xs tertiary headers */
  --kds-table-cell-padding-x: 16px;
  --kds-table-cell-padding-y: 10px;

  /* Stack */
  --kds-stack-gap-sm: var(--kodex-space-2);
  --kds-stack-gap-md: var(--kodex-space-3);
  --kds-stack-gap-lg: var(--kodex-space-4);

  /* Input — spec: surface2 bg, 8px 12px, sm text (Kodex min 14px body) */
  --kds-input-padding-x: 12px;
  --kds-input-padding-y: 8px;
  --kds-input-font-size: var(--kodex-font-size-body);
  --kds-input-line-height: var(--kodex-line-height-body);
  --kds-input-bg: var(--kodex-bg-surface-sunken, var(--kodex-bg-subtle));
  --kds-input-fg: var(--kodex-text-primary);
  --kds-input-border: var(--kodex-border-default);
  --kds-input-border-hover: var(--kodex-border-strong);
  --kds-input-border-focus: var(--kodex-border-focus);
  --kds-input-radius: var(--kodex-radius-md);
  --kds-input-focus-ring: 0 0 0 2px color-mix(in srgb, var(--kodex-accent) 20%, transparent);
  --kds-input-border-error: var(--kodex-feedback-error);
  --kds-input-error-ring: 0 0 0 2px color-mix(in srgb, var(--kodex-feedback-error) 20%, transparent);
  --kds-input-disabled-opacity: 0.5;

  /* Tooltip — spec: surface2, xs, 6px 10px */
  --kds-tooltip-max-width: 220px;
  --kds-tooltip-padding-x: 10px;
  --kds-tooltip-padding-y: 6px;
  --kds-tooltip-radius: var(--kodex-radius-md);
  --kds-tooltip-bg: var(--kodex-bg-surface-raised, var(--kodex-bg-subtle));
  --kds-tooltip-fg: var(--kodex-text-primary);
  --kds-tooltip-font-size: 11px;
  --kds-tooltip-line-height: 1.45;
  --kds-tooltip-shadow: var(--kodex-shadow-md);
  --kds-tooltip-enter-duration: var(--kodex-motion-duration-base);

  /* Chat */
  --kds-chat-radius: var(--kodex-radius-md);
  --kds-chat-header-bg: var(--kodex-bg-surface);
  --kds-chat-body-bg: var(--kodex-bg-canvas);
  --kds-chat-body-pattern: color-mix(in srgb, var(--kodex-border-subtle) 80%, transparent);
  --kds-chat-footer-bg: var(--kodex-bg-surface);
  --kds-chat-typing-bg: var(--kodex-bg-subtle);
  --kds-chat-composer-bg: var(--kodex-bg-surface);
  --kds-chat-composer-field-bg: var(--kodex-bg-surface-sunken, var(--kodex-bg-subtle));
  --kds-chat-composer-field-border: var(--kodex-border-default);
  --kds-chat-incoming-bg: var(--kodex-bg-subtle);
  --kds-chat-incoming-border: var(--kodex-border-subtle);
  --kds-chat-outgoing-bg: color-mix(in srgb, var(--kodex-action-primary) 12%, var(--kodex-bg-surface));
  --kds-chat-outgoing-border: color-mix(in srgb, var(--kodex-action-primary) 25%, transparent);

  /* Card padding roles from spec */
  --kds-card-padding-md: 16px 20px;
  --kds-sidebar-item-height: 32px;

  /* Button sizes — upscaled v2.1 */
  --kds-btn-height-sm: 36px;
  --kds-btn-height-md: 42px;
  --kds-btn-height-lg: 48px;
  --kds-btn-padding-sm: 8px 14px;
  --kds-btn-padding-md: 10px 20px;
  --kds-btn-padding-lg: 12px 24px;

  /* Alert / banner subtle borders */
  --kds-alert-border: var(--kodex-border-subtle, var(--kodex-border-default));

  /* Button — brand CTA #001BFF, token-based hover/active */
  --kds-btn-font-weight: 500;
  --kds-btn-radius: var(--kodex-radius-sm);
  --kds-btn-primary-bg: var(--kodex-action-primary);
  --kds-btn-primary-bg-hover: var(--kodex-action-primary-hover);
  --kds-btn-primary-bg-active: var(--kodex-action-primary-active);
  --kds-btn-primary-fg: var(--kodex-action-primary-fg);
  --kds-btn-secondary-bg: var(--kodex-bg-surface-raised, var(--kodex-bg-subtle));
  --kds-btn-secondary-bg-hover: var(--kodex-bg-subtle);
  --kds-btn-secondary-border: var(--kodex-border-default);
  --kds-btn-ghost-fg: var(--kodex-text-link);
  --kds-btn-ghost-bg-hover: var(--kodex-bg-overlay, var(--kodex-bg-subtle));
  --kds-btn-danger-bg: var(--kodex-feedback-error);
  --kds-btn-danger-bg-hover: color-mix(in srgb, var(--kodex-feedback-error) 92%, var(--kodex-color-black));
  --kds-btn-danger-bg-active: color-mix(in srgb, var(--kodex-feedback-error) 85%, var(--kodex-color-black));
  --kds-btn-danger-fg: var(--kodex-color-white);

  /* Card — border + shadow together (visual spec) */
  --kds-card-radius: var(--kodex-radius-md);
  --kds-card-border: var(--kodex-border-subtle, var(--kodex-border-default));
  --kds-card-shadow: var(--kodex-shadow-card, var(--kodex-shadow-sm));
  --kds-card-header-border: var(--kodex-border-subtle, var(--kodex-border-default));

  /* Tabs */
  --kds-tab-font-size: 13px;
  --kds-tab-font-weight: 500;
  --kds-tab-active-color: var(--kodex-action-primary);
  --kds-tab-active-border: var(--kodex-action-primary);
  --kds-tab-inactive-color: var(--kodex-text-secondary);
  --kds-tab-pill-bg: var(--kodex-bg-surface-raised, var(--kodex-bg-subtle));

  /* Modal / drawer overlays */
  --kds-overlay-bg: color-mix(in srgb, var(--kodex-bg-inverse) 70%, transparent);
  --kds-drawer-overlay-bg: color-mix(in srgb, var(--kodex-bg-inverse) 40%, transparent);

  /* Sidebar nav — 32px items, overlay hover */
  --kds-sidebar-link-font-size: 13px;
  --kds-sidebar-link-active-bg: color-mix(in srgb, var(--kodex-action-primary) 8%, var(--kodex-bg-subtle));
  --kds-sidebar-link-active-color: var(--kodex-text-primary);

  /* Table — tertiary headers, overlay row hover */
  --kds-table-header-font-size: 11px;
  --kds-table-header-color: var(--kodex-text-muted);
  --kds-table-row-hover-bg: var(--kodex-bg-overlay, var(--kodex-bg-subtle));
  --kds-table-row-selected-bg: var(--kodex-bg-surface-raised, var(--kodex-accent-muted));

  /* KPI card */
  --kds-kpi-value-font-size: 28px;
  --kds-kpi-label-font-size: 11px;

  /* Icon button */
  --kds-icon-btn-size-sm: 28px;
  --kds-icon-btn-size-md: 32px;
  --kds-icon-btn-primary-bg-hover: var(--kodex-action-primary-hover);

  /* Toast / notification */
  --kds-toast-shadow: var(--kodex-shadow-lg, 0 8px 24px color-mix(in srgb, var(--kodex-color-black) 14%, transparent));

  /* Progress / spinner accent */
  --kds-spinner-accent: var(--kodex-action-primary);

  /* Audio — opt-in hover (ethernet click), disabled when prefers-reduced-motion */
  --kds-audio-hover-debounce-ms: 90;
  --kds-audio-master-gain: 0.68;

  /* Label typography (forms) */
  --kodex-label-font-size: var(--kodex-font-size-body);
  --kodex-label-font-weight: 500;
  --kodex-label-line-height: var(--kodex-line-height-body);
  --kodex-label-color: var(--kodex-text-secondary);
  --kodex-label-margin-bottom: var(--kodex-space-1);
}

/* === DS theme color-scheme === */
[data-theme='light'],
.theme-light { color-scheme: light; }
[data-theme='dark'],
.theme-dark { color-scheme: dark; }