/* @cntx/design-system v0.2.0 */
/* content-hash: 20f3371eaf7f */
/* built-at: 2026-10-04T17:24:42.537Z */
/* Vendored copy — do not edit. Source: cntx-monorepo/packages/cntx-design-system */
/* Sync: pnpm --filter @cntx/design-system build:all */
/* GENERATED from primitives.json — do not edit. Run: node scripts/build-tokens.mjs */
:root {
  --cntx-color-petroleum-500: #2A5C5F;
  --cntx-color-petroleum-700: #164B4E;
  --cntx-color-petroleum-900: #0C3538;
  --cntx-color-cyan-100: #D4F5F2;
  --cntx-color-cyan-300: #7FE0D9;
  --cntx-color-cyan-500: #2EC4BC;
  --cntx-color-cyan-600: #2BB8B0;
  --cntx-color-coral-100: #FCE8E2;
  --cntx-color-coral-500: #F06545;
  --cntx-color-coral-600: #E14F32;
  --cntx-color-paper-50: #FFFCFA;
  --cntx-color-paper-100: #F6F3EE;
  --cntx-color-paper-200: #EDE8E0;
  --cntx-color-ink-100: #E8EEEC;
  --cntx-color-ink-500: #5C574F;
  --cntx-color-ink-700: #2A2E2C;
  --cntx-color-ink-900: #141716;
  --cntx-color-line-100: #EEE9E2;
  --cntx-color-line-200: #E3DDD4;
  --cntx-color-line-300: #CFC7BB;
  --cntx-color-peach-300: #EBC4B0;
  --cntx-color-peach-400: #E8B9A4;
  --cntx-color-mint-400: #B7CEC8;
  --cntx-color-green-50: #ECFDF5;
  --cntx-color-green-300: #6EE7B7;
  --cntx-color-green-500: #10B981;
  --cntx-color-green-700: #047857;
  --cntx-color-amber-50: #FFF7ED;
  --cntx-color-amber-300: #FBBF24;
  --cntx-color-amber-500: #F59E0B;
  --cntx-color-amber-700: #B45309;
  --cntx-color-red-50: #FEF2F2;
  --cntx-color-red-300: #F87171;
  --cntx-color-red-500: #EF4444;
  --cntx-color-red-700: #DC2626;
  --cntx-color-blue-50: #E0F2FE;
  --cntx-color-blue-300: #38BDF8;
  --cntx-color-blue-500: #0EA5E9;
  --cntx-color-blue-700: #0369A1;
  --cntx-color-white: #FFFFFF;
  --cntx-color-black: #000000;
  --cntx-color-dark-canvas: #071516;
  --cntx-color-dark-surface: #0E2224;
  --cntx-color-dark-band: #0A2A2D;
  --cntx-color-dark-ink: #E8EEEC;
  --cntx-color-dark-muted: #9AA9A7;
  --cntx-color-dark-on-action: #06201F;
  --cntx-space-0: 0;
  --cntx-space-1: 4px;
  --cntx-space-2: 8px;
  --cntx-space-3: 12px;
  --cntx-space-4: 16px;
  --cntx-space-5: 20px;
  --cntx-space-6: 24px;
  --cntx-space-8: 32px;
  --cntx-space-10: 40px;
  --cntx-space-12: 48px;
  --cntx-space-16: 64px;
  --cntx-border-width-hair: 1px;
  --cntx-border-width-default: 1px;
  --cntx-border-width-strong: 2px;
  --cntx-radius-sm: 6px;
  --cntx-radius-md: 10px;
  --cntx-radius-lg: 12px;
  --cntx-radius-xl: 16px;
  --cntx-radius-pill: 9999px;
  --cntx-control-sm: 32px;
  --cntx-control-md: 36px;
  --cntx-control-lg: 44px;
  --cntx-row-compact: 36px;
  --cntx-row-default: 44px;
  --cntx-row-comfortable: 52px;
  --cntx-icon-sm: 14px;
  --cntx-icon-md: 16px;
  --cntx-icon-lg: 20px;
  --cntx-font-sans: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --cntx-font-display: "Inter Tight", Inter, system-ui, sans-serif;
  --cntx-font-size-11: 0.6875rem;
  --cntx-font-size-12: 0.75rem;
  --cntx-font-size-13: 0.8125rem;
  --cntx-font-size-14: 0.875rem;
  --cntx-font-size-16: 1rem;
  --cntx-font-size-18: 1.125rem;
  --cntx-font-size-20: 1.25rem;
  --cntx-font-size-24: 1.5rem;
  --cntx-font-size-28: 1.75rem;
  --cntx-font-size-32: 2rem;
  --cntx-font-size-40: 2.5rem;
  --cntx-font-weight-regular: 400;
  --cntx-font-weight-medium: 500;
  --cntx-font-weight-semibold: 600;
  --cntx-font-weight-bold: 700;
  --cntx-font-leading-tight: 1.15;
  --cntx-font-leading-snug: 1.3;
  --cntx-font-leading-normal: 1.5;
  --cntx-font-leading-relaxed: 1.65;
  --cntx-font-tracking-display: -0.035em;
  --cntx-font-tracking-tight: -0.02em;
  --cntx-font-tracking-normal: 0;
  --cntx-font-tracking-wide: 0.04em;
  --cntx-shadow-none: none;
  --cntx-shadow-sm: 0 1px 2px rgba(12, 53, 56, 0.06);
  --cntx-shadow-md: 0 8px 20px -12px rgba(12, 53, 56, 0.35);
  --cntx-shadow-lg: 0 22px 50px -28px rgba(12, 53, 56, 0.32), 0 1px 0 rgba(255, 255, 255, 0.55) inset;
  --cntx-shadow-overlay: 0 28px 60px -24px rgba(12, 53, 56, 0.45), 0 0 0 1px rgba(12, 53, 56, 0.06);
  --cntx-shadow-focus: 0 0 0 3px color-mix(in srgb, #2EC4BC 45%, transparent);
  --cntx-motion-fast: 120ms;
  --cntx-motion-base: 180ms;
  --cntx-motion-slow: 280ms;
  --cntx-easing-standard: ease;
  --cntx-easing-out: cubic-bezier(0.16, 1, 0.3, 1);
  --cntx-state-disabled-opacity: 0.5;
  --cntx-state-hover-lift: -1px;
  --cntx-density-marketing-control: var(--cntx-control-lg);
  --cntx-density-marketing-row: var(--cntx-row-comfortable);
  --cntx-density-marketing-gap: var(--cntx-space-6);
  --cntx-density-product-control: var(--cntx-control-md);
  --cntx-density-product-row: var(--cntx-row-default);
  --cntx-density-product-gap: var(--cntx-space-4);
  --cntx-density-operate-control: var(--cntx-control-sm);
  --cntx-density-operate-row: var(--cntx-row-compact);
  --cntx-density-operate-gap: var(--cntx-space-3);
  --cntx-control-height: var(--cntx-density-product-control);
  --cntx-row-height: var(--cntx-density-product-row);
  --cntx-density-gap: var(--cntx-density-product-gap);
}

[data-density="marketing"] {
  --cntx-control-height: var(--cntx-density-marketing-control);
  --cntx-row-height: var(--cntx-density-marketing-row);
  --cntx-density-gap: var(--cntx-density-marketing-gap);
}
[data-density="operate"] {
  --cntx-control-height: var(--cntx-density-operate-control);
  --cntx-row-height: var(--cntx-density-operate-row);
  --cntx-density-gap: var(--cntx-density-operate-gap);
}
[data-density="product"] {
  --cntx-control-height: var(--cntx-density-product-control);
  --cntx-row-height: var(--cntx-density-product-row);
  --cntx-density-gap: var(--cntx-density-product-gap);
}


/* GENERATED from semantic.json — do not edit. Run: node scripts/build-tokens.mjs */
:root,
[data-theme="light"] {
  --cntx-bg-canvas: #F6F3EE;
  --cntx-bg-surface: #FFFCFA;
  --cntx-bg-tint: #EDE8E0;
  --cntx-bg-inverse: #0C3538;
  --cntx-bg-muted: color-mix(in srgb, #0C3538 4%, #FFFCFA);
  --cntx-bg-selected: color-mix(in srgb, #2BB8B0 18%, #FFFCFA);
  --cntx-bg-hover: color-mix(in srgb, #0C3538 5%, #FFFCFA);
  --cntx-text-primary: #141716;
  --cntx-text-muted: #5C574F;
  --cntx-text-on-action: #FFFFFF;
  --cntx-text-on-inverse: #F3F6F5;
  --cntx-text-brand: #0C3538;
  --cntx-text-disabled: color-mix(in srgb, #5C574F 55%, #F6F3EE);
  --cntx-border-default: #E3DDD4;
  --cntx-border-strong: #CFC7BB;
  --cntx-border-hair: color-mix(in srgb, #0C3538 10%, transparent);
  --cntx-border-focus: #2EC4BC;
  --cntx-border-selected: #2BB8B0;
  --cntx-action-primary: #0C3538;
  --cntx-action-primary-hover: #164B4E;
  --cntx-action-primary-active: #2A5C5F;
  --cntx-action-secondary-bg: #FFFCFA;
  --cntx-action-secondary-border: #E3DDD4;
  --cntx-action-secondary-text: #141716;
  --cntx-accent-warm: #E14F32;
  --cntx-accent-cyan: #2BB8B0;
  --cntx-highlight-warm: #E14F32;
  --cntx-status-success-fg: #047857;
  --cntx-status-success-bg: #ECFDF5;
  --cntx-status-warning-fg: #B45309;
  --cntx-status-warning-bg: #FFF7ED;
  --cntx-status-danger-fg: #DC2626;
  --cntx-status-danger-bg: #FEF2F2;
  --cntx-status-info-fg: #0369A1;
  --cntx-status-info-bg: #E0F2FE;
  --cntx-focus-ring: 0 0 0 3px color-mix(in srgb, #2EC4BC 45%, transparent);
  --cntx-elevation-none: none;
  --cntx-elevation-subtle: 0 1px 2px rgba(12, 53, 56, 0.06);
  --cntx-elevation-raised: 0 8px 20px -12px rgba(12, 53, 56, 0.35);
  --cntx-elevation-overlay: 0 28px 60px -24px rgba(12, 53, 56, 0.45), 0 0 0 1px rgba(12, 53, 56, 0.06);
  --cntx-shadow-elev: 0 22px 50px -28px rgba(12, 53, 56, 0.32), 0 1px 0 rgba(255, 255, 255, 0.55) inset;
  --cntx-state-disabled-opacity: 0.5;
  --cntx-state-hover-lift: -1px;
  --cntx-logo-mark: #0C3538;
  --cntx-logo-x: #2BB8B0;
}

[data-theme="dark"] {
  --cntx-bg-canvas: #071516;
  --cntx-bg-surface: #0E2224;
  --cntx-bg-tint: rgba(240, 101, 69, 0.08);
  --cntx-bg-inverse: #0A2A2D;
  --cntx-bg-muted: rgba(232, 236, 234, 0.06);
  --cntx-bg-selected: rgba(46, 196, 188, 0.20);
  --cntx-bg-hover: rgba(232, 236, 234, 0.06);
  --cntx-text-primary: #E8EEEC;
  --cntx-text-muted: #9AA9A7;
  --cntx-text-on-action: #06201F;
  --cntx-text-on-inverse: #F0F5F4;
  --cntx-text-brand: #7FE0D9;
  --cntx-text-disabled: rgba(154, 169, 167, 0.55);
  --cntx-border-default: rgba(232, 236, 234, 0.10);
  --cntx-border-strong: rgba(232, 236, 234, 0.18);
  --cntx-border-hair: rgba(255, 255, 255, 0.08);
  --cntx-border-focus: #2EC4BC;
  --cntx-border-selected: #2EC4BC;
  --cntx-action-primary: #2EC4BC;
  --cntx-action-primary-hover: #7FE0D9;
  --cntx-action-primary-active: #2BB8B0;
  --cntx-action-secondary-bg: #0E2224;
  --cntx-action-secondary-border: rgba(232, 236, 234, 0.10);
  --cntx-action-secondary-text: #E8EEEC;
  --cntx-accent-warm: #F06545;
  --cntx-accent-cyan: #2EC4BC;
  --cntx-highlight-warm: #F06545;
  --cntx-status-success-fg: #6EE7B7;
  --cntx-status-success-bg: rgba(16, 185, 129, 0.16);
  --cntx-status-warning-fg: #FBBF24;
  --cntx-status-warning-bg: rgba(245, 158, 11, 0.16);
  --cntx-status-danger-fg: #F87171;
  --cntx-status-danger-bg: rgba(248, 113, 113, 0.16);
  --cntx-status-info-fg: #38BDF8;
  --cntx-status-info-bg: rgba(14, 165, 233, 0.16);
  --cntx-focus-ring: 0 0 0 3px color-mix(in srgb, #2EC4BC 50%, transparent);
  --cntx-elevation-none: none;
  --cntx-elevation-subtle: 0 1px 2px rgba(0, 0, 0, 0.35);
  --cntx-elevation-raised: 0 8px 22px -14px rgba(0, 0, 0, 0.65);
  --cntx-elevation-overlay: 0 28px 60px -24px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.06);
  --cntx-shadow-elev: 0 28px 60px -24px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.06);
  --cntx-state-disabled-opacity: 0.5;
  --cntx-state-hover-lift: -1px;
  --cntx-logo-mark: #7FE0D9;
  --cntx-logo-x: #2EC4BC;
}


/**
 * Platform legacy → canonical semantic bridge.
 * Direction: legacy → canonical ONLY (never the inverse).
 * Cascade: primitives → semantic → compat → recipes → consumer.
 */
:root,
[data-theme="light"],
[data-theme="dark"],
html.dark,
.dark {
  --cntx-bg: var(--cntx-bg-canvas);
  --cntx-surface: var(--cntx-bg-surface);
  --cntx-primary: var(--cntx-action-primary);
  --cntx-primary-strong: var(--cntx-action-primary-hover);
  --cntx-text: var(--cntx-text-primary);
  --cntx-heading: var(--cntx-text-primary);
  --cntx-border: var(--cntx-border-default);
  --cntx-card-bg: var(--cntx-bg-surface);
  --cntx-card-border: var(--cntx-border-default);
  --cntx-muted-bg: var(--cntx-bg-muted);
  --cntx-surface-muted: var(--cntx-bg-muted);
  --cntx-header-bg: var(--cntx-bg-surface);
  --cntx-menu-bg: var(--cntx-bg-surface);
  --cntx-menu-border: var(--cntx-border-default);
  --cntx-menu-text: var(--cntx-text-muted);
  --cntx-menu-text-hover: var(--cntx-action-primary);
  --cntx-menu-hover-bg: var(--cntx-bg-hover);
  --cntx-tab-active: var(--cntx-accent-cyan);
  --cntx-table-row-bg: var(--cntx-bg-surface);
  --cntx-table-row-hover-bg: var(--cntx-bg-hover);
  /* Chrome derrière le radius TL du panneau = même surface que la sidebar (arrondi propre). */
  --cntx-app-main-bg: var(--cntx-bg-surface);
  --cntx-danger: var(--cntx-status-danger-fg);
  --cntx-success: var(--cntx-status-success-fg);
  --cntx-warning: var(--cntx-status-warning-fg);
  --cntx-info: var(--cntx-status-info-fg);
}


/* UI primitives — consume frozen type + density tokens */

.cntx-box {
  box-sizing: border-box;
}

.cntx-stack {
  display: flex;
  flex-direction: column;
  gap: var(--cntx-stack-gap, var(--cntx-density-gap));
}

.cntx-stack--row {
  flex-direction: row;
  align-items: center;
}

.cntx-stack--tight { --cntx-stack-gap: var(--cntx-space-2); }
.cntx-stack--loose { --cntx-stack-gap: var(--cntx-space-6); }

.cntx-text {
  margin: 0;
  font-family: var(--cntx-font-sans);
  font-size: var(--cntx-font-size-14);
  font-weight: var(--cntx-font-weight-regular);
  line-height: var(--cntx-font-leading-normal);
  letter-spacing: var(--cntx-font-tracking-normal);
  color: var(--cntx-text-primary);
}

.cntx-text--muted { color: var(--cntx-text-muted); }
.cntx-text--brand { color: var(--cntx-text-brand); }
.cntx-text--accent { color: var(--cntx-accent-warm); }
.cntx-text--disabled { color: var(--cntx-text-disabled); }

.cntx-text--display,
.cntx-text--h1,
.cntx-text--h2,
.cntx-text--h3,
.cntx-text--h4 {
  font-family: var(--cntx-font-display);
  font-weight: var(--cntx-font-weight-semibold);
}

.cntx-text--display {
  font-size: var(--cntx-font-size-40);
  line-height: var(--cntx-font-leading-tight);
  letter-spacing: var(--cntx-font-tracking-display);
}
.cntx-text--h1 {
  font-size: var(--cntx-font-size-32);
  line-height: var(--cntx-font-leading-tight);
  letter-spacing: var(--cntx-font-tracking-tight);
}
.cntx-text--h2 {
  font-size: var(--cntx-font-size-24);
  line-height: var(--cntx-font-leading-tight);
  letter-spacing: var(--cntx-font-tracking-tight);
}
.cntx-text--h3 {
  font-size: var(--cntx-font-size-20);
  line-height: var(--cntx-font-leading-snug);
  letter-spacing: var(--cntx-font-tracking-tight);
}
.cntx-text--h4 {
  font-size: var(--cntx-font-size-18);
  line-height: var(--cntx-font-leading-snug);
  letter-spacing: var(--cntx-font-tracking-tight);
}

.cntx-text--body-lg {
  font-size: var(--cntx-font-size-16);
  line-height: var(--cntx-font-leading-relaxed);
}
.cntx-text--body {
  font-size: var(--cntx-font-size-14);
  line-height: var(--cntx-font-leading-normal);
}
.cntx-text--body-sm {
  font-size: var(--cntx-font-size-13);
  line-height: var(--cntx-font-leading-normal);
}
.cntx-text--label {
  font-size: var(--cntx-font-size-13);
  font-weight: var(--cntx-font-weight-medium);
  line-height: var(--cntx-font-leading-snug);
}
.cntx-text--caption {
  font-size: var(--cntx-font-size-12);
  line-height: var(--cntx-font-leading-snug);
}
.cntx-text--meta {
  font-size: var(--cntx-font-size-11);
  font-weight: var(--cntx-font-weight-medium);
  line-height: var(--cntx-font-leading-snug);
  letter-spacing: var(--cntx-font-tracking-wide);
  text-transform: uppercase;
}

.cntx-text--sm { font-size: var(--cntx-font-size-13); }
.cntx-text--md { font-size: var(--cntx-font-size-14); }
.cntx-text--lg { font-size: var(--cntx-font-size-16); }

.cntx-icon {
  display: inline-block;
  width: var(--cntx-icon-md);
  height: var(--cntx-icon-md);
  flex-shrink: 0;
  vertical-align: -0.125em;
  stroke: currentColor;
  fill: none;
}
.cntx-icon--sm { width: var(--cntx-icon-sm); height: var(--cntx-icon-sm); }
.cntx-icon--lg { width: var(--cntx-icon-lg); height: var(--cntx-icon-lg); }

.cntx-divider {
  border: 0;
  border-top: var(--cntx-border-width-default) solid var(--cntx-border-default);
  margin: var(--cntx-space-4) 0;
}


/* Button — action.* only; heights from frozen control tokens */

.cntx-btn {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--cntx-space-2);
  min-height: var(--cntx-control-height);
  padding: 0 var(--cntx-space-3);
  border: var(--cntx-border-width-default) solid var(--cntx-border-default);
  border-radius: var(--cntx-radius-md);
  background: var(--cntx-action-secondary-bg);
  color: var(--cntx-action-secondary-text);
  font-family: var(--cntx-font-sans);
  font-size: var(--cntx-font-size-13);
  font-weight: var(--cntx-font-weight-semibold);
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  transition:
    transform var(--cntx-motion-base) var(--cntx-easing-standard),
    background var(--cntx-motion-base) var(--cntx-easing-standard),
    border-color var(--cntx-motion-base) var(--cntx-easing-standard),
    box-shadow var(--cntx-motion-base) var(--cntx-easing-standard),
    color var(--cntx-motion-base) var(--cntx-easing-standard),
    opacity var(--cntx-motion-base) var(--cntx-easing-standard);
}

.cntx-btn:hover:not(:disabled):not([aria-disabled="true"]):not(.is-loading) {
  transform: translateY(var(--cntx-state-hover-lift));
  border-color: color-mix(in srgb, var(--cntx-action-primary) 35%, var(--cntx-border-default));
  box-shadow: var(--cntx-elevation-raised);
}

.cntx-btn:active:not(:disabled):not([aria-disabled="true"]) {
  transform: translateY(0);
  box-shadow: none;
}

.cntx-btn:focus-visible {
  outline: none;
  box-shadow: var(--cntx-focus-ring);
}

.cntx-btn:disabled,
.cntx-btn[aria-disabled="true"] {
  opacity: var(--cntx-state-disabled-opacity);
  color: var(--cntx-text-disabled);
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.cntx-btn.is-loading {
  cursor: progress;
  opacity: 0.85;
  pointer-events: none;
}

.cntx-btn--primary {
  background: var(--cntx-action-primary);
  border-color: var(--cntx-action-primary);
  color: var(--cntx-text-on-action);
}

.cntx-btn--primary:hover:not(:disabled):not([aria-disabled="true"]):not(.is-loading) {
  background: var(--cntx-action-primary-hover);
  border-color: var(--cntx-action-primary-hover);
}

.cntx-btn--primary:active:not(:disabled):not([aria-disabled="true"]) {
  background: var(--cntx-action-primary-active);
  border-color: var(--cntx-action-primary-active);
}

.cntx-btn--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--cntx-text-muted);
}

.cntx-btn--ghost:hover:not(:disabled):not([aria-disabled="true"]) {
  background: var(--cntx-bg-hover);
  color: var(--cntx-text-brand);
  box-shadow: none;
  transform: none;
}

.cntx-btn--sm {
  min-height: var(--cntx-control-sm);
  padding: 0 var(--cntx-space-2);
  font-size: var(--cntx-font-size-12);
}

.cntx-btn--lg {
  min-height: var(--cntx-control-lg);
  padding: 0 var(--cntx-space-4);
  font-size: var(--cntx-font-size-14);
}

.cntx-btn__spinner {
  width: var(--cntx-icon-sm);
  height: var(--cntx-icon-sm);
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: var(--cntx-radius-pill);
  animation: cntx-spin var(--cntx-motion-slow) linear infinite;
}

@keyframes cntx-spin {
  to { transform: rotate(360deg); }
}


/* Input / field */

.cntx-field {
  display: flex;
  flex-direction: column;
  gap: var(--cntx-space-1);
}

.cntx-label {
  font-family: var(--cntx-font-sans);
  font-size: var(--cntx-font-size-13);
  font-weight: var(--cntx-font-weight-medium);
  line-height: var(--cntx-font-leading-snug);
  color: var(--cntx-text-primary);
}

.cntx-input,
.cntx-select,
.cntx-textarea {
  box-sizing: border-box;
  width: 100%;
  min-height: var(--cntx-control-height);
  padding: 0 var(--cntx-space-3);
  border: var(--cntx-border-width-default) solid var(--cntx-border-default);
  border-radius: var(--cntx-radius-md);
  background: var(--cntx-bg-surface);
  color: var(--cntx-text-primary);
  font-family: var(--cntx-font-sans);
  font-size: var(--cntx-font-size-14);
  line-height: var(--cntx-font-leading-normal);
  transition:
    border-color var(--cntx-motion-base) var(--cntx-easing-standard),
    box-shadow var(--cntx-motion-base) var(--cntx-easing-standard),
    background var(--cntx-motion-base) var(--cntx-easing-standard);
}

.cntx-textarea {
  min-height: calc(var(--cntx-control-lg) * 2.5);
  padding: var(--cntx-space-2) var(--cntx-space-3);
  resize: vertical;
}

.cntx-input::placeholder,
.cntx-textarea::placeholder {
  color: var(--cntx-text-muted);
}

.cntx-input:hover:not(:disabled):not([readonly]),
.cntx-select:hover:not(:disabled),
.cntx-textarea:hover:not(:disabled):not([readonly]) {
  border-color: var(--cntx-border-strong);
}

.cntx-input:focus,
.cntx-select:focus,
.cntx-textarea:focus {
  outline: none;
  border-color: var(--cntx-border-focus);
  box-shadow: var(--cntx-focus-ring);
}

.cntx-input:disabled,
.cntx-select:disabled,
.cntx-textarea:disabled {
  opacity: var(--cntx-state-disabled-opacity);
  cursor: not-allowed;
  background: var(--cntx-bg-muted);
  color: var(--cntx-text-disabled);
}

.cntx-input[readonly],
.cntx-textarea[readonly] {
  background: var(--cntx-bg-muted);
  cursor: default;
}

.cntx-input[aria-invalid="true"],
.cntx-textarea[aria-invalid="true"],
.cntx-select[aria-invalid="true"] {
  border-color: var(--cntx-status-danger-fg);
}

.cntx-input.is-filled:not(:placeholder-shown),
.cntx-textarea.is-filled:not(:placeholder-shown) {
  border-color: var(--cntx-border-strong);
}

.cntx-hint {
  font-family: var(--cntx-font-sans);
  font-size: var(--cntx-font-size-12);
  color: var(--cntx-text-muted);
}

.cntx-hint--error {
  color: var(--cntx-status-danger-fg);
}


/* Card */

.cntx-card {
  box-sizing: border-box;
  background: var(--cntx-bg-surface);
  border: var(--cntx-border-width-default) solid var(--cntx-border-default);
  border-radius: var(--cntx-radius-lg);
  padding: var(--cntx-space-4);
  color: var(--cntx-text-primary);
  box-shadow: var(--cntx-elevation-subtle);
  transition:
    border-color var(--cntx-motion-base) var(--cntx-easing-standard),
    box-shadow var(--cntx-motion-base) var(--cntx-easing-standard),
    background var(--cntx-motion-base) var(--cntx-easing-standard);
}

.cntx-card--elevated {
  box-shadow: var(--cntx-shadow-elev);
  border-color: var(--cntx-border-hair);
}

.cntx-card--hoverable {
  cursor: pointer;
}

.cntx-card--hoverable:hover {
  border-color: var(--cntx-border-strong);
  box-shadow: var(--cntx-elevation-raised);
}

.cntx-card--selected {
  border-color: var(--cntx-border-selected);
  background: var(--cntx-bg-selected);
  box-shadow: var(--cntx-elevation-subtle);
}

.cntx-card--disabled,
.cntx-card[aria-disabled="true"] {
  opacity: var(--cntx-state-disabled-opacity);
  pointer-events: none;
}

.cntx-card__title {
  margin: 0 0 var(--cntx-space-2);
  font-family: var(--cntx-font-display);
  font-size: var(--cntx-font-size-18);
  font-weight: var(--cntx-font-weight-semibold);
  letter-spacing: var(--cntx-font-tracking-tight);
  line-height: var(--cntx-font-leading-snug);
  color: var(--cntx-text-primary);
}

.cntx-card__body {
  margin: 0;
  font-family: var(--cntx-font-sans);
  font-size: var(--cntx-font-size-14);
  line-height: var(--cntx-font-leading-normal);
  color: var(--cntx-text-muted);
}

.cntx-card__footer {
  margin-top: var(--cntx-space-4);
  padding-top: var(--cntx-space-3);
  border-top: var(--cntx-border-width-default) solid var(--cntx-border-default);
  display: flex;
  gap: var(--cntx-space-2);
  align-items: center;
  flex-wrap: wrap;
}


/* Badge / Chip — status + accent.warm highlight; never CTA */

.cntx-badge,
.cntx-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--cntx-space-1);
  min-height: calc(var(--cntx-control-sm) - 4px);
  padding: 0 var(--cntx-space-2);
  border-radius: var(--cntx-radius-pill);
  border: var(--cntx-border-width-default) solid transparent;
  font-family: var(--cntx-font-sans);
  font-size: var(--cntx-font-size-12);
  font-weight: var(--cntx-font-weight-medium);
  line-height: 1.3;
  white-space: nowrap;
}

.cntx-badge--warm,
.cntx-chip--warm {
  color: var(--cntx-accent-warm);
  background: color-mix(in srgb, var(--cntx-accent-warm) 12%, transparent);
}

.cntx-badge--success,
.cntx-chip--success {
  color: var(--cntx-status-success-fg);
  background: var(--cntx-status-success-bg);
}

.cntx-badge--warning,
.cntx-chip--warning {
  color: var(--cntx-status-warning-fg);
  background: var(--cntx-status-warning-bg);
}

.cntx-badge--danger,
.cntx-chip--danger {
  color: var(--cntx-status-danger-fg);
  background: var(--cntx-status-danger-bg);
}

.cntx-badge--info,
.cntx-chip--info {
  color: var(--cntx-status-info-fg);
  background: var(--cntx-status-info-bg);
}

.cntx-badge--neutral,
.cntx-chip--neutral {
  color: var(--cntx-text-muted);
  background: var(--cntx-bg-muted);
  border-color: var(--cntx-border-default);
}

.cntx-chip {
  cursor: default;
}

.cntx-chip--interactive {
  cursor: pointer;
}

.cntx-chip--interactive:hover {
  border-color: var(--cntx-border-strong);
}

.cntx-chip--selected {
  background: var(--cntx-bg-selected);
  border-color: var(--cntx-border-selected);
  color: var(--cntx-text-brand);
}

.cntx-chip:focus-visible {
  outline: none;
  box-shadow: var(--cntx-focus-ring);
}


/* IconButton */

.cntx-icon-btn {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--cntx-control-height);
  height: var(--cntx-control-height);
  padding: 0;
  border: var(--cntx-border-width-default) solid var(--cntx-border-default);
  border-radius: var(--cntx-radius-md);
  background: var(--cntx-bg-surface);
  color: var(--cntx-text-muted);
  cursor: pointer;
  transition:
    background var(--cntx-motion-base) var(--cntx-easing-standard),
    border-color var(--cntx-motion-base) var(--cntx-easing-standard),
    color var(--cntx-motion-base) var(--cntx-easing-standard),
    box-shadow var(--cntx-motion-base) var(--cntx-easing-standard);
}

.cntx-icon-btn:hover:not(:disabled) {
  background: var(--cntx-bg-hover);
  color: var(--cntx-text-brand);
  border-color: var(--cntx-border-strong);
}

.cntx-icon-btn:focus-visible {
  outline: none;
  box-shadow: var(--cntx-focus-ring);
}

.cntx-icon-btn:disabled {
  opacity: var(--cntx-state-disabled-opacity);
  cursor: not-allowed;
}

.cntx-icon-btn--ghost {
  border-color: transparent;
  background: transparent;
}

.cntx-icon-btn--sm {
  width: var(--cntx-control-sm);
  height: var(--cntx-control-sm);
}

.cntx-icon-btn--lg {
  width: var(--cntx-control-lg);
  height: var(--cntx-control-lg);
}

.cntx-icon-btn svg,
.cntx-icon-btn .cntx-icon {
  width: var(--cntx-icon-md);
  height: var(--cntx-icon-md);
}


/* Checkbox + Switch */

.cntx-check {
  display: inline-flex;
  align-items: center;
  gap: var(--cntx-space-2);
  font-family: var(--cntx-font-sans);
  font-size: var(--cntx-font-size-14);
  color: var(--cntx-text-primary);
  cursor: pointer;
}

.cntx-check input {
  width: var(--cntx-icon-lg);
  height: var(--cntx-icon-lg);
  accent-color: var(--cntx-accent-cyan);
  cursor: pointer;
}

.cntx-check input:focus-visible {
  outline: none;
  box-shadow: var(--cntx-focus-ring);
  border-radius: var(--cntx-radius-sm);
}

.cntx-check input:disabled {
  opacity: var(--cntx-state-disabled-opacity);
  cursor: not-allowed;
}

.cntx-check:has(input:disabled) {
  color: var(--cntx-text-disabled);
  cursor: not-allowed;
}

.cntx-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 40px;
  height: 24px;
  flex-shrink: 0;
}

.cntx-switch input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.cntx-switch__track {
  position: absolute;
  inset: 0;
  background: var(--cntx-bg-muted);
  border: var(--cntx-border-width-default) solid var(--cntx-border-default);
  border-radius: var(--cntx-radius-pill);
  transition: background var(--cntx-motion-base) var(--cntx-easing-standard);
  cursor: pointer;
}

.cntx-switch__track::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: var(--cntx-radius-pill);
  background: var(--cntx-bg-surface);
  box-shadow: var(--cntx-elevation-subtle);
  transition: transform var(--cntx-motion-base) var(--cntx-easing-out);
}

.cntx-switch input:checked + .cntx-switch__track {
  background: var(--cntx-action-primary);
  border-color: var(--cntx-action-primary);
}

.cntx-switch input:checked + .cntx-switch__track::after {
  transform: translateX(16px);
}

.cntx-switch input:focus-visible + .cntx-switch__track {
  box-shadow: var(--cntx-focus-ring);
}

.cntx-switch input:disabled + .cntx-switch__track {
  opacity: var(--cntx-state-disabled-opacity);
  cursor: not-allowed;
}


/* Modal — CSS shell; focus-trap JS is consumer responsibility */

.cntx-modal-backdrop {
  position: fixed;
  inset: 0;
  background: color-mix(in srgb, var(--cntx-color-black) 45%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--cntx-space-4);
  z-index: 1000;
}

.cntx-modal {
  box-sizing: border-box;
  width: min(480px, 100%);
  max-height: min(90vh, 640px);
  overflow: auto;
  background: var(--cntx-bg-surface);
  color: var(--cntx-text-primary);
  border: var(--cntx-border-width-default) solid var(--cntx-border-default);
  border-radius: var(--cntx-radius-xl);
  box-shadow: var(--cntx-elevation-overlay);
  padding: var(--cntx-space-5);
}

.cntx-modal__title {
  margin: 0 0 var(--cntx-space-2);
  font-family: var(--cntx-font-display);
  font-size: var(--cntx-font-size-20);
  font-weight: var(--cntx-font-weight-semibold);
  letter-spacing: var(--cntx-font-tracking-tight);
}

.cntx-modal__body {
  margin: 0 0 var(--cntx-space-4);
  font-size: var(--cntx-font-size-14);
  color: var(--cntx-text-muted);
  line-height: var(--cntx-font-leading-normal);
}

.cntx-modal__footer {
  display: flex;
  gap: var(--cntx-space-2);
  justify-content: flex-end;
  flex-wrap: wrap;
}

/* Menu / Dropdown */

.cntx-menu {
  min-width: 180px;
  padding: var(--cntx-space-1);
  background: var(--cntx-bg-surface);
  border: var(--cntx-border-width-default) solid var(--cntx-border-default);
  border-radius: var(--cntx-radius-md);
  box-shadow: var(--cntx-elevation-overlay);
}

.cntx-menu__item {
  display: flex;
  align-items: center;
  gap: var(--cntx-space-2);
  min-height: var(--cntx-row-height);
  padding: 0 var(--cntx-space-3);
  border: 0;
  border-radius: var(--cntx-radius-sm);
  background: transparent;
  color: var(--cntx-text-primary);
  font-family: var(--cntx-font-sans);
  font-size: var(--cntx-font-size-14);
  width: 100%;
  text-align: left;
  cursor: pointer;
}

.cntx-menu__item:hover {
  background: var(--cntx-bg-hover);
}

.cntx-menu__item[aria-selected="true"],
.cntx-menu__item.is-selected {
  background: var(--cntx-bg-selected);
  color: var(--cntx-text-brand);
  font-weight: var(--cntx-font-weight-medium);
}

.cntx-menu__item:focus-visible {
  outline: none;
  box-shadow: var(--cntx-focus-ring);
}

.cntx-menu__item:disabled {
  opacity: var(--cntx-state-disabled-opacity);
  cursor: not-allowed;
}

/* Tooltip */

.cntx-tooltip {
  display: inline-block;
  max-width: 240px;
  padding: var(--cntx-space-1) var(--cntx-space-2);
  background: var(--cntx-bg-inverse);
  color: var(--cntx-text-on-inverse);
  font-family: var(--cntx-font-sans);
  font-size: var(--cntx-font-size-12);
  line-height: var(--cntx-font-leading-snug);
  border-radius: var(--cntx-radius-sm);
  box-shadow: var(--cntx-elevation-raised);
}

/* Table */

.cntx-table-wrap {
  overflow: auto;
  border: var(--cntx-border-width-default) solid var(--cntx-border-default);
  border-radius: var(--cntx-radius-lg);
  background: var(--cntx-bg-surface);
}

.cntx-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--cntx-font-sans);
  font-size: var(--cntx-font-size-14);
  color: var(--cntx-text-primary);
}

.cntx-table th,
.cntx-table td {
  text-align: left;
  padding: 0 var(--cntx-space-3);
  height: var(--cntx-row-height);
  border-bottom: var(--cntx-border-width-default) solid var(--cntx-border-default);
  vertical-align: middle;
}

.cntx-table th {
  font-size: var(--cntx-font-size-12);
  font-weight: var(--cntx-font-weight-semibold);
  color: var(--cntx-text-muted);
  background: var(--cntx-bg-muted);
  position: sticky;
  top: 0;
  z-index: 1;
}

.cntx-table tbody tr:hover td {
  background: var(--cntx-bg-hover);
}

.cntx-table tbody tr.is-selected td {
  background: var(--cntx-bg-selected);
}

[data-density="operate"] .cntx-table {
  font-size: var(--cntx-font-size-13);
}


/* Patterns — Form, Nav, Filters, Empty, Data table */

.cntx-form {
  display: flex;
  flex-direction: column;
  gap: var(--cntx-space-4);
}

.cntx-form__actions {
  display: flex;
  gap: var(--cntx-space-2);
  flex-wrap: wrap;
  padding-top: var(--cntx-space-2);
}

.cntx-nav {
  display: flex;
  align-items: center;
  gap: var(--cntx-space-2);
  flex-wrap: wrap;
  padding: var(--cntx-space-3) 0;
  border-bottom: var(--cntx-border-width-default) solid var(--cntx-border-hair);
}

.cntx-nav__brand {
  font-family: var(--cntx-font-display);
  font-weight: var(--cntx-font-weight-semibold);
  font-size: var(--cntx-font-size-18);
  letter-spacing: var(--cntx-font-tracking-tight);
  color: var(--cntx-text-brand);
  margin-right: auto;
}

.cntx-nav__item {
  display: inline-flex;
  align-items: center;
  min-height: var(--cntx-control-sm);
  padding: 0 var(--cntx-space-2);
  border-radius: var(--cntx-radius-sm);
  color: var(--cntx-text-muted);
  text-decoration: none;
  font-size: var(--cntx-font-size-13);
  font-weight: var(--cntx-font-weight-medium);
}

.cntx-nav__item:hover {
  background: var(--cntx-bg-hover);
  color: var(--cntx-text-brand);
}

.cntx-nav__item[aria-current="page"],
.cntx-nav__item.is-active {
  background: var(--cntx-bg-selected);
  color: var(--cntx-text-brand);
}

.cntx-side-nav {
  display: flex;
  flex-direction: column;
  gap: var(--cntx-space-1);
  padding: var(--cntx-space-2);
}

.cntx-side-nav__item {
  display: flex;
  align-items: center;
  gap: var(--cntx-space-2);
  min-height: var(--cntx-row-height);
  padding: 0 var(--cntx-space-3);
  border-radius: var(--cntx-radius-md);
  color: var(--cntx-text-muted);
  text-decoration: none;
  font-size: var(--cntx-font-size-14);
}

.cntx-side-nav__item:hover {
  background: var(--cntx-bg-hover);
}

.cntx-side-nav__item.is-active {
  background: var(--cntx-bg-selected);
  color: var(--cntx-text-brand);
  font-weight: var(--cntx-font-weight-semibold);
}

.cntx-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cntx-space-2);
  align-items: center;
}

.cntx-filters__search {
  flex: 1;
  min-width: 160px;
  max-width: 280px;
}

.cntx-empty {
  text-align: center;
  padding: var(--cntx-space-10) var(--cntx-space-4);
  border: var(--cntx-border-width-default) dashed var(--cntx-border-default);
  border-radius: var(--cntx-radius-lg);
  background: var(--cntx-bg-surface);
}

.cntx-empty__title {
  margin: var(--cntx-space-3) 0 var(--cntx-space-2);
  font-family: var(--cntx-font-display);
  font-size: var(--cntx-font-size-20);
  font-weight: var(--cntx-font-weight-semibold);
  letter-spacing: var(--cntx-font-tracking-tight);
}

.cntx-empty__body {
  margin: 0 0 var(--cntx-space-4);
  color: var(--cntx-text-muted);
  font-size: var(--cntx-font-size-14);
  max-width: 28em;
  margin-left: auto;
  margin-right: auto;
}

.cntx-data-table {
  display: flex;
  flex-direction: column;
  gap: var(--cntx-space-3);
}

.cntx-data-table__toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cntx-space-2);
  align-items: center;
  justify-content: space-between;
}

.cntx-data-table__pagination {
  display: flex;
  gap: var(--cntx-space-2);
  align-items: center;
  justify-content: flex-end;
  font-size: var(--cntx-font-size-13);
  color: var(--cntx-text-muted);
}


/* Product patterns — content-first */

.cntx-content-card {
  box-sizing: border-box;
  background: var(--cntx-bg-surface);
  border: var(--cntx-border-width-default) solid var(--cntx-border-default);
  border-radius: var(--cntx-radius-lg);
  padding: var(--cntx-space-4);
  box-shadow: var(--cntx-elevation-subtle);
  display: flex;
  flex-direction: column;
  gap: var(--cntx-space-2);
}

.cntx-content-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cntx-space-2);
  align-items: center;
}

.cntx-content-card__title {
  margin: 0;
  font-family: var(--cntx-font-display);
  font-size: var(--cntx-font-size-18);
  font-weight: var(--cntx-font-weight-semibold);
  letter-spacing: var(--cntx-font-tracking-tight);
  color: var(--cntx-text-primary);
}

.cntx-content-card__excerpt {
  margin: 0;
  font-size: var(--cntx-font-size-14);
  color: var(--cntx-text-muted);
  line-height: var(--cntx-font-leading-normal);
}

.cntx-content-card__actions {
  display: flex;
  gap: var(--cntx-space-2);
  margin-top: var(--cntx-space-2);
  flex-wrap: wrap;
}

/* Editor chrome */

.cntx-editor-chrome {
  display: flex;
  flex-direction: column;
  min-height: 320px;
  border: var(--cntx-border-width-default) solid var(--cntx-border-default);
  border-radius: var(--cntx-radius-lg);
  background: var(--cntx-bg-surface);
  overflow: hidden;
}

.cntx-editor-chrome__toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cntx-space-1);
  align-items: center;
  min-height: var(--cntx-control-lg);
  padding: var(--cntx-space-2) var(--cntx-space-3);
  border-bottom: var(--cntx-border-width-default) solid var(--cntx-border-default);
  background: var(--cntx-bg-muted);
}

.cntx-editor-chrome__body {
  display: grid;
  grid-template-columns: 1fr minmax(200px, 280px);
  flex: 1;
  min-height: 0;
}

@media (max-width: 720px) {
  .cntx-editor-chrome__body {
    grid-template-columns: 1fr;
  }
}

.cntx-editor-chrome__main {
  padding: var(--cntx-space-4);
  border-right: var(--cntx-border-width-default) solid var(--cntx-border-default);
}

.cntx-editor-chrome__panel {
  padding: var(--cntx-space-4);
  background: var(--cntx-bg-canvas);
  font-size: var(--cntx-font-size-13);
  color: var(--cntx-text-muted);
}

.cntx-editor-chrome__footer {
  display: flex;
  gap: var(--cntx-space-2);
  justify-content: flex-end;
  flex-wrap: wrap;
  padding: var(--cntx-space-3);
  border-top: var(--cntx-border-width-default) solid var(--cntx-border-default);
  background: var(--cntx-bg-surface);
  position: sticky;
  bottom: 0;
}

/* Calendar item */

.cntx-calendar-item {
  display: flex;
  flex-direction: column;
  gap: var(--cntx-space-1);
  min-height: var(--cntx-row-compact);
  padding: var(--cntx-space-2) var(--cntx-space-3);
  border-radius: var(--cntx-radius-md);
  border: var(--cntx-border-width-default) solid var(--cntx-border-default);
  background: var(--cntx-bg-surface);
  font-size: var(--cntx-font-size-13);
}

.cntx-calendar-item__time {
  font-size: var(--cntx-font-size-11);
  font-weight: var(--cntx-font-weight-medium);
  letter-spacing: var(--cntx-font-tracking-wide);
  text-transform: uppercase;
  color: var(--cntx-text-muted);
}

.cntx-calendar-item__title {
  font-weight: var(--cntx-font-weight-semibold);
  color: var(--cntx-text-primary);
}

.cntx-calendar-item__row {
  display: flex;
  gap: var(--cntx-space-2);
  align-items: center;
  flex-wrap: wrap;
}

/* Campaign status */

.cntx-campaign-status {
  display: inline-flex;
  align-items: center;
  gap: var(--cntx-space-2);
}

.cntx-campaign-status__bar {
  width: 72px;
  height: 6px;
  border-radius: var(--cntx-radius-pill);
  background: var(--cntx-bg-muted);
  overflow: hidden;
}

.cntx-campaign-status__fill {
  height: 100%;
  background: var(--cntx-action-primary);
  border-radius: var(--cntx-radius-pill);
}

.cntx-campaign-status__fill--success { background: var(--cntx-status-success-fg); }
.cntx-campaign-status__fill--warning { background: var(--cntx-status-warning-fg); }
.cntx-campaign-status__fill--danger { background: var(--cntx-status-danger-fg); }

/* Workspace selector */

.cntx-workspace-selector {
  display: inline-flex;
  flex-direction: column;
  gap: var(--cntx-space-1);
  min-width: 220px;
}

.cntx-workspace-selector__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cntx-space-2);
  min-height: var(--cntx-control-height);
  padding: 0 var(--cntx-space-3);
  border: var(--cntx-border-width-default) solid var(--cntx-border-default);
  border-radius: var(--cntx-radius-md);
  background: var(--cntx-bg-surface);
  color: var(--cntx-text-primary);
  font-family: var(--cntx-font-sans);
  font-size: var(--cntx-font-size-14);
  font-weight: var(--cntx-font-weight-medium);
  cursor: pointer;
}

.cntx-workspace-selector__trigger:hover {
  background: var(--cntx-bg-hover);
}

.cntx-workspace-selector__trigger:focus-visible {
  outline: none;
  box-shadow: var(--cntx-focus-ring);
}

.cntx-workspace-selector__list {
  border: var(--cntx-border-width-default) solid var(--cntx-border-default);
  border-radius: var(--cntx-radius-md);
  background: var(--cntx-bg-surface);
  box-shadow: var(--cntx-elevation-overlay);
  padding: var(--cntx-space-1);
}

.cntx-workspace-selector__item {
  display: flex;
  align-items: center;
  min-height: var(--cntx-row-height);
  padding: 0 var(--cntx-space-3);
  border-radius: var(--cntx-radius-sm);
  color: var(--cntx-text-muted);
  cursor: pointer;
  font-size: var(--cntx-font-size-14);
}

.cntx-workspace-selector__item:hover {
  background: var(--cntx-bg-hover);
}

.cntx-workspace-selector__item.is-active {
  background: var(--cntx-bg-selected);
  color: var(--cntx-text-brand);
  font-weight: var(--cntx-font-weight-semibold);
}