/* Phase 6 UX-001 R2. Canonical semantic roles are mirrored from design/ketogen-design-tokens.json. */
:root {
  --ktg-color-brand: #8EC038;
  --ktg-color-brand-strong: #6FA92D;
  --ktg-color-brand-pressed: #5E9725;
  --ktg-color-primary-interaction: #8EC038;
  --ktg-color-primary-hover: #6F982B;
  --ktg-color-primary-pressed: #6F982B;
  --ktg-color-text: #17202A;
  --ktg-color-text-muted: #5B6777;
  --ktg-color-text-inverse: #FFFFFF;
  --ktg-color-text-on-primary: #FFFFFF;
  --ktg-color-page: #F5F7F2;
  --ktg-color-surface: #FFFFFF;
  --ktg-color-surface-elevated: #FFFFFF;
  --ktg-color-surface-soft: #F3F5ED;
  --ktg-color-border: #D8E0EA;
  --ktg-color-divider: #E2E8F0;
  --ktg-color-focus: #1E3A8A;
  --ktg-color-focus-on-light: #1E3A8A;
  --ktg-color-focus-on-dark: #8EC038;
  --ktg-color-success-bg: #EDF6E1;
  --ktg-color-success-text: #065F46;
  --ktg-color-warning-bg: #FFF7E6;
  --ktg-color-warning-text: #B45309;
  --ktg-color-error-bg: #FFF1F0;
  --ktg-color-error-text: #991B1B;
  --ktg-color-offline-bg: #F3F4F6;
  --ktg-color-offline-text: #5B6777;
  --ktg-color-sync-pending-bg: #F3F4F6;
  --ktg-color-sync-pending-text: #5B6777;
  --ktg-color-sync-active-bg: #EEF6FF;
  --ktg-color-sync-active-text: #1E3A8A;
  --ktg-color-sync-retry-bg: #FFF7E6;
  --ktg-color-sync-retry-text: #B45309;
  --ktg-color-sync-conflict-bg: #FDECEC;
  --ktg-color-sync-conflict-text: #991B1B;
  --ktg-color-disabled-bg: #F3F4F6;
  --ktg-color-disabled-text: #5B6777;
  --ktg-color-selected-bg: #EDF6E1;
  --ktg-color-selected-text: #17202A;
  --ktg-color-shell-dark: #0F172A;
  --ktg-color-shell-dark-hover: #1F2A44;
  --ktg-color-text-on-dark: #FFFFFF;
  --ktg-color-text-muted-on-dark: #CBD5E1;
  --ktg-space-1: 4px;
  --ktg-space-2: 8px;
  --ktg-space-3: 12px;
  --ktg-space-4: 16px;
  --ktg-space-5: 20px;
  --ktg-space-6: 24px;
  --ktg-space-8: 32px;
  --ktg-radius-sm: 8px;
  --ktg-radius-md: 12px;
  --ktg-radius-lg: 16px;
  --ktg-radius-pill: 999px;
  --ktg-control-min-height: 42px;
  --ktg-control-large-height: 44px;
  --ktg-control-compact-height: 36px;
  --ktg-control-min-pointer-target: 42px;
  --ktg-control-button-padding-x: 16px;
  --ktg-control-button-padding-y: 8px;
  --ktg-control-input-padding-x: 10px;
  --ktg-control-input-padding-y: 6px;
  --ktg-font-ui: Arial, Helvetica, sans-serif;
  --ktg-font-size-caption: 12px;
  --ktg-font-size-body: 14px;
  --ktg-font-size-control: 14px;
  --ktg-font-size-lead: 16px;
  --ktg-font-size-section: 20px;
  --ktg-font-size-title: 24px;
  --ktg-font-size-display: 28px;
  --ktg-font-weight-regular: 400;
  --ktg-font-weight-semibold: 600;
  --ktg-font-weight-bold: 700;
  --ktg-font-weight-heavy: 800;
  --ktg-line-height-tight: 1.2;
  --ktg-line-height-body: 1.45;
  --ktg-line-height-comfortable: 1.6;
  --ktg-shadow-panel: 0 10px 30px rgba(15, 23, 42, 0.08);
  --ktg-shadow-overlay: 0 20px 45px rgba(15, 23, 42, 0.16);
  --ktg-motion-quick: 160ms;
  --ktg-motion-standard: 240ms;
  --ktg-focus-width: 3px;
  --ktg-focus-offset: 3px;
  --ktg-motion-quick-effective: var(--ktg-motion-quick);
  --ktg-motion-standard-effective: var(--ktg-motion-standard);
}
@media (prefers-reduced-motion: reduce) {
  :root { --ktg-motion-quick-effective: 0ms; --ktg-motion-standard-effective: 0ms; }
}