/* @goods/design-system — theme-static.css (vanilla CSS, no Tailwind) */
/* ─────────────────────────────────────────────────────────────────────
 * GENERATED by scripts/build-theme.ts — do not edit by hand.
 * Source: src/tokens/tokens.ts
 * Run `npm run build:theme` to regenerate.
 * ──────────────────────────────────────────────────────────────────── */

:root {
  /* ─── base ─── */
  --color-base-50: #faf9f7;
  --color-base-100: #f6f4f0;
  --color-base-200: #ebe8e2;
  --color-base-300: #ddd8d0;
  --color-base-400: #aba49c;
  --color-base-500: #7a746d;
  --color-base-600: #585450;
  --color-base-700: #44413e;
  --color-base-800: #2b2a28;
  --color-base-900: #1e1d1b;
  /* ─── text ─── */
  --color-text-primary: #1e1d1b;
  --color-text-secondary: #44413e;
  --color-text-tertiary: #7a746d;
  --color-text-muted: #aba49c;
  --color-text-placeholder: #c5bfb8;
  --color-text-inverse: #FFFFFF;
  /* ─── border ─── */
  --color-border-soft: #E5E3DE;
  --color-border-default: #D9D6CF;
  --color-border-strong: #C9C5BC;
  /* ─── surface ─── */
  --color-surface-canvas: #F5F3EF;
  --color-surface-canvas-alt: #EFEDE8;
  --color-surface-zone: #F7F5F1;
  --color-surface-card: #FFFFFF;
  --color-surface-rail: #F3F0EA;
  --color-surface-warm: #F5F0E8;
  --color-surface-warm-alt: #F8F7F4;
  --color-surface-risk: #FFFBF5;
  --color-surface-disabled: #D3D0CB;
  --color-surface-workbench: #1a1a1c;
  /* ─── ui ─── */
  --color-ui-background: #F7F4EF;
  --color-ui-foreground: #1e1d1b;
  --color-ui-card: #ffffff;
  --color-ui-card-foreground: #1e1d1b;
  --color-ui-popover: #ffffff;
  --color-ui-popover-foreground: #1e1d1b;
  --color-ui-primary: #1e1d1b;
  --color-ui-primary-foreground: #faf9f7;
  --color-ui-secondary: #eaecf3;
  --color-ui-secondary-foreground: #030213;
  --color-ui-muted: #ebe8e2;
  --color-ui-muted-foreground: #7a746d;
  --color-ui-accent: #e9ebef;
  --color-ui-accent-foreground: #030213;
  --color-ui-destructive: #cd3328;
  --color-ui-destructive-foreground: #ffffff;
  --color-ui-border: rgba(0, 0, 0, 0.1);
  --color-ui-input: transparent;
  --color-ui-input-background: #f6f4f0;
  --color-ui-switch-background: #cbced4;
  --color-ui-ring: #b3b3b3;
  /* ─── physical ─── */
  --color-physical-50: #f6f8f9;
  --color-physical-100: #e6f0f4;
  --color-physical-200: #c8e0ea;
  --color-physical-300: #9acbe0;
  --color-physical-400: #54aed4;
  --color-physical-500: #289bcd;
  --color-physical-600: #1985b3;
  --color-physical-700: #146a8f;
  --color-physical-800: #144e67;
  --color-physical-900: #103341;
  /* ─── human ─── */
  --color-human-50: #f9f6f8;
  --color-human-100: #f4e6ef;
  --color-human-200: #eac8dd;
  --color-human-300: #e09ac6;
  --color-human-400: #d454a5;
  --color-human-500: #cd2890;
  --color-human-600: #b3197a;
  --color-human-700: #8f1462;
  --color-human-800: #671448;
  --color-human-900: #41102f;
  /* ─── digital ─── */
  --color-digital-50: #f7f6f9;
  --color-digital-100: #ece6f4;
  --color-digital-200: #d6c8ea;
  --color-digital-300: #b79ae0;
  --color-digital-400: #8954d4;
  --color-digital-500: #6d28cd;
  --color-digital-600: #5919b3;
  --color-digital-700: #47148f;
  --color-digital-800: #361467;
  --color-digital-900: #251041;
  /* ─── success ─── */
  --color-success-50: #f6f9f7;
  --color-success-100: #e6f4ee;
  --color-success-200: #c8eada;
  --color-success-300: #9ae0bf;
  --color-success-400: #54d498;
  --color-success-500: #28cd80;
  --color-success-600: #19b36b;
  --color-success-700: #148f56;
  --color-success-800: #146740;
  --color-success-900: #10412a;
  /* ─── warning ─── */
  --color-warning-50: #f9f8f6;
  --color-warning-100: #f4efe6;
  --color-warning-200: #eaddc8;
  --color-warning-300: #e0c69a;
  --color-warning-400: #d4a554;
  --color-warning-500: #cd9028;
  --color-warning-600: #b37a19;
  --color-warning-700: #8f6214;
  --color-warning-800: #674814;
  --color-warning-900: #412f10;
  /* ─── danger ─── */
  --color-danger-50: #f9f6f6;
  --color-danger-100: #f4e7e6;
  --color-danger-200: #eacac8;
  --color-danger-300: #e09f9a;
  --color-danger-400: #d45c54;
  --color-danger-500: #cd3328;
  --color-danger-600: #b32419;
  --color-danger-700: #8f1d14;
  --color-danger-800: #671914;
  --color-danger-900: #411410;
  /* ─── info ─── */
  --color-info-50: #f6f7f9;
  --color-info-100: #e6ecf4;
  --color-info-200: #c8d6ea;
  --color-info-300: #9ab7e0;
  --color-info-400: #5489d4;
  --color-info-500: #286dcd;
  --color-info-600: #1959b3;
  --color-info-700: #14478f;
  --color-info-800: #143667;
  --color-info-900: #102541;
  /* ─── brand ─── */
  --color-brand-50: #F5F3FF;
  --color-brand-100: #EDE9FE;
  --color-brand-200: #DDD6FE;
  --color-brand-300: #C4B5FD;
  --color-brand-400: #A78BFA;
  --color-brand-500: #7C3AED;
  --color-brand-600: #6D28D9;
  --color-brand-700: #5B21B6;
  --color-brand-800: #4C1D95;
  --color-brand-900: #2E1065;
  /* ─── pillar ─── */
  --color-pillar-physical: #7A8699;
  --color-pillar-human: #E9A23B;
  --color-pillar-digital: #3B82F6;
  /* ─── surfaceState ─── */
  --color-surface-state-danger-bg: #FFF5F5;
  --color-surface-state-danger-border: #FECACA;
  --color-surface-state-danger-text: #B91C1C;
  --color-surface-state-success-bg: #F0FDF4;
  --color-surface-state-success-border: #BBF7D0;
  /* ─── aiToken ─── */
  --color-ai-token-background: #F4F1FF;
  --color-ai-token-signal: #7C6CFF;
  --color-ai-token-text: #6D28D9;
  /* ─── signalStatusToken ─── */
  --color-signal-status-token-disputed-bg: #FEE2E2;
  --color-signal-status-token-disputed-text: #991B1B;
  --color-signal-status-token-open-bg: #FEF9C3;
  --color-signal-status-token-open-text: #A16207;
  /* ─── patinaToken ─── */
  --color-patina-token-raw-border: #E5E3DE;
  --color-patina-token-raw-bg: #FFFFFF;
  --color-patina-token-touched-border: #DDD2BC;
  --color-patina-token-touched-bg: #F9F4EC;
  --color-patina-token-worked-border: #CBAE7A;
  --color-patina-token-worked-bg: #F5ECD6;
  --color-patina-token-deep-border: #B8943E;
  --color-patina-token-deep-bg: #F2E4C4;
  /* ─── categoryBadgeToken ─── */
  --color-category-badge-token-physical-bg: #ECEEF0;
  --color-category-badge-token-physical-text: #4A5668;
  --color-category-badge-token-physical-border: #4A5668;
  --color-category-badge-token-human-bg: #FDF3E3;
  --color-category-badge-token-human-text: #7A4A00;
  --color-category-badge-token-human-border: #7A4A00;
  --color-category-badge-token-digital-bg: #EAF0FB;
  --color-category-badge-token-digital-text: #1A3A7A;
  --color-category-badge-token-digital-border: #1A3A7A;
  --color-category-badge-token-business-bg: #fdf4ff;
  --color-category-badge-token-business-text: #7c3aed;
  --color-category-badge-token-business-border: #d8b4fe;
  --color-category-badge-token-type-observation-bg: #F5F3EF;
  --color-category-badge-token-type-observation-text: #78716C;
  --color-category-badge-token-type-inference-bg: #EFF6FF;
  --color-category-badge-token-type-inference-text: #2563EB;
  --color-category-badge-token-type-recommendation-bg: #F0FDF4;
  --color-category-badge-token-type-recommendation-text: #16A34A;
  /* ─── sidebar ─── */
  --color-sidebar-bg: #fbfbfb;
  --color-sidebar-foreground: #252525;
  --color-sidebar-primary: #030213;
  --color-sidebar-primary-foreground: #fbfbfb;
  --color-sidebar-accent: #f7f7f7;
  --color-sidebar-accent-foreground: #363636;
  --color-sidebar-border: #ebebeb;
  --color-sidebar-ring: #b3b3b3;
  /* ─── ribbon ─── */
  --color-ribbon-bg: #faf9f6;
  --color-ribbon-hover: #f0ece4;
  --color-ribbon-thread-bg: #f8f6f2;
  --color-ribbon-thread-hover: #f0ece4;
  --color-ribbon-thread-border: #ebe7df;
  /* ─── cardSurface ─── */
  --color-card-surface-raw-bg: #FFFFFF;
  --color-card-surface-raw-border: #E8E4DD;
  --color-card-surface-raw-detail: #FAF8F5;
  --color-card-surface-touched-bg-from: #FFFEFA;
  --color-card-surface-touched-bg-to: #FEFCF7;
  --color-card-surface-touched-border: #DDD4C0;
  --color-card-surface-touched-detail: #F8F5EF;
  --color-card-surface-worked-bg-from: #FFFBF2;
  --color-card-surface-worked-bg-to: #FDF8EC;
  --color-card-surface-worked-border: #CCBE96;
  --color-card-surface-worked-detail: #F5F0E5;
  --color-card-surface-deep-bg-from: #FFF8E8;
  --color-card-surface-deep-bg-to: #FDF3DC;
  --color-card-surface-deep-border: #B8A470;
  --color-card-surface-deep-detail: #EFE8D2;
  --color-card-surface-selected-ring: #94A3B8;
  --color-card-surface-nextstep: #8A7530;
  --color-card-surface-nextstep-bg: rgba(150,128,58,0.06);
  --color-card-surface-nextstep-border: rgba(150,128,58,0.1);
  /* ─── cardShadow ─── */
  --color-card-shadow-raw: 0 2px 6px rgba(0,0,0,0.15);
  --color-card-shadow-touched: 0 2px 8px rgba(0,0,0,0.25);
  --color-card-shadow-worked: 0 4px 14px rgba(0,0,0,0.25);
  --color-card-shadow-deep: 0 6px 20px rgba(0,0,0,0.25);
  --color-card-shadow-glow-touched: 0 0 8px rgba(200,170,100,0.06);
  --color-card-shadow-glow-worked: 0 0 14px rgba(200,170,100,0.1);
  --color-card-shadow-glow-deep: 0 0 24px rgba(200,170,100,0.14);
  --color-card-shadow-selected-glow: 0 0 0 4px rgba(138,150,170,0.08);
  --color-card-shadow-drag: 0 8px 20px rgba(0,0,0,0.28), 0 0 0 1px rgba(138,150,170,0.12);
  /* ─── cardCatch ─── */
  --color-card-catch-raw: linear-gradient(90deg, transparent 10%, rgba(255,255,255,0.06) 50%, transparent 90%);
  --color-card-catch-touched: linear-gradient(90deg, transparent 10%, rgba(255,255,255,0.06) 50%, transparent 90%);
  --color-card-catch-worked: linear-gradient(90deg, transparent 10%, rgba(255,240,200,0.06) 50%, transparent 90%);
  --color-card-catch-deep: linear-gradient(90deg, transparent 10%, rgba(255,240,200,0.1) 50%, transparent 90%);
  /* ─── cardFooter ─── */
  --color-card-footer-separator: rgba(0,0,0,0.15);
  --color-card-footer-inset: linear-gradient(180deg, rgba(0,0,0,0.04) 0%, transparent 100%);
  --color-card-footer-item-bg: rgba(255,255,255,0.02);
  --color-card-footer-section-bg: rgba(255,255,255,0.025);
  --color-card-footer-section-border: rgba(255,255,255,0.03);
  --color-card-footer-divider: rgba(255,255,255,0.04);
  /* ─── signalBand ─── */
  --color-signal-band-fix: #EF4444;
  --color-signal-band-tension: #F59E0B;
  --color-signal-band-gap: #8A8580;
  /* ─── drawer ─── */
  --color-drawer-bg: linear-gradient(175deg, #FFFBF2 0%, #FDF8EC 100%);
  --color-drawer-border: #DDD4C0;
  --color-drawer-recessed-bg: #F8F5EE;
  --color-drawer-recessed-inset: linear-gradient(to bottom, rgba(0,0,0,0.04), transparent);
  --color-drawer-catch-light: linear-gradient(90deg, transparent 10%, rgba(255,240,200,0.3) 50%, transparent 90%);
  --color-drawer-inset-shadow: linear-gradient(to bottom, rgba(0,0,0,0.03), transparent);
  --color-drawer-shadow: -8px 0 32px rgba(0,0,0,0.06), 0 0 14px rgba(200,170,100,0.06);
  --color-drawer-action-card-bg: rgba(255,255,255,0.6);
  --color-drawer-action-card-border: rgba(0,0,0,0.06);
  --color-drawer-action-card-shadow: inset 0 1px 0 rgba(255,255,255,0.8), 0 2px 6px rgba(0,0,0,0.04);
  /* ─── hitl ─── */
  --color-hitl-item-bg: #FFFFFF;
  --color-hitl-item-border: #F0ECE5;
  --color-hitl-item-text: #44403C;
  --color-hitl-check-border: #D6D3D1;
  --color-hitl-expanded-bg: #FFFFFF;
  --color-hitl-expanded-border: #E7E5E4;
  --color-hitl-verify-btn-bg: #1C1917;
  --color-hitl-verify-btn-text: #FFFFFF;
  --color-hitl-flag-btn-bg: #F0ECE5;
  --color-hitl-flag-btn-text: #78716C;
  --color-hitl-verified-bg: #F0FDF4;
  --color-hitl-verified-border: #BBF7D0;
  --color-hitl-verified-text: #15803D;
  --color-hitl-flagged-bg: #FFFBEB;
  --color-hitl-flagged-border: #FDE68A;
  --color-hitl-flagged-text: #92400E;
  --color-hitl-flagged-check: #D97706;
  --color-hitl-flagged-badge-bg: #FEF3C7;
  --color-hitl-flagged-badge-text: #92400E;
  --color-hitl-urgent-bg: #FFF5F5;
  --color-hitl-urgent-border: #FECACA;
  --color-hitl-risk-badge-bg: #FEE2E2;
  --color-hitl-risk-badge-text: #DC2626;
  --color-hitl-progress-bg: #FAF8F3;
  --color-hitl-progress-border: #F0ECE5;
  --color-hitl-progress-track: #F0ECE5;
  --color-hitl-progress-text: #78716C;
  --color-hitl-progress-bold: #1C1917;
  --color-hitl-complete-bg: #F0FDF4;
  --color-hitl-complete-text: #15803D;
  --color-hitl-reviewing: #D97706;
  --color-hitl-divider-light: rgba(255,255,255,0.7);
  --color-hitl-divider-dark: rgba(0,0,0,0.06);
  /* ─── designSystem ─── */
  --color-design-system-card-padding: 14px;
  --color-design-system-grid-gap: 18px;
  --color-design-system-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  --color-design-system-shadow-hover: 0 6px 20px rgba(0, 0, 0, 0.12);
}

.dark {
  /* ─── base ─── */
  --color-base-50: #1c1a17;
  --color-base-100: #1f1d1a;
  --color-base-200: #222019;
  --color-base-300: #2a2723;
  --color-base-400: #6b6560;
  --color-base-500: #a8a29c;
  --color-base-600: #c5bfb8;
  --color-base-700: #c5bfb8;
  --color-base-800: #edeae5;
  --color-base-900: #f0ede8;
  /* ─── text ─── */
  --color-text-primary: #edeae5;
  --color-text-secondary: #c5bfb8;
  --color-text-tertiary: #a8a29c;
  --color-text-muted: #686560;
  --color-text-placeholder: #3d3a36;
  --color-text-inverse: #FFFFFF;
  /* ─── border ─── */
  --color-border-soft: #2e2b27;
  --color-border-default: #3a3730;
  --color-border-strong: #4a4641;
  /* ─── surface ─── */
  --color-surface-canvas: #1c1a17;
  --color-surface-canvas-alt: #1f1d1a;
  --color-surface-zone: #222019;
  --color-surface-card: #2a2723;
  --color-surface-rail: #1f1d1a;
  --color-surface-warm: #2a2723;
  --color-surface-warm-alt: #222019;
  --color-surface-risk: #2a2723;
  --color-surface-disabled: #3a3730;
  --color-surface-workbench: #111113;
  /* ─── ui ─── */
  --color-ui-background: #1c1a17;
  --color-ui-foreground: #edeae5;
  --color-ui-card: #2a2723;
  --color-ui-card-foreground: #edeae5;
  --color-ui-popover: #332f2a;
  --color-ui-popover-foreground: #edeae5;
  --color-ui-primary: #edeae5;
  --color-ui-primary-foreground: #1c1a17;
  --color-ui-secondary: #2a2723;
  --color-ui-secondary-foreground: #edeae5;
  --color-ui-muted: #222019;
  --color-ui-muted-foreground: #a8a29c;
  --color-ui-accent: #2a2723;
  --color-ui-accent-foreground: #edeae5;
  --color-ui-destructive: #ef4444;
  --color-ui-destructive-foreground: #ffffff;
  --color-ui-border: #48443f;
  --color-ui-input: #2a2723;
  --color-ui-input-background: #222019;
  --color-ui-switch-background: #3a3730;
  --color-ui-ring: #4a4641;
  /* ─── physical ─── */
  --color-physical-50: #f6f8f9;
  --color-physical-100: #e6f0f4;
  --color-physical-200: #c8e0ea;
  --color-physical-300: #9acbe0;
  --color-physical-400: #54aed4;
  --color-physical-500: #289bcd;
  --color-physical-600: #1985b3;
  --color-physical-700: #146a8f;
  --color-physical-800: #144e67;
  --color-physical-900: #103341;
  /* ─── human ─── */
  --color-human-50: #f9f6f8;
  --color-human-100: #f4e6ef;
  --color-human-200: #eac8dd;
  --color-human-300: #e09ac6;
  --color-human-400: #d454a5;
  --color-human-500: #cd2890;
  --color-human-600: #b3197a;
  --color-human-700: #8f1462;
  --color-human-800: #671448;
  --color-human-900: #41102f;
  /* ─── digital ─── */
  --color-digital-50: #f7f6f9;
  --color-digital-100: #ece6f4;
  --color-digital-200: #d6c8ea;
  --color-digital-300: #b79ae0;
  --color-digital-400: #8954d4;
  --color-digital-500: #6d28cd;
  --color-digital-600: #5919b3;
  --color-digital-700: #47148f;
  --color-digital-800: #361467;
  --color-digital-900: #251041;
  /* ─── success ─── */
  --color-success-50: #f6f9f7;
  --color-success-100: #e6f4ee;
  --color-success-200: #c8eada;
  --color-success-300: #9ae0bf;
  --color-success-400: #54d498;
  --color-success-500: #28cd80;
  --color-success-600: #19b36b;
  --color-success-700: #148f56;
  --color-success-800: #146740;
  --color-success-900: #10412a;
  /* ─── warning ─── */
  --color-warning-50: #f9f8f6;
  --color-warning-100: #f4efe6;
  --color-warning-200: #eaddc8;
  --color-warning-300: #e0c69a;
  --color-warning-400: #d4a554;
  --color-warning-500: #cd9028;
  --color-warning-600: #b37a19;
  --color-warning-700: #8f6214;
  --color-warning-800: #674814;
  --color-warning-900: #412f10;
  /* ─── danger ─── */
  --color-danger-50: #f9f6f6;
  --color-danger-100: #f4e7e6;
  --color-danger-200: #eacac8;
  --color-danger-300: #e09f9a;
  --color-danger-400: #d45c54;
  --color-danger-500: #cd3328;
  --color-danger-600: #b32419;
  --color-danger-700: #8f1d14;
  --color-danger-800: #671914;
  --color-danger-900: #411410;
  /* ─── info ─── */
  --color-info-50: #f6f7f9;
  --color-info-100: #e6ecf4;
  --color-info-200: #c8d6ea;
  --color-info-300: #9ab7e0;
  --color-info-400: #5489d4;
  --color-info-500: #286dcd;
  --color-info-600: #1959b3;
  --color-info-700: #14478f;
  --color-info-800: #143667;
  --color-info-900: #102541;
  /* ─── brand ─── */
  --color-brand-50: #F5F3FF;
  --color-brand-100: #EDE9FE;
  --color-brand-200: #DDD6FE;
  --color-brand-300: #C4B5FD;
  --color-brand-400: #A78BFA;
  --color-brand-500: #7C3AED;
  --color-brand-600: #6D28D9;
  --color-brand-700: #5B21B6;
  --color-brand-800: #4C1D95;
  --color-brand-900: #2E1065;
  /* ─── pillar ─── */
  --color-pillar-physical: #9AAABF;
  --color-pillar-human: #E79A38;
  --color-pillar-digital: #5A8FE8;
  /* ─── surfaceState ─── */
  --color-surface-state-danger-bg: #1e1212;
  --color-surface-state-danger-border: #4a2020;
  --color-surface-state-danger-text: #F87171;
  --color-surface-state-success-bg: #0f2018;
  --color-surface-state-success-border: #1a4030;
  /* ─── aiToken ─── */
  --color-ai-token-background: #1e1a30;
  --color-ai-token-signal: #9B8AFF;
  --color-ai-token-text: #B4A4FF;
  /* ─── signalStatusToken ─── */
  --color-signal-status-token-disputed-bg: #2A1515;
  --color-signal-status-token-disputed-text: #FCA5A5;
  --color-signal-status-token-open-bg: #2A2010;
  --color-signal-status-token-open-text: #FCD34D;
  /* ─── patinaToken ─── */
  --color-patina-token-raw-border: #3A3730;
  --color-patina-token-raw-bg: #2A2723;
  --color-patina-token-touched-border: #4A4030;
  --color-patina-token-touched-bg: #302A20;
  --color-patina-token-worked-border: #6B5A30;
  --color-patina-token-worked-bg: #352D1A;
  --color-patina-token-deep-border: #8B7A30;
  --color-patina-token-deep-bg: #3A3018;
  /* ─── categoryBadgeToken ─── */
  --color-category-badge-token-physical-bg: #1E2227;
  --color-category-badge-token-physical-text: #8A96AA;
  --color-category-badge-token-physical-border: #4A5260;
  --color-category-badge-token-human-bg: #242008;
  --color-category-badge-token-human-text: #E79A38;
  --color-category-badge-token-human-border: #8A6020;
  --color-category-badge-token-digital-bg: #101B2E;
  --color-category-badge-token-digital-text: #5A8FE8;
  --color-category-badge-token-digital-border: #2E5490;
  --color-category-badge-token-business-bg: #2d1f3d;
  --color-category-badge-token-business-text: #c084fc;
  --color-category-badge-token-business-border: #6d28d9;
  --color-category-badge-token-type-observation-bg: #2A2723;
  --color-category-badge-token-type-observation-text: #A8A29E;
  --color-category-badge-token-type-inference-bg: #1E2D45;
  --color-category-badge-token-type-inference-text: #93C5FD;
  --color-category-badge-token-type-recommendation-bg: #14291E;
  --color-category-badge-token-type-recommendation-text: #86EFAC;
  /* ─── sidebar ─── */
  --color-sidebar-bg: #1f1d1a;
  --color-sidebar-foreground: #edeae5;
  --color-sidebar-primary: #edeae5;
  --color-sidebar-primary-foreground: #1c1a17;
  --color-sidebar-accent: #222019;
  --color-sidebar-accent-foreground: #edeae5;
  --color-sidebar-border: #2e2b27;
  --color-sidebar-ring: #4a4641;
  /* ─── ribbon ─── */
  --color-ribbon-bg: #232019;
  --color-ribbon-hover: #302c26;
  --color-ribbon-thread-bg: #262320;
  --color-ribbon-thread-hover: #302c26;
  --color-ribbon-thread-border: #3a3630;
  /* ─── cardSurface ─── */
  --color-card-surface-raw-bg: #2A2723;
  --color-card-surface-raw-border: #3A3730;
  --color-card-surface-raw-detail: rgba(0,0,0,0.08);
  --color-card-surface-touched-bg-from: #2E2B25;
  --color-card-surface-touched-bg-to: #2A2723;
  --color-card-surface-touched-border: #52493A;
  --color-card-surface-touched-detail: rgba(0,0,0,0.1);
  --color-card-surface-worked-bg-from: #302C25;
  --color-card-surface-worked-bg-to: #2C2924;
  --color-card-surface-worked-border: #6A5D42;
  --color-card-surface-worked-detail: rgba(0,0,0,0.1);
  --color-card-surface-deep-bg-from: #352F26;
  --color-card-surface-deep-bg-to: #302C25;
  --color-card-surface-deep-border: #7A6A48;
  --color-card-surface-deep-detail: rgba(0,0,0,0.12);
  --color-card-surface-selected-ring: #8A96AA;
  --color-card-surface-nextstep: #C8AA64;
  --color-card-surface-nextstep-bg: rgba(200,170,100,0.06);
  --color-card-surface-nextstep-border: rgba(200,170,100,0.08);
  /* ─── cardShadow ─── */
  --color-card-shadow-raw: 0 2px 6px rgba(0,0,0,0.4);
  --color-card-shadow-touched: 0 2px 8px rgba(0,0,0,0.5);
  --color-card-shadow-worked: 0 4px 14px rgba(0,0,0,0.5);
  --color-card-shadow-deep: 0 6px 20px rgba(0,0,0,0.5);
  --color-card-shadow-glow-touched: 0 0 8px rgba(200,170,100,0.04);
  --color-card-shadow-glow-worked: 0 0 14px rgba(200,170,100,0.06);
  --color-card-shadow-glow-deep: 0 0 24px rgba(200,170,100,0.08);
  --color-card-shadow-selected-glow: 0 0 0 4px rgba(138,150,170,0.15);
  --color-card-shadow-drag: 0 8px 20px rgba(0,0,0,0.5), 0 0 0 1px rgba(138,150,170,0.2);
  /* ─── cardCatch ─── */
  --color-card-catch-raw: linear-gradient(90deg, transparent 10%, rgba(255,255,255,0.02) 50%, transparent 90%);
  --color-card-catch-touched: linear-gradient(90deg, transparent 10%, rgba(255,255,255,0.02) 50%, transparent 90%);
  --color-card-catch-worked: linear-gradient(90deg, transparent 10%, rgba(255,240,200,0.03) 50%, transparent 90%);
  --color-card-catch-deep: linear-gradient(90deg, transparent 10%, rgba(255,240,200,0.05) 50%, transparent 90%);
  /* ─── cardFooter ─── */
  --color-card-footer-separator: rgba(255,255,255,0.08);
  --color-card-footer-inset: linear-gradient(180deg, rgba(0,0,0,0.1) 0%, transparent 100%);
  --color-card-footer-item-bg: rgba(255,255,255,0.03);
  --color-card-footer-section-bg: rgba(255,255,255,0.04);
  --color-card-footer-section-border: rgba(255,255,255,0.06);
  --color-card-footer-divider: rgba(255,255,255,0.06);
  /* ─── signalBand ─── */
  --color-signal-band-fix: #EF4444;
  --color-signal-band-tension: #F59E0B;
  --color-signal-band-gap: #8A8580;
  /* ─── drawer ─── */
  --color-drawer-bg: linear-gradient(175deg, #2C2924 0%, #282520 100%);
  --color-drawer-border: #3A3425;
  --color-drawer-recessed-bg: #242119;
  --color-drawer-recessed-inset: linear-gradient(to bottom, rgba(0,0,0,0.15), transparent);
  --color-drawer-catch-light: linear-gradient(90deg, transparent 10%, rgba(255,220,150,0.08) 50%, transparent 90%);
  --color-drawer-inset-shadow: linear-gradient(to bottom, rgba(0,0,0,0.12), transparent);
  --color-drawer-shadow: -8px 0 32px rgba(0,0,0,0.5), 0 0 14px rgba(200,170,100,0.04);
  --color-drawer-action-card-bg: rgba(255,255,255,0.025);
  --color-drawer-action-card-border: rgba(255,255,255,0.05);
  --color-drawer-action-card-shadow: inset 0 1px 0 rgba(255,255,255,0.03), 0 2px 8px rgba(0,0,0,0.15);
  /* ─── hitl ─── */
  --color-hitl-item-bg: #2A2723;
  --color-hitl-item-border: #2E2B27;
  --color-hitl-item-text: #C5BFB8;
  --color-hitl-check-border: #4A4641;
  --color-hitl-expanded-bg: #2A2723;
  --color-hitl-expanded-border: #3A3730;
  --color-hitl-verify-btn-bg: #EDEAE5;
  --color-hitl-verify-btn-text: #1C1A17;
  --color-hitl-flag-btn-bg: #332F2A;
  --color-hitl-flag-btn-text: #A8A29C;
  --color-hitl-verified-bg: rgba(34,197,94,0.06);
  --color-hitl-verified-border: rgba(34,197,94,0.12);
  --color-hitl-verified-text: #22C55E;
  --color-hitl-flagged-bg: rgba(146,64,14,0.08);
  --color-hitl-flagged-border: rgba(146,64,14,0.15);
  --color-hitl-flagged-text: #FBBF24;
  --color-hitl-flagged-check: #FBBF24;
  --color-hitl-flagged-badge-bg: rgba(146,64,14,0.15);
  --color-hitl-flagged-badge-text: #FBBF24;
  --color-hitl-urgent-bg: rgba(220,38,38,0.06);
  --color-hitl-urgent-border: rgba(220,38,38,0.12);
  --color-hitl-risk-badge-bg: rgba(220,38,38,0.15);
  --color-hitl-risk-badge-text: #FCA5A5;
  --color-hitl-progress-bg: #1A1815;
  --color-hitl-progress-border: #2E2B27;
  --color-hitl-progress-track: #2A2723;
  --color-hitl-progress-text: #6B6560;
  --color-hitl-progress-bold: #C5BFB8;
  --color-hitl-complete-bg: rgba(34,197,94,0.06);
  --color-hitl-complete-text: #22C55E;
  --color-hitl-reviewing: #FBBF24;
  --color-hitl-divider-light: rgba(255,255,255,0.04);
  --color-hitl-divider-dark: rgba(0,0,0,0.3);
  /* ─── designSystem ─── */
  --color-design-system-card-padding: 14px;
  --color-design-system-grid-gap: 18px;
  --color-design-system-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  --color-design-system-shadow-hover: 0 6px 20px rgba(0, 0, 0, 0.12);
}

/* ─── Aliases — legacy flat names → canonical structured names ───── */
:root {
  --color-surface-danger: var(--color-surface-state-danger-bg);
  --color-border-danger: var(--color-surface-state-danger-border);
  --color-text-danger: var(--color-surface-state-danger-text);
  --color-surface-success: var(--color-surface-state-success-bg);
  --color-border-success: var(--color-surface-state-success-border);
}

:root {
  /* ─── Typography ─────────────────────────────────────── */
  --font-heading: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;

  --font-size: 18px;
  --font-weight-semibold: 600;
  --font-weight-medium: 500;
  --font-weight-normal: 400;

  /* Type Scale — Major Third (1.25 ratio, base 18px) */
  --text-xs: 11.5px;
  --text-sm: 14.4px;
  --text-base: 18px;
  --text-lg: 22.5px;
  --text-xl: 28px;
  --text-2xl: 35px;
  --text-3xl: 44px;
  --text-4xl: 55px;

  /* ─── Semantic Type Scale ─────────────────────────────
   *
   *  token          size   weight  color token         used for
   *  ─────────────  ─────  ──────  ──────────────────  ──────────────────────────
   *  title-lg       18px   700     text-primary        Journey title, modal headings
   *  title          15px   700     text-primary        Stage names, panel headers
   *  body           14px   400     text-secondary      User goal, key actions, decisions
   *  body-strong    14px   600     text-primary        Claim statements, CTAs
   *  label          13px   500     text-secondary      Row labels, sidebar items
   *  caption        12px   400     text-tertiary       Pillar, owner, timestamps
   *  overline       11px   700     text-muted          Section headers (uppercase only)
   *
   * ────────────────────────────────────────────────────── */

  /* Font sizes */
  --text-size-title-lg:  18px;
  --text-size-title:     15px;
  --text-size-body:      14px;
  --text-size-label:     13px;
  --text-size-caption:   12px;
  --text-size-overline:  11px;

  /* Font weights */
  --text-weight-bold:    700;
  --text-weight-strong:  600;
  --text-weight-medium:  500;
  --text-weight-regular: 400;

  /* ─── Semantic Text Colors ────────────────────────────
   *  Derived from the warm stone base palette — change the
   *  base scale and all text colors update automatically.
   * ────────────────────────────────────────────────────── */

  /* ─── Base Neutral Palette — hue 30°, warmth 30% ─────── */

  /* ─── UI Token Colors ────────────────────────────────── */
  --background: #F7F4EF;
  --foreground: var(--color-base-900);
  --card: #ffffff;
  --card-foreground: var(--color-base-900);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.145 0 0);
  --primary: var(--color-base-900);
  --primary-foreground: var(--color-base-50);
  --secondary: oklch(0.95 0.0058 264.53);
  --secondary-foreground: #030213;
  --muted: var(--color-base-200);
  --muted-foreground: var(--color-base-500);
  --accent: #e9ebef;
  --accent-foreground: #030213;
  --destructive: #cd3328;
  --destructive-foreground: #ffffff;
  --border: rgba(0, 0, 0, 0.1);
  --input: transparent;
  --input-background: var(--color-base-100);
  --switch-background: #cbced4;
  --ring: oklch(0.708 0 0);
  --radius: 0.75rem;

  /* Charts */
  --chart-1: oklch(0.646 0.222 41.116);
  --chart-2: oklch(0.6 0.118 184.704);
  --chart-3: oklch(0.398 0.07 227.392);
  --chart-4: oklch(0.828 0.189 84.429);
  --chart-5: oklch(0.769 0.188 70.08);

  /* Sidebar */
  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.145 0 0);
  --sidebar-primary: #030213;
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.97 0 0);
  --sidebar-accent-foreground: oklch(0.205 0 0);
  --sidebar-border: oklch(0.922 0 0);
  --sidebar-ring: oklch(0.708 0 0);

  /* ─── Design System ──────────────────────────────────── */
  --design-card-padding: 14px;
  --design-grid-gap: 18px;
  --design-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  --design-shadow-hover: 0 6px 20px rgba(0, 0, 0, 0.12);

  /* ─── Activity Ribbon ──────────────────────────────── */
  --ribbon-bg: #faf9f6;
  --ribbon-hover: #f0ece4;
  --thread-bg: #f8f6f2;
  --thread-item-hover: #f0ece4;
  --thread-border: #ebe7df;

  /* ─── Semantic Color Palette ─────────────────────────── */

  /* Physical — hue 198° (teal-blue) */

  /* Human — hue 322° (magenta-pink) */

  /* Digital — hue 265° (violet-purple) */

  /* Success — hue 152° (rich green) */

  /* Warning — hue 38° (warm amber) */

  /* Danger — hue 4° (coral red) */

  /* Info — hue 215° (soft blue-gray) */

  /* ─── Semantic Mapping (convenience aliases) ─────────── */
  --color-status-hypothesis: var(--color-warning-500);
  --color-status-assumption: var(--color-info-500);
  --color-status-validated: var(--color-success-500);
  --color-status-disproven: var(--color-danger-500);
  --color-ai-signal: #7C6CFF;
  --color-ai-background: #F4F1FF;
  --color-ai-text: #6D28D9;

  /* ─── Signal status (experience signals drawer) ─────── */
  --color-signal-disputed-bg: #FEE2E2;
  --color-signal-disputed-text: #991B1B;
  --color-signal-open-bg: #FEF9C3;
  --color-signal-open-text: #A16207;

  /* ─── Patina (engagement-driven claim aging) ──────── */
  --color-patina-raw-border: #E5E3DE;
  --color-patina-raw-bg: #FFFFFF;
  --color-patina-touched-border: #DDD2BC;
  --color-patina-touched-bg: #F9F4EC;
  --color-patina-worked-border: #CBAE7A;
  --color-patina-worked-bg: #F5ECD6;
  --color-patina-deep-border: #B8943E;
  --color-patina-deep-bg: #F2E4C4;

  /* ─── PHD pillar accent colors ───────────────────────── */

  /* ─── PHD category badge pairs (bg + text) ──────────── */
  --color-badge-physical-bg:     #ECEEF0;
  --color-badge-physical-text:   #4A5668;
  --color-badge-physical-border: #4A5668;
  --color-badge-human-bg:        #FDF3E3;
  --color-badge-human-text:      #7A4A00;
  --color-badge-human-border:    #7A4A00;
  --color-badge-digital-bg:      #EAF0FB;
  --color-badge-digital-text:    #1A3A7A;
  --color-badge-digital-border:  #1A3A7A;
  --color-badge-business-bg:     #fdf4ff;
  --color-badge-business-text:   #7c3aed;
  --color-badge-business-border: #d8b4fe;
  --color-badge-type-observation-bg:   #F5F3EF;
  --color-badge-type-observation-text: #78716C;
  --color-badge-type-inference-bg:     #EFF6FF;
  --color-badge-type-inference-text:   #2563EB;
  --color-badge-type-recommendation-bg:   #F0FDF4;
  --color-badge-type-recommendation-text: #16A34A;

  /* ─── Badge palette — semantic color roles for inline badge maps ──
   *  Used in JourneyGrid ownership, data-type, effort, sensitivity, etc.
   *  Each role has bg/border/text triplets.
   * ────────────────────────────────────────────────────── */
  --badge-purple-bg:     rgba(139,92,246,0.1);   --badge-purple-border:     rgba(139,92,246,0.3);   --badge-purple-text:     #6D28D9;
  --badge-sky-bg:        rgba(14,165,233,0.1);   --badge-sky-border:        rgba(14,165,233,0.3);   --badge-sky-text:        #0369A1;
  --badge-green-bg:      rgba(16,185,129,0.1);   --badge-green-border:      rgba(16,185,129,0.3);   --badge-green-text:      #047857;
  --badge-amber-bg:      rgba(245,158,11,0.1);   --badge-amber-border:      rgba(245,158,11,0.3);   --badge-amber-text:      #B45309;
  --badge-red-bg:        rgba(239,68,68,0.1);    --badge-red-border:        rgba(239,68,68,0.25);   --badge-red-text:        #B91C1C;
  --badge-orange-bg:     rgba(249,115,22,0.1);   --badge-orange-border:     rgba(249,115,22,0.25);  --badge-orange-text:     #C2410C;
  --badge-fuchsia-bg:    rgba(217,70,239,0.1);   --badge-fuchsia-border:    rgba(217,70,239,0.3);   --badge-fuchsia-text:    #a21caf;
  --badge-slate-bg:      rgba(100,116,139,0.1);  --badge-slate-border:      rgba(100,116,139,0.3);  --badge-slate-text:      #475569;
  --badge-indigo-bg:     rgba(99,102,241,0.1);   --badge-indigo-border:     rgba(99,102,241,0.3);   --badge-indigo-text:     #4338CA;
  --badge-rose-bg:       rgba(244,63,94,0.1);    --badge-rose-border:       rgba(244,63,94,0.3);    --badge-rose-text:       #BE123C;
  --badge-emerald-deep-text: #065F46;
  /* Confidence status badges (JourneyGrid epistemic filters) */
  --badge-concern-bg:    rgba(239,68,68,0.07);   --badge-concern-border:    rgba(239,68,68,0.4);    --badge-concern-text:    #DC2626;
  --badge-testing-bg:    rgba(245,158,11,0.08);  --badge-testing-border:    rgba(245,158,11,0.4);   --badge-testing-text:    #B45309;
  --badge-confident-bg:  rgba(16,185,129,0.08);  --badge-confident-border:  rgba(16,185,129,0.4);   --badge-confident-text:  #047857;

  /* ─── Semantic state surfaces ────────────────────────── */

  /* ─── Surface tokens ─────────────────────────────────── */

  /* ─── Card patina tokens (light mode) ────────────────── */
  --color-card-raw-bg: #FFFFFF;
  --color-card-raw-border: #E8E4DD;
  --color-card-touched-bg-from: #FFFEFA;
  --color-card-touched-bg-to: #FEFCF7;
  --color-card-touched-border: #DDD4C0;
  --color-card-worked-bg-from: #FFFBF2;
  --color-card-worked-bg-to: #FDF8EC;
  --color-card-worked-border: #CCBE96;
  --color-card-deep-bg-from: #FFF8E8;
  --color-card-deep-bg-to: #FDF3DC;
  --color-card-deep-border: #B8A470;
  --color-card-detail-raw: #FAF8F5;
  --color-card-detail-touched: #F8F5EF;
  --color-card-detail-worked: #F5F0E5;
  --color-card-detail-deep: #EFE8D2;
  --color-card-selected-ring: #94A3B8;
  /* Card shadow system */
  --card-shadow-raw:        0 2px 6px rgba(0,0,0,0.15);
  --card-shadow-touched:    0 2px 8px rgba(0,0,0,0.25);
  --card-shadow-worked:     0 4px 14px rgba(0,0,0,0.25);
  --card-shadow-deep:       0 6px 20px rgba(0,0,0,0.25);
  --card-glow-touched:      0 0 8px rgba(200,170,100,0.06);
  --card-glow-worked:       0 0 14px rgba(200,170,100,0.1);
  --card-glow-deep:         0 0 24px rgba(200,170,100,0.14);
  --card-selected-glow:     0 0 0 4px rgba(138,150,170,0.08);
  --card-drag-shadow:       0 8px 20px rgba(0,0,0,0.28), 0 0 0 1px rgba(138,150,170,0.12);
  /* Card catch-light (warm gold for worked/deep, white sheen for others) */
  --card-catch-raw:         linear-gradient(90deg, transparent 10%, rgba(255,255,255,0.06) 50%, transparent 90%);
  --card-catch-touched:     linear-gradient(90deg, transparent 10%, rgba(255,255,255,0.06) 50%, transparent 90%);
  --card-catch-worked:      linear-gradient(90deg, transparent 10%, rgba(255,240,200,0.06) 50%, transparent 90%);
  --card-catch-deep:        linear-gradient(90deg, transparent 10%, rgba(255,240,200,0.1) 50%, transparent 90%);
  /* Card footer (insight bar / seam bar) */
  --card-footer-separator:  rgba(0,0,0,0.15);
  --card-footer-inset:      linear-gradient(180deg, rgba(0,0,0,0.04) 0%, transparent 100%);
  --card-footer-item-bg:    rgba(255,255,255,0.02);
  --card-footer-section-bg: rgba(255,255,255,0.025);
  --card-footer-section-border: rgba(255,255,255,0.03);
  --card-footer-divider:    rgba(255,255,255,0.04);
  --color-card-nextstep: #8A7530;
  --color-card-nextstep-bg: rgba(150,128,58,0.06);
  --color-card-nextstep-border: rgba(150,128,58,0.1);
  --color-signal-band-fix: #EF4444;
  --color-signal-band-tension: #F59E0B;
  --color-signal-band-gap: #8A8580;

  /* ─── Drawer material tokens ────────────────────────── */
  --drawer-bg: linear-gradient(175deg, #FFFBF2 0%, #FDF8EC 100%);
  --drawer-border: #DDD4C0;
  --drawer-recessed-bg: #F8F5EE;
  --drawer-recessed-inset: linear-gradient(to bottom, rgba(0,0,0,0.04), transparent);
  --drawer-catch-light: linear-gradient(90deg, transparent 10%, rgba(255,240,200,0.3) 50%, transparent 90%);
  --drawer-inset-shadow: linear-gradient(to bottom, rgba(0,0,0,0.03), transparent);
  --drawer-shadow: -8px 0 32px rgba(0,0,0,0.06), 0 0 14px rgba(200,170,100,0.06);
  --drawer-action-card-bg: rgba(255,255,255,0.6);
  --drawer-action-card-border: rgba(0,0,0,0.06);
  --drawer-action-card-shadow: inset 0 1px 0 rgba(255,255,255,0.8), 0 2px 6px rgba(0,0,0,0.04);
  /* ─── HITL checklist items ──────────────────────────── */
  --hitl-item-bg: #FFFFFF;
  --hitl-item-border: #F0ECE5;
  --hitl-item-text: #44403C;
  --hitl-check-border: #D6D3D1;
  --hitl-expanded-bg: #FFFFFF;
  --hitl-expanded-border: #E7E5E4;
  --hitl-verify-btn-bg: #1C1917;
  --hitl-verify-btn-text: #FFFFFF;
  --hitl-flag-btn-bg: #F0ECE5;
  --hitl-flag-btn-text: #78716C;
  --hitl-verified-bg: #F0FDF4;
  --hitl-verified-border: #BBF7D0;
  --hitl-verified-text: #15803D;
  --hitl-flagged-bg: #FFFBEB;
  --hitl-flagged-border: #FDE68A;
  --hitl-flagged-text: #92400E;
  --hitl-flagged-check: #D97706;
  --hitl-flagged-badge-bg: #FEF3C7;
  --hitl-flagged-badge-text: #92400E;
  --hitl-urgent-bg: #FFF5F5;
  --hitl-urgent-border: #FECACA;
  --hitl-risk-badge-bg: #FEE2E2;
  --hitl-risk-badge-text: #DC2626;
  --hitl-progress-bg: #FAF8F3;
  --hitl-progress-border: #F0ECE5;
  --hitl-progress-track: #F0ECE5;
  --hitl-progress-text: #78716C;
  --hitl-progress-bold: #1C1917;
  --hitl-progress-complete-bg: #F0FDF4;
  --hitl-progress-complete-text: #15803D;
  --color-hitl-reviewing: #D97706;
  --divider-light: rgba(255,255,255,0.7);
  --divider-dark: rgba(0,0,0,0.06);

  /* ─── Pill & Tag system ──────────────────────────────── */
  --pill-open-bg: rgba(138,133,128,0.04); --pill-open-text: #78716C; --pill-open-border: rgba(138,133,128,0.1); --pill-open-dot: #78716C;
  --pill-hyp-bg: rgba(124,58,237,0.06); --pill-hyp-text: #7C3AED; --pill-hyp-border: rgba(124,58,237,0.12); --pill-hyp-dot: #7C3AED;
  --pill-ass-bg: rgba(217,119,6,0.06); --pill-ass-text: #D97706; --pill-ass-border: rgba(217,119,6,0.12); --pill-ass-dot: #D97706;
  --pill-val-bg: rgba(34,197,94,0.06); --pill-val-text: #15803D; --pill-val-border: rgba(34,197,94,0.12); --pill-val-dot: #15803D;
  --pill-dis-bg: rgba(107,114,128,0.06); --pill-dis-text: #6B7280; --pill-dis-border: rgba(107,114,128,0.12); --pill-dis-dot: #6B7280;
  --pill-unknown-bg: rgba(138,133,128,0.06); --pill-unknown-text: #A8A29E; --pill-unknown-border: rgba(138,133,128,0.12);
  --pill-concern-bg: rgba(251,191,36,0.08); --pill-concern-text: #D97706; --pill-concern-border: rgba(251,191,36,0.18);
  --pill-testing-bg: rgba(96,165,250,0.08); --pill-testing-text: #3B82F6; --pill-testing-border: rgba(96,165,250,0.18);
  --pill-confident-bg: rgba(52,211,153,0.08); --pill-confident-text: #15803D; --pill-confident-border: rgba(52,211,153,0.18);
  --tag-physical-bg: rgba(74,86,104,0.06); --tag-physical-text: #4A5668; --tag-physical-border: rgba(74,86,104,0.1); --tag-physical-dot: #4A5668;
  --tag-human-bg: rgba(217,119,6,0.06); --tag-human-text: #92400E; --tag-human-border: rgba(217,119,6,0.1); --tag-human-dot: #D97706;
  --tag-digital-bg: rgba(59,130,246,0.06); --tag-digital-text: #1E40AF; --tag-digital-border: rgba(59,130,246,0.1); --tag-digital-dot: #3B82F6;
  --tag-conf-low-bg: rgba(220,38,38,0.05); --tag-conf-low-text: #DC2626; --tag-conf-low-border: rgba(220,38,38,0.1);
  --tag-conf-med-bg: rgba(217,119,6,0.05); --tag-conf-med-text: #D97706; --tag-conf-med-border: rgba(217,119,6,0.1);
  --tag-conf-high-bg: rgba(34,197,94,0.05); --tag-conf-high-text: #15803D; --tag-conf-high-border: rgba(34,197,94,0.1);
  --tag-role-bg: rgba(0,0,0,0.03); --tag-role-text: #78716C; --tag-role-border: rgba(0,0,0,0.06);
  --tag-risk-bg: #FEE2E2; --tag-risk-text: #DC2626;
  --tag-flagged-bg: #FEF3C7; --tag-flagged-text: #92400E;
  --tag-ai-bg: rgba(124,108,255,0.08); --tag-ai-text: #7C6CFF;
  --tag-you-bg: rgba(0,0,0,0.03); --tag-you-text: #A8A29E;
  --tag-evidence-bg: rgba(16,185,129,0.08); --tag-evidence-text: #059669; --tag-evidence-border: rgba(16,185,129,0.1);
  --tag-comment-bg: rgba(99,102,241,0.08); --tag-comment-text: #6366F1; --tag-comment-border: rgba(99,102,241,0.1);
  --tag-financial-bg: rgba(251,191,36,0.08); --tag-financial-text: #92400E; --tag-financial-border: rgba(251,191,36,0.12);
  --tag-operational-bg: rgba(96,165,250,0.08); --tag-operational-text: #1E40AF; --tag-operational-border: rgba(96,165,250,0.12);
  --tag-strategic-bg: rgba(192,132,252,0.08); --tag-strategic-text: #6B21A8; --tag-strategic-border: rgba(192,132,252,0.12);
  --count-default-bg: rgba(0,0,0,0.04); --count-default-text: #78716C;
  --count-warn-bg: rgba(251,191,36,0.12); --count-warn-text: #D97706;
  --count-success-bg: rgba(34,197,94,0.08); --count-success-text: #15803D;
  --pill-dropdown-bg: #FFFFFF; --pill-dropdown-border: #F0ECE5; --pill-dropdown-shadow: 0 4px 12px rgba(0,0,0,0.08);
  --pill-dropdown-item-hover: rgba(0,0,0,0.03); --pill-dropdown-item-active: rgba(0,0,0,0.04);
  --pill-dropdown-text: #44403C; --pill-dropdown-check: #15803D;

  /* ─── Evidence type icons ──────────────────────────── */
  --ev-icon-interview-bg: rgba(233,162,59,0.08);
  --ev-icon-interview-color: #B8860B;
  --ev-icon-analytics-bg: rgba(59,130,246,0.06);
  --ev-icon-analytics-color: #2563EB;
  --ev-icon-observation-bg: rgba(0,0,0,0.04);
  --ev-icon-observation-color: #78716C;
  --ev-icon-survey-bg: rgba(16,185,129,0.06);
  --ev-icon-survey-color: #059669;
  --ev-icon-feedback-bg: rgba(139,92,246,0.06);
  --ev-icon-feedback-color: #7C3AED;
  --ev-icon-default-bg: rgba(0,0,0,0.03);
  --ev-icon-default-color: var(--color-text-muted);

  /* ─── Timeline dot colors ──────────────────────────── */
  --tl-dot-evidence-border: #2563EB;
  --tl-dot-evidence-bg: rgba(37,99,235,0.06);
  --tl-dot-status-border: #22C55E;
  --tl-dot-status-bg: rgba(34,197,94,0.06);
  --tl-dot-edit-border: #D9943A;
  --tl-dot-edit-bg: rgba(217,148,58,0.06);

  --font-statement: 'Source Serif 4', serif;

  /* ─── Border tokens ──────────────────────────────────── */

  /* ─── Inverse text (on dark surfaces in light mode) ─── */

  /* ─── Interaction surfaces ─────────────────────────────
   *  Hover, active, and pressed states for interactive elements.
   *  Used across buttons, cards, list items.
   * ────────────────────────────────────────────────────── */
  --color-interaction-hover:        rgba(0,0,0,0.04);
  --color-interaction-active:       rgba(0,0,0,0.06);
  --color-interaction-hover-danger: rgba(220,38,38,0.08);
  --color-interaction-focus-ring:   #7C3AED;
  --color-interaction-shadow-sm:    0 2px 8px rgba(0,0,0,0.06);
  --color-interaction-shadow-md:    0 4px 12px rgba(0,0,0,0.15);
  --shadow-tab:                     0 1px 2px rgba(0,0,0,0.06);
  --shadow-dropdown:                0 4px 12px rgba(0,0,0,0.1);
  --color-ai-tint:                  rgba(124,108,255,0.06);
  --color-status-inprogress-tint:   rgba(13,148,136,0.02);
  --color-interaction-divider:      rgba(255,255,255,0.2);

  /* ─── Epistemic surface badges (bg / dot / text) ─────── */
  --color-epistemic-hyp-bg:   #F0EDE8;
  --color-epistemic-hyp-dot:  #7C9EBF;
  --color-epistemic-hyp-text: #2C2520;
  --color-epistemic-ass-bg:   #F0EDE8;
  --color-epistemic-ass-dot:  #D9943A;
  --color-epistemic-ass-text: #2C2520;
  --color-epistemic-val-bg:   #F0EDE8;
  --color-epistemic-val-dot:  #4DAB78;
  --color-epistemic-val-text: #2C2520;
  --color-epistemic-dis-bg:   #F0EDE8;
  --color-epistemic-dis-dot:  #C9C4C0;
  --color-epistemic-dis-text: #9A9590;
  --color-epistemic-open-bg:   #F0EDE8;
  --color-epistemic-open-dot:  #A8A29C;
  --color-epistemic-open-text: #6B6560;

  /* Epistemic badge borders + backgrounds (translucent tints) */
  --color-epistemic-open-border:  rgba(168,162,156,0.15);
  --color-epistemic-open-badge:   rgba(168,162,156,0.06);
  --color-epistemic-hyp-border:   rgba(168,85,247,0.18);
  --color-epistemic-hyp-badge:    rgba(168,85,247,0.08);
  --color-epistemic-ass-border:   rgba(251,191,36,0.18);
  --color-epistemic-ass-badge:    rgba(251,191,36,0.08);
  --color-epistemic-val-border:   rgba(52,211,153,0.18);
  --color-epistemic-val-badge:    rgba(52,211,153,0.08);
  --color-epistemic-dis-border:   rgba(248,113,113,0.18);
  --color-epistemic-dis-badge:    rgba(248,113,113,0.08);

  /* ─── Persona confidence: extracted (new state) ──────────── */
  /* Used in PersonaDrawer attribute confidence dots.
     Other confidence states reuse existing epistemic tokens:
       validated → --color-epistemic-val-dot (green)
       hypothesis → --color-epistemic-hyp-dot (blue)
       assumption → --color-epistemic-ass-dot (amber)
       ai-inferred → --color-ai-signal (violet)
       unknown → --color-epistemic-dis-dot (gray) */
  --color-epistemic-extracted:    #0d9488;
  --color-epistemic-extracted-bg: rgba(13,148,136,0.08);

  /* ─── HITL category accent colors ──────────────────────── */
  --color-hitl-claims:         #6366F1;
  --color-hitl-risk:           #EF4444;
  --color-hitl-accountability: #F97316;
  --color-hitl-lenses:         #0EA5E9;
  --color-hitl-alignment:      #8B5CF6;
  --color-hitl-evidence:       #D97706;

  /* ─── Discovery lens dot colors ────────────────────────── */
  --color-lens-feasible: #10B981;
  --color-lens-viable:   #F59E0B;
  --color-lens-usable:   #6366F1;
  --color-lens-valuable: #EC4899;

  /* ─── Dimension row colors ───────────────────────────── */
  --color-dim-thinking:    #3B82F6;
  --color-dim-trigger:     #CA8A04;
  --color-dim-doing:       #7C3AED;
  --color-dim-touchpoints: #6366F1;
  --color-dim-agent-role:  #9333EA;
  --color-dim-agent-mode:  #6D28D9;
  --color-dim-decision:    #059669;
  --color-dim-devices:     #475569;
  --color-dim-risk-type:   #EA580C;
  --color-dim-data-signals:#0D9488;
  --color-dim-opportunity: #059669;
  --color-dim-seams:       #E11D48;
  --color-dim-discovery:   #0D9488;
  --color-dim-feelings:    #DC2626;
  --color-dim-user-goal:   #8B5CF6;

  /* ─── Card radius tokens ───────────────────────────────── */
  --radius-card: 16px;
  --radius-card-sm: 14px;
  --radius-card-inner: 10px;
  --radius-pill: 20px;

  /* ─── Grid Density ───────────────────────────────────────── */
  --grid-cell-w:  320px;
  --grid-card-p:  12px 16px;
  --grid-card-gap: 10px;
}

.density-comfortable {
  --grid-cell-w:  320px;
  --grid-card-p:  12px 16px;
  --grid-card-gap: 10px;
}

.density-compact {
  --grid-cell-w:  240px;
  --grid-card-p:  8px 12px;
  --grid-card-gap: 6px;
}

.density-dense {
  --grid-cell-w:  180px;
  --grid-card-p:  5px 8px;
  --grid-card-gap: 4px;
}

:root {
  /* Legacy aliases (for existing components during migration) */
  --design-color-physical: var(--color-pillar-physical);
  --design-color-human: var(--color-pillar-human);
  --design-color-digital: var(--color-pillar-digital);
  --color-hypothesis: var(--color-warning-500);
  --color-inference: var(--color-digital-500);
  --color-risk: var(--color-danger-500);
  --color-background-warm: var(--color-base-50);
  --color-card-background: var(--color-base-50);
}

.dark {
  /* ─── Base scale — flipped to warm dark ──────────────────
   *  Light mode: base-50 = lightest, base-900 = darkest
   *  Dark mode:  base-50 = darkest (#1C1A17), base-900 = lightest (#F0EDE8)
   *  All semantic text/surface tokens built on this scale cascade automatically.
   * ────────────────────────────────────────────────────── */
  /* base-50–300: dark surface values (for bg-[var(--color-base-*)] backgrounds)
   * base-400–900: light text/icon values (for text-[var(--color-base-*)] usages)
   * Note: text semantic tokens (--color-text-*) are overridden explicitly below
   * and do NOT cascade from this scale in dark mode. */

  /* ─── Text tokens — explicit values (not derived from base scale) ──
   *  The base scale is now used for surface elevation, so text tokens
   *  must be declared directly here rather than cascading from base-*.
   * ────────────────────────────────────────────────────── */

  /* ─── Borders — explicit dark values (more visible than light mode) */

  /* ─── shadcn / Radix token overrides ─────────────────── */
  --background:         #1c1a17;  /* warm dark charcoal */
  --foreground:         #edeae5;
  --card:               #2a2723;
  --card-foreground:    #edeae5;
  --popover:            #332f2a;
  --popover-foreground: #edeae5;
  --primary:            #edeae5;
  --primary-foreground: #1c1a17;
  --secondary:          #2a2723;
  --secondary-foreground: #edeae5;
  --muted:              #222019;
  --muted-foreground:   #a8a29c;
  --accent:             #2a2723;
  --accent-foreground:  #edeae5;
  --destructive:        #ef4444;
  --destructive-foreground: #ffffff;
  --border:             #48443f;
  --input:              #2a2723;
  --input-background:   #222019;
  --ring:               #4a4641;

  /* ─── Interaction surfaces (dark) ──────────────────── */
  --color-interaction-hover:        rgba(255,255,255,0.06);
  --color-interaction-active:       rgba(255,255,255,0.10);
  --color-interaction-hover-danger: rgba(220,38,38,0.15);
  --color-interaction-focus-ring:   #a78bfa;
  --color-interaction-shadow-sm:    0 2px 8px rgba(0,0,0,0.3);
  --color-interaction-shadow-md:    0 4px 12px rgba(0,0,0,0.4);
  --shadow-tab:                     0 1px 2px rgba(0,0,0,0.2);
  --shadow-dropdown:                0 4px 12px rgba(0,0,0,0.35);
  --color-ai-tint:                  rgba(155,138,255,0.08);
  --color-status-inprogress-tint:   rgba(45,212,191,0.04);
  --color-interaction-divider:      rgba(255,255,255,0.1);

  /* ─── Badge palette (dark) ───────────────────────────── */
  --badge-purple-bg:     rgba(139,92,246,0.15);  --badge-purple-border:     rgba(139,92,246,0.35);  --badge-purple-text:     #c4b5fd;
  --badge-sky-bg:        rgba(14,165,233,0.15);  --badge-sky-border:        rgba(14,165,233,0.35);  --badge-sky-text:        #7dd3fc;
  --badge-green-bg:      rgba(16,185,129,0.15);  --badge-green-border:      rgba(16,185,129,0.35);  --badge-green-text:      #6ee7b7;
  --badge-amber-bg:      rgba(245,158,11,0.15);  --badge-amber-border:      rgba(245,158,11,0.35);  --badge-amber-text:      #fcd34d;
  --badge-red-bg:        rgba(239,68,68,0.15);   --badge-red-border:        rgba(239,68,68,0.3);    --badge-red-text:        #fca5a5;
  --badge-orange-bg:     rgba(249,115,22,0.15);  --badge-orange-border:     rgba(249,115,22,0.3);   --badge-orange-text:     #fdba74;
  --badge-fuchsia-bg:    rgba(217,70,239,0.15);  --badge-fuchsia-border:    rgba(217,70,239,0.35);  --badge-fuchsia-text:    #e879f9;
  --badge-slate-bg:      rgba(148,163,184,0.12); --badge-slate-border:      rgba(148,163,184,0.25); --badge-slate-text:      #94a3b8;
  --badge-indigo-bg:     rgba(99,102,241,0.15);  --badge-indigo-border:     rgba(99,102,241,0.35);  --badge-indigo-text:     #a5b4fc;
  --badge-rose-bg:       rgba(244,63,94,0.15);   --badge-rose-border:       rgba(244,63,94,0.35);   --badge-rose-text:       #fda4af;
  --badge-emerald-deep-text: #34d399;
  --badge-concern-bg:    rgba(239,68,68,0.12);   --badge-concern-border:    rgba(239,68,68,0.35);   --badge-concern-text:    #fca5a5;
  --badge-testing-bg:    rgba(245,158,11,0.12);  --badge-testing-border:    rgba(245,158,11,0.35);  --badge-testing-text:    #fcd34d;
  --badge-confident-bg:  rgba(16,185,129,0.12);  --badge-confident-border:  rgba(16,185,129,0.35);  --badge-confident-text:  #6ee7b7;

  /* ─── Activity Ribbon ──────────────────────────────── */
  --ribbon-bg: #232019;
  --ribbon-hover: #302c26;
  --thread-bg: #262320;
  --thread-item-hover: #302c26;
  --thread-border: #3a3630;

  --sidebar:                    #1f1d1a;
  --sidebar-foreground:         #edeae5;
  --sidebar-primary:            #edeae5;
  --sidebar-primary-foreground: #1c1a17;
  --sidebar-accent:             #222019;
  --sidebar-accent-foreground:  #edeae5;
  --sidebar-border:             #2e2b27;
  --sidebar-ring:               #4a4641;

  /* ─── Epistemic surface badges (dark tints) ─────────── */
  --color-epistemic-hyp-bg:   #1a2028;
  --color-epistemic-hyp-dot:  #7C9EBF;
  --color-epistemic-hyp-text: #a8bfd0;
  --color-epistemic-ass-bg:   #241e0f;
  --color-epistemic-ass-dot:  #D9943A;
  --color-epistemic-ass-text: #d4924a;
  --color-epistemic-val-bg:   #0f2018;
  --color-epistemic-val-dot:  #4DAB78;
  --color-epistemic-val-text: #5db87f;
  --color-epistemic-dis-bg:   #1e1c1a;
  --color-epistemic-dis-dot:  #6b6560;
  --color-epistemic-dis-text: #6b6560;
  --color-epistemic-open-bg:   #201e1c;
  --color-epistemic-open-dot:  #6b6560;
  --color-epistemic-open-text: #6b6560;

  /* Epistemic badge borders + backgrounds (dark tints) */
  --color-epistemic-open-border:  rgba(107,101,96,0.2);
  --color-epistemic-open-badge:   rgba(107,101,96,0.08);
  --color-epistemic-hyp-border:   rgba(124,158,191,0.2);
  --color-epistemic-hyp-badge:    rgba(124,158,191,0.08);
  --color-epistemic-ass-border:   rgba(217,148,58,0.2);
  --color-epistemic-ass-badge:    rgba(217,148,58,0.08);
  --color-epistemic-val-border:   rgba(77,171,120,0.2);
  --color-epistemic-val-badge:    rgba(77,171,120,0.08);
  --color-epistemic-dis-border:   rgba(107,101,96,0.2);
  --color-epistemic-dis-badge:    rgba(107,101,96,0.08);

  /* ─── Persona confidence: extracted (dark) ──────────────── */
  --color-epistemic-extracted:    #2dd4bf;
  --color-epistemic-extracted-bg: rgba(45,212,191,0.12);

  /* ─── AI token ──────────────────────────────────────── */
  --color-ai-background: #1e1a30;
  --color-ai-signal: #9B8AFF;
  --color-ai-text: #B4A4FF;

  /* ─── Signal status (dark — muted backgrounds, vivid text) */
  --color-signal-disputed-bg: #2A1515;
  --color-signal-disputed-text: #FCA5A5;
  --color-signal-open-bg: #2A2010;
  --color-signal-open-text: #FCD34D;

  /* ─── Patina (dark — warm tints on dark card surface) ── */
  --color-patina-raw-border: #3A3730;
  --color-patina-raw-bg: #2A2723;
  --color-patina-touched-border: #4A4030;
  --color-patina-touched-bg: #302A20;
  --color-patina-worked-border: #6B5A30;
  --color-patina-worked-bg: #352D1A;
  --color-patina-deep-border: #8B7A30;
  --color-patina-deep-bg: #3A3018;

  /* ─── PHD pillar accent colors (brightened for dark bg) */

  /* ─── PHD category badge pairs (dark tints) ─────────── */
  --color-badge-physical-bg:     #1E2227;
  --color-badge-physical-text:   #8A96AA;
  --color-badge-physical-border: #4A5260;
  --color-badge-human-bg:        #242008;
  --color-badge-human-text:      #E79A38;
  --color-badge-human-border:    #8A6020;
  --color-badge-digital-bg:      #101B2E;
  --color-badge-digital-text:    #5A8FE8;
  --color-badge-digital-border:  #2E5490;
  --color-badge-business-bg:     #2d1f3d;
  --color-badge-business-text:   #c084fc;
  --color-badge-business-border: #6d28d9;
  --color-badge-type-observation-bg:   #2A2723;
  --color-badge-type-observation-text: #A8A29E;
  --color-badge-type-inference-bg:     #1E2D45;
  --color-badge-type-inference-text:   #93C5FD;
  --color-badge-type-recommendation-bg:   #14291E;
  --color-badge-type-recommendation-text: #86EFAC;

  /* ─── Semantic state surfaces ───────────────────────── */

  /* ─── Surface tokens ─────────────────────────────────── */

  /* ─── Card patina tokens (dark mode) ─────────────────── */
  --color-card-raw-bg: #2A2723;
  --color-card-raw-border: #3A3730;
  --color-card-touched-bg-from: #2E2B25;
  --color-card-touched-bg-to: #2A2723;
  --color-card-touched-border: #52493A;
  --color-card-worked-bg-from: #302C25;
  --color-card-worked-bg-to: #2C2924;
  --color-card-worked-border: #6A5D42;
  --color-card-deep-bg-from: #352F26;
  --color-card-deep-bg-to: #302C25;
  --color-card-deep-border: #7A6A48;
  --color-card-detail-raw: rgba(0,0,0,0.08);
  --color-card-detail-touched: rgba(0,0,0,0.1);
  --color-card-detail-worked: rgba(0,0,0,0.1);
  --color-card-detail-deep: rgba(0,0,0,0.12);
  --color-card-selected-ring: #8A96AA;
  /* Card shadow system (dark) */
  --card-shadow-raw:        0 2px 6px rgba(0,0,0,0.4);
  --card-shadow-touched:    0 2px 8px rgba(0,0,0,0.5);
  --card-shadow-worked:     0 4px 14px rgba(0,0,0,0.5);
  --card-shadow-deep:       0 6px 20px rgba(0,0,0,0.5);
  --card-glow-touched:      0 0 8px rgba(200,170,100,0.04);
  --card-glow-worked:       0 0 14px rgba(200,170,100,0.06);
  --card-glow-deep:         0 0 24px rgba(200,170,100,0.08);
  --card-selected-glow:     0 0 0 4px rgba(138,150,170,0.15);
  --card-drag-shadow:       0 8px 20px rgba(0,0,0,0.5), 0 0 0 1px rgba(138,150,170,0.2);
  --card-catch-raw:         linear-gradient(90deg, transparent 10%, rgba(255,255,255,0.02) 50%, transparent 90%);
  --card-catch-touched:     linear-gradient(90deg, transparent 10%, rgba(255,255,255,0.02) 50%, transparent 90%);
  --card-catch-worked:      linear-gradient(90deg, transparent 10%, rgba(255,240,200,0.03) 50%, transparent 90%);
  --card-catch-deep:        linear-gradient(90deg, transparent 10%, rgba(255,240,200,0.05) 50%, transparent 90%);
  --card-footer-separator:  rgba(255,255,255,0.08);
  --card-footer-inset:      linear-gradient(180deg, rgba(0,0,0,0.1) 0%, transparent 100%);
  --card-footer-item-bg:    rgba(255,255,255,0.03);
  --card-footer-section-bg: rgba(255,255,255,0.04);
  --card-footer-section-border: rgba(255,255,255,0.06);
  --card-footer-divider:    rgba(255,255,255,0.06);
  --color-card-nextstep: #C8AA64;
  --color-card-nextstep-bg: rgba(200,170,100,0.06);
  --color-card-nextstep-border: rgba(200,170,100,0.08);

  /* ─── Drawer material tokens ────────────────────────── */
  --drawer-bg: linear-gradient(175deg, #2C2924 0%, #282520 100%);
  --drawer-border: #3A3425;
  --drawer-recessed-bg: #242119;
  --drawer-recessed-inset: linear-gradient(to bottom, rgba(0,0,0,0.15), transparent);
  --drawer-catch-light: linear-gradient(90deg, transparent 10%, rgba(255,220,150,0.08) 50%, transparent 90%);
  --drawer-inset-shadow: linear-gradient(to bottom, rgba(0,0,0,0.12), transparent);
  --drawer-shadow: -8px 0 32px rgba(0,0,0,0.5), 0 0 14px rgba(200,170,100,0.04);
  --drawer-action-card-bg: rgba(255,255,255,0.025);
  --drawer-action-card-border: rgba(255,255,255,0.05);
  --drawer-action-card-shadow: inset 0 1px 0 rgba(255,255,255,0.03), 0 2px 8px rgba(0,0,0,0.15);
  /* ─── HITL checklist items ──────────────────────────── */
  --hitl-item-bg: #2A2723;
  --hitl-item-border: #2E2B27;
  --hitl-item-text: #C5BFB8;
  --hitl-check-border: #4A4641;
  --hitl-expanded-bg: #2A2723;
  --hitl-expanded-border: #3A3730;
  --hitl-verify-btn-bg: #EDEAE5;
  --hitl-verify-btn-text: #1C1A17;
  --hitl-flag-btn-bg: #332F2A;
  --hitl-flag-btn-text: #A8A29C;
  --hitl-verified-bg: rgba(34,197,94,0.06);
  --hitl-verified-border: rgba(34,197,94,0.12);
  --hitl-verified-text: #22C55E;
  --hitl-flagged-bg: rgba(146,64,14,0.08);
  --hitl-flagged-border: rgba(146,64,14,0.15);
  --hitl-flagged-text: #FBBF24;
  --hitl-flagged-check: #FBBF24;
  --hitl-flagged-badge-bg: rgba(146,64,14,0.15);
  --hitl-flagged-badge-text: #FBBF24;
  --hitl-urgent-bg: rgba(220,38,38,0.06);
  --hitl-urgent-border: rgba(220,38,38,0.12);
  --hitl-risk-badge-bg: rgba(220,38,38,0.15);
  --hitl-risk-badge-text: #FCA5A5;
  --hitl-progress-bg: #1A1815;
  --hitl-progress-border: #2E2B27;
  --hitl-progress-track: #2A2723;
  --hitl-progress-text: #6B6560;
  --hitl-progress-bold: #C5BFB8;
  --hitl-progress-complete-bg: rgba(34,197,94,0.06);
  --hitl-progress-complete-text: #22C55E;
  --color-hitl-reviewing: #FBBF24;
  --divider-light: rgba(255,255,255,0.04);
  --divider-dark: rgba(0,0,0,0.3);

  /* ─── Pill & Tag system ──────────────────────────────── */
  --pill-open-bg: rgba(138,133,128,0.08); --pill-open-text: #A8A29E; --pill-open-border: rgba(138,133,128,0.15); --pill-open-dot: #A8A29E;
  --pill-hyp-bg: rgba(124,58,237,0.1); --pill-hyp-text: #A78BFA; --pill-hyp-border: rgba(124,58,237,0.2); --pill-hyp-dot: #A78BFA;
  --pill-ass-bg: rgba(217,119,6,0.1); --pill-ass-text: #FBBF24; --pill-ass-border: rgba(217,119,6,0.2); --pill-ass-dot: #FBBF24;
  --pill-val-bg: rgba(34,197,94,0.08); --pill-val-text: #34D399; --pill-val-border: rgba(34,197,94,0.15); --pill-val-dot: #34D399;
  --pill-dis-bg: rgba(107,114,128,0.08); --pill-dis-text: #9CA3AF; --pill-dis-border: rgba(107,114,128,0.15); --pill-dis-dot: #9CA3AF;
  --pill-unknown-bg: rgba(138,133,128,0.08); --pill-unknown-text: #6B6560; --pill-unknown-border: rgba(138,133,128,0.15);
  --pill-concern-bg: rgba(251,191,36,0.1); --pill-concern-text: #FBBF24; --pill-concern-border: rgba(251,191,36,0.2);
  --pill-testing-bg: rgba(96,165,250,0.1); --pill-testing-text: #60A5FA; --pill-testing-border: rgba(96,165,250,0.2);
  --pill-confident-bg: rgba(52,211,153,0.1); --pill-confident-text: #34D399; --pill-confident-border: rgba(52,211,153,0.15);
  --tag-physical-bg: rgba(74,86,104,0.15); --tag-physical-text: #8A96AA; --tag-physical-border: rgba(74,86,104,0.2); --tag-physical-dot: #8A96AA;
  --tag-human-bg: rgba(217,119,6,0.1); --tag-human-text: #FBBF24; --tag-human-border: rgba(217,119,6,0.15); --tag-human-dot: #FBBF24;
  --tag-digital-bg: rgba(59,130,246,0.1); --tag-digital-text: #60A5FA; --tag-digital-border: rgba(59,130,246,0.15); --tag-digital-dot: #60A5FA;
  --tag-conf-low-bg: rgba(220,38,38,0.08); --tag-conf-low-text: #FCA5A5; --tag-conf-low-border: rgba(220,38,38,0.12);
  --tag-conf-med-bg: rgba(217,119,6,0.08); --tag-conf-med-text: #FBBF24; --tag-conf-med-border: rgba(217,119,6,0.12);
  --tag-conf-high-bg: rgba(34,197,94,0.08); --tag-conf-high-text: #34D399; --tag-conf-high-border: rgba(34,197,94,0.12);
  --tag-role-bg: rgba(255,255,255,0.04); --tag-role-text: #A8A29C; --tag-role-border: rgba(255,255,255,0.06);
  --tag-risk-bg: rgba(220,38,38,0.15); --tag-risk-text: #FCA5A5;
  --tag-flagged-bg: rgba(146,64,14,0.15); --tag-flagged-text: #FBBF24;
  --tag-ai-bg: rgba(124,108,255,0.12); --tag-ai-text: #A78BFA;
  --tag-you-bg: rgba(255,255,255,0.04); --tag-you-text: #6B6560;
  --tag-evidence-bg: rgba(16,185,129,0.1); --tag-evidence-text: #34D399; --tag-evidence-border: rgba(16,185,129,0.15);
  --tag-comment-bg: rgba(99,102,241,0.1); --tag-comment-text: #818CF8; --tag-comment-border: rgba(99,102,241,0.15);
  --tag-financial-bg: rgba(251,191,36,0.08); --tag-financial-text: #FBBF24; --tag-financial-border: rgba(251,191,36,0.12);
  --tag-operational-bg: rgba(96,165,250,0.08); --tag-operational-text: #60A5FA; --tag-operational-border: rgba(96,165,250,0.12);
  --tag-strategic-bg: rgba(192,132,252,0.08); --tag-strategic-text: #C4B5FD; --tag-strategic-border: rgba(192,132,252,0.12);
  --count-default-bg: rgba(255,255,255,0.06); --count-default-text: #6B6560;
  --count-warn-bg: rgba(251,191,36,0.12); --count-warn-text: #FBBF24;
  --count-success-bg: rgba(34,197,94,0.08); --count-success-text: #34D399;
  --pill-dropdown-bg: #2A2723; --pill-dropdown-border: #3A3730; --pill-dropdown-shadow: 0 4px 12px rgba(0,0,0,0.25);
  --pill-dropdown-item-hover: rgba(255,255,255,0.04); --pill-dropdown-item-active: rgba(255,255,255,0.06);
  --pill-dropdown-text: #C5BFB8; --pill-dropdown-check: #34D399;

  /* ─── Evidence type icons ──────────────────────────── */
  --ev-icon-interview-bg: rgba(233,162,59,0.08);
  --ev-icon-interview-color: #E9A23B;
  --ev-icon-analytics-bg: rgba(59,130,246,0.08);
  --ev-icon-analytics-color: #60A5FA;
  --ev-icon-observation-bg: rgba(168,162,156,0.08);
  --ev-icon-observation-color: #A8A29C;
  --ev-icon-survey-bg: rgba(16,185,129,0.08);
  --ev-icon-survey-color: #34D399;
  --ev-icon-feedback-bg: rgba(139,92,246,0.08);
  --ev-icon-feedback-color: #A78BFA;
  --ev-icon-default-bg: rgba(255,255,255,0.04);
  --ev-icon-default-color: #A8A29C;

  /* ─── Timeline dot colors ──────────────────────────── */
  --tl-dot-evidence-border: #60A5FA;
  --tl-dot-evidence-bg: rgba(59,130,246,0.1);
  --tl-dot-status-border: #22C55E;
  --tl-dot-status-bg: rgba(34,197,94,0.1);
  --tl-dot-edit-border: #E9A23B;
  --tl-dot-edit-bg: rgba(233,162,59,0.1);

  /* ─── Border tokens ──────────────────────────────────── */

  /* ─── Dimension row colors ───────────────────────────── */
  --color-dim-thinking:    #60A5FA;
  --color-dim-trigger:     #FBBF24;
  --color-dim-doing:       #A78BFA;
  --color-dim-touchpoints: #818CF8;
  --color-dim-agent-role:  #C084FC;
  --color-dim-agent-mode:  #A78BFA;
  --color-dim-decision:    #34D399;
  --color-dim-devices:     #94A3B8;
  --color-dim-risk-type:   #FB923C;
  --color-dim-data-signals:#2DD4BF;
  --color-dim-opportunity: #34D399;
  --color-dim-seams:       #FB7185;
  --color-dim-discovery:   #2DD4BF;
  --color-dim-feelings:    #FCA5A5;
  --color-dim-user-goal:   #A78BFA;
}


@keyframes canvas-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes hitl-expand {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* ─── Signal flash highlight ─────────────────────────────────────────────── */
@keyframes signal-flash {
  0%   { outline: 3px solid var(--color-signal-open-text, #A16207); outline-offset: 2px; background-color: rgba(245, 158, 11, 0.15); }
  40%  { outline: 3px solid var(--color-signal-open-text, #A16207); outline-offset: 2px; background-color: rgba(245, 158, 11, 0.10); }
  100% { outline: 3px solid transparent; outline-offset: 2px; background-color: transparent; }
}

.signal-flash {
  animation: signal-flash 1800ms ease-out forwards;
  border-radius: 4px;
}

/* ─── Scrollbar — subtle, auto-hiding, matches macOS overlay style ─────── */
[data-grid-scroll] {
  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,0.15) transparent;
}
[data-grid-scroll]::-webkit-scrollbar {
  height: 6px;
  width: 6px;
}
[data-grid-scroll]::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.15);
  border-radius: 3px;
}
[data-grid-scroll]::-webkit-scrollbar-thumb:hover {
  background: rgba(0,0,0,0.25);
}
[data-grid-scroll]::-webkit-scrollbar-track {
  background: transparent;
}

@keyframes stage-highlight-ring {
  0% { box-shadow: inset 0 0 0 2px var(--highlight-color, #FDBA74); }
  100% { box-shadow: inset 0 0 0 0px var(--highlight-color, #FDBA74); }
}

.stage-highlight {
  animation: stage-highlight-ring 1800ms ease-out forwards;
}

/* ─── Signal hover highlight ─────────────────────────────────────────────── */
.signal-hover {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--color-accent) 8%, transparent) !important;
  transition: outline 150ms, background 150ms;
}

/* ─── Journey Brief — two-column narrative with drop cap ────────────────── */
.brief-narrative-cols {
  column-count: 2;
  column-gap: 28px;
  column-rule: 1px solid var(--color-border-soft);
}
.brief-narrative-cols p {
  font-family: var(--font-statement);
  font-size: 14px;
  line-height: 1.7;
  color: var(--color-text-secondary);
  margin: 0 0 18px;
}
.brief-narrative-cols p:last-child { margin-bottom: 0; }
.brief-narrative-cols p strong {
  color: var(--color-text-primary);
  font-weight: 600;
}
.brief-narrative-cols p:first-child::first-letter {
  font-family: var(--font-statement);
  float: left;
  font-size: 3.5em;
  line-height: 0.65;
  margin-right: 0.1em;
  margin-top: 0.05em;
  font-weight: 600;
  color: var(--color-text-primary);
}

/* ─── Notes Tiptap editor (drawer) ───────────────────── */
.notes-tiptap {
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--color-text-secondary);
  outline: none;
  min-height: 42px;
}
.notes-tiptap p {
  margin: 0 0 0.4em;
}
.notes-tiptap p:last-child {
  margin-bottom: 0;
}
.notes-tiptap ul,
.notes-tiptap ol {
  margin: 0.3em 0;
  padding-left: 1.4em;
}
.notes-tiptap ul {
  list-style-type: disc;
}
.notes-tiptap ol {
  list-style-type: decimal;
}
.notes-tiptap li {
  margin: 0.15em 0;
}
.notes-tiptap li p {
  margin: 0;
}
.notes-tiptap strong {
  font-weight: 600;
  color: var(--color-text-primary);
}
.notes-tiptap em {
  font-style: italic;
}
.notes-tiptap a,
.notes-link {
  color: #2563EB;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.dark .notes-tiptap a,
.dark .notes-link {
  color: #60A5FA;
}
.notes-tiptap code {
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 0.9em;
  padding: 1px 4px;
  border-radius: 3px;
  background: var(--color-base-200);
}
/* Placeholder */
.notes-tiptap p.is-editor-empty:first-child::before {
  content: attr(data-placeholder);
  float: left;
  color: var(--color-text-placeholder, var(--color-text-muted));
  pointer-events: none;
  height: 0;
}

/* ─── Dashboard Home — skeleton + pulse card hover ─────────────────────── */

@keyframes dashboard-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes dashboard-skeleton-pulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.15; }
}
.dashboard-skeleton-pulse {
  animation: dashboard-skeleton-pulse 1.8s ease-in-out infinite;
}
.dashboard-pulse-card:hover {
  box-shadow: 0 6px 20px rgba(0,0,0,0.08) !important;
  transform: translateY(-1px);
}
.dashboard-journey-chip:hover {
  background: rgba(0,0,0,0.08) !important;
}

/* ─── Dashboard Home — dark mode warmth card overrides ─────────────────── */

:root {
  --dash-hot-bg-start: #FFFBF0;
  --dash-hot-bg-end: #FFF5E0;
  --dash-hot-border: #F5E6C8;
  --dash-warm-bg-start: #FEFCF8;
  --dash-warm-bg-end: #FBF7EE;
  --dash-warm-border: #F0ECE5;
  --dash-cool-bg-start: #FAFAF9;
  --dash-cool-bg-end: #F5F5F0;
  --dash-cool-border: #ECEAE4;
  --dash-cold-bg: #F7F6F3;
  --dash-cold-border: #ECEAE4;
  --dash-temp-hot-bg: #FEF3C7;
  --dash-temp-hot-text: #92400E;
  --dash-temp-warm-bg: #FEF3C7;
  --dash-temp-warm-text: #B45309;
  --dash-temp-cool-bg: #F0ECE5;
  --dash-temp-cool-text: #78716C;
  --dash-temp-cold-bg: #ECEAE4;
  --dash-temp-cold-text: #A8A29E;
  --dash-tag-yours-bg: #FEF3C7;
  --dash-tag-yours-text: #92400E;
  --dash-tag-new-bg: #DBEAFE;
  --dash-tag-new-text: #2563EB;
  --dash-chair-bg-start: #FEFBF4;
  --dash-chair-bg-end: #FBF5E8;
  --dash-chair-border: #E7E0D4;
}

.dark {
  --dash-hot-bg-start: #252015;
  --dash-hot-bg-end: #2A2210;
  --dash-hot-border: #3D3315;
  --dash-warm-bg-start: #1E1C18;
  --dash-warm-bg-end: #222019;
  --dash-warm-border: #2E2B27;
  --dash-cool-bg-start: #1C1A17;
  --dash-cool-bg-end: #1C1A17;
  --dash-cool-border: #2A2723;
  --dash-cold-bg: #1A1815;
  --dash-cold-border: #2A2723;
  --dash-temp-hot-bg: #3D2E10;
  --dash-temp-hot-text: #FBBF24;
  --dash-temp-warm-bg: #332A15;
  --dash-temp-warm-text: #D97706;
  --dash-temp-cool-bg: #2A2723;
  --dash-temp-cool-text: #6B6560;
  --dash-temp-cold-bg: #222019;
  --dash-temp-cold-text: #4A4641;
  --dash-tag-yours-bg: #3D2E10;
  --dash-tag-yours-text: #FBBF24;
  --dash-tag-new-bg: #1E2A3D;
  --dash-tag-new-text: #60A5FA;
  --dash-chair-bg-start: #1E1C18;
  --dash-chair-bg-end: #222019;
  --dash-chair-border: #2E2B27;
}

/* ─── FRX Arc — theme variables (light defaults + dark overrides) ────────────────────── */

:root {
  --frx-surface-elevated:   #FFFFFF;
  --frx-border-subtle:      #E7E0D4;
  --frx-border-faint:       #F0ECE3;
  --frx-text-primary:       #2C2520;
  --frx-text-secondary:     #44403C;
  --frx-text-faint:         #A8A29E;
  --frx-warm-ink:           #7A5A1B;
  --frx-text-faintest:      #C5BFB8;
  --frx-button-primary:     #1C1917;
  --frx-button-primary-ink: #FFFFFF;
  --frx-button-disabled:    #F0ECE5;
  --frx-button-disabled-ink:#C5BFB8;
  --frx-scene-surface:      #FAF8F3;
  --frx-ambient-inner:      rgba(233, 162, 59, 0.11);
  --frx-ambient-outer:      rgba(233, 162, 59, 0.05);
  --frx-border-muted:       #D6D3D1;
  --frx-verdict-amber:      #D97706;
  --frx-spotlit-surface:    #FFFDF6;
  --frx-spotlit-border:     #E7DFC8;
  --frx-spotlit-glow:       rgba(245,158,11,0.08);
}

.dark {
  --frx-surface-elevated:   #1F1B15;
  --frx-border-subtle:      #2E2B27;
  --frx-border-faint:       #2A2621;
  --frx-text-primary:       #EDEAE5;
  --frx-text-secondary:     #D4CEC2;
  --frx-text-faint:         #6B6560;
  --frx-warm-ink:           #D4B472;
  --frx-text-faintest:      #3D3A36;
  --frx-button-primary:     #F5F0E8;
  --frx-button-primary-ink: #1C1917;
  --frx-button-disabled:    #2E2A24;
  --frx-button-disabled-ink:#5A544C;
  --frx-scene-surface:      #0E0C09;
  --frx-ambient-inner:      rgba(245, 158, 11, 0.13);
  --frx-ambient-outer:      rgba(245, 158, 11, 0.06);
  --frx-border-muted:       #3D3A36;
  --frx-verdict-amber:      #F5C18E;
  --frx-spotlit-surface:    #26201A;
  --frx-spotlit-border:     rgba(245,158,11,0.4);
  --frx-spotlit-glow:       rgba(245,158,11,0.14);
}

/* ─── FRX Arc — CampfireAnchor keyframes ────────────────────── */

@keyframes campfire-pulse-outer {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.18); }
}

@keyframes campfire-pulse-inner {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  40% { opacity: 1; transform: scale(1.1); }
  60% { opacity: 0.85; transform: scale(1.06); }
}

@keyframes campfire-flicker {
  0%, 100% { filter: brightness(1) saturate(1); }
  25% { filter: brightness(1.06) saturate(1.08); }
  50% { filter: brightness(0.96) saturate(0.95); }
  75% { filter: brightness(1.04) saturate(1.04); }
}

/* ─── FRX Arc — LoadingCampfire keyframes + utilities ────────────────────── */

@keyframes caret {
  0%, 50% { opacity: 1; }
  50.01%, 100% { opacity: 0; }
}

@keyframes shimmer {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}

.frx-shimmer-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--frx-border-muted, #D6D3D1);
  animation: shimmer 1.4s ease-in-out infinite;
}