:root {
  color-scheme: light;

  /* Operational Calm: canonical semantic foundation. */
  --color-canvas: #ebe3d5;
  --color-surface: #ffffff;
  --color-surface-subtle: #f8f6f0;
  --color-surface-strong: #ede7dc;
  --color-ink: #171d23;
  --color-ink-muted: #5b6670;
  --color-line: rgba(23, 29, 35, 0.12);
  --color-accent: #0e8485;
  --color-accent-strong: #09686a;
  --color-action: #3a4132;

  --type-page-title-size: 30px;
  --type-page-title-line: 34px;
  --type-page-title-size-mobile: 24px;
  --type-page-title-line-mobile: 28px;
  --type-section-title-size: 20px;
  --type-section-title-line: 24px;
  --type-section-title-size-mobile: 18px;
  --type-section-title-line-mobile: 22px;
  --type-component-title-size: 16px;
  --type-component-title-line: 20px;
  --type-body-size: 15px;
  --type-body-line: 23px;
  --type-body-line-mobile: 22px;
  --type-support-size: 13px;
  --type-support-line: 19px;
  --type-utility-size: 12px;
  --type-utility-line: 16px;
  --type-metric-size: 28px;
  --type-metric-line: 32px;
  --type-metric-size-mobile: 26px;
  --type-metric-line-mobile: 30px;
  --type-metric-large-size: 36px;
  --type-metric-large-line: 40px;
  --type-metric-large-size-mobile: 32px;
  --type-metric-large-line-mobile: 36px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  --radius-control: 8px;
  --radius-panel: 12px;
  --radius-prominent: 16px;
  --radius-pill: 999px;
  --elevation-overlay: 0 12px 28px rgba(23, 29, 35, 0.12);
  --panel-padding-compact: 12px;
  --panel-padding-standard: 16px;
  --panel-padding-spacious: 24px;
  --control-height-compact: 38px;
  --control-height-default: 44px;
  --control-height-mobile-primary: 48px;

  /*
   * Responsive primitive API (Checkpoint 3).
   *
   * These --wf-* names are the canonical API for new responsive work. The
   * older unprefixed names above remain compatibility aliases for existing
   * route bodies until their separately approved family migrations.
   */
  --wf-color-canvas: var(--color-canvas);
  --wf-color-surface: var(--color-surface);
  --wf-color-surface-subtle: var(--color-surface-subtle);
  --wf-color-surface-strong: var(--color-surface-strong);
  --wf-color-text: var(--color-ink);
  --wf-color-text-muted: var(--color-ink-muted);
  --wf-color-border: var(--color-line);
  --wf-color-action: rgb(var(--action-button-rgb));
  --wf-color-action-text: rgb(var(--action-button-fg-rgb));
  --wf-color-accent: var(--color-accent);
  --wf-color-accent-strong: var(--color-accent-strong);

  --wf-font-ui: "IBM Plex Sans", system-ui, sans-serif;
  --wf-font-mono: "IBM Plex Mono", monospace;
  --wf-type-metadata-size: 12px;
  --wf-type-metadata-line: 16px;
  --wf-type-compact-size: 14px;
  --wf-type-compact-line: 20px;
  --wf-type-body-size: 16px;
  --wf-type-body-line: 24px;
  --wf-type-title-size: 20px;
  --wf-type-title-line: 26px;
  --wf-type-display-size: 32px;
  --wf-type-display-line: 38px;

  --wf-space-1: var(--space-1);
  --wf-space-2: var(--space-2);
  --wf-space-3: var(--space-3);
  --wf-space-4: var(--space-4);
  --wf-space-5: var(--space-5);
  --wf-space-6: var(--space-6);
  --wf-space-8: var(--space-8);

  --wf-target-min: 44px;
  --wf-target-comfortable: 48px;
  --wf-icon-size-dense: 24px;
  --wf-radius-small: 4px;
  --wf-radius-control: var(--radius-control);
  --wf-radius-surface: var(--radius-panel);
  --wf-radius-raised: var(--radius-prominent);
  --wf-motion-fast: 120ms;
  --wf-motion-standard: 180ms;
  --wf-gutter-compact: 12px;
  --wf-gutter-phone: 16px;
  --wf-gutter-tablet: 20px;
  --wf-gutter-desktop: 24px;

  /* Compatibility aliases keep existing routes on the shared foundation. */
  --brand-dark-green: #101820;
  --ink: var(--color-ink);
  --muted: var(--color-ink-muted);
  --surface-panel: var(--color-surface);
  --surface-fg: var(--ink);
  --line: var(--color-line);
  --accent: var(--color-accent);
  --accent-strong: var(--color-accent-strong);
  --focus-ring-inner: #000000;
  --focus-ring-outer: #ffffff;
  --radius-sm: var(--radius-control);
  --radius-md: var(--radius-panel);
  --radius-lg: var(--radius-prominent);
  --shadow-flat: none;
  --shadow-subtle: 0 8px 18px rgba(23, 29, 35, 0.05);
  --shadow-panel: 0 18px 40px rgba(23, 29, 35, 0.1);
  --density-compact-cell-y: 0.42rem;
  --density-default-cell-y: 0.55rem;
  --density-cell-y: var(--density-default-cell-y);
  --status-neutral-bg: #f3f4f4;
  --status-neutral-border: rgba(23, 29, 35, 0.13);
  --status-neutral-text: #4b5560;
  --status-info-bg: #eef4ff;
  --status-info-border: rgba(54, 83, 153, 0.2);
  --status-info-text: #365399;
  --status-success-bg: #edf7f1;
  --status-success-border: rgba(49, 92, 74, 0.22);
  --status-success-text: #24624b;
  --status-warning-bg: #fff7e8;
  --status-warning-border: rgba(185, 130, 44, 0.26);
  --status-warning-text: #835919;
  --status-danger-bg: #fff0ec;
  --status-danger-border: rgba(167, 74, 64, 0.24);
  --status-danger-text: #8a3d36;
  --status-system-bg: #eff6f4;
  --status-system-border: rgba(14, 132, 133, 0.2);
  --status-system-text: #09686a;
  --sidebar-rgb: 59 104 105;
  --app-bg-rgb: 235 227 213;
  --view-toggle-rgb: 44 84 91;
  --filter-chip-rgb: 54 83 153;
  --action-button-rgb: 58 65 50;
  --table-head-rgb: 237 231 220;
  --sidebar-fg-rgb: 255 255 255;
  --app-bg-fg-rgb: 0 0 0;
  --view-toggle-fg-rgb: 255 255 255;
  --filter-chip-fg-rgb: 255 255 255;
  --action-button-fg-rgb: 255 255 255;
  --table-head-fg-rgb: 0 0 0;
  --sidebar-fg: rgb(var(--sidebar-fg-rgb));
  --app-bg-fg: rgb(var(--app-bg-fg-rgb));
  --view-toggle-fg: rgb(var(--view-toggle-fg-rgb));
  --filter-chip-fg: rgb(var(--filter-chip-fg-rgb));
  --action-button-fg: rgb(var(--action-button-fg-rgb));
  --table-head-fg: rgb(var(--table-head-fg-rgb));
  --button-bg: rgb(var(--action-button-rgb));
  --button-bg-hover: rgb(var(--action-button-rgb));
  --button-border-hover: rgba(58, 65, 50, 0.32);
  --button-border-hover: color-mix(in srgb, rgb(var(--action-button-rgb)) 52%, white);
  --view-toggle-bg: rgb(var(--view-toggle-rgb));
  --filter-chip-bg: rgb(var(--filter-chip-rgb));
  --filter-chip-bg-soft: rgba(54, 83, 153, 0.12);
  --filter-chip-bg-soft: color-mix(in srgb, rgb(var(--filter-chip-rgb)) 12%, white);
  --table-head-bg: rgb(var(--table-head-rgb));
  --desktop-sidebar-width: 18rem;
  --desktop-shell-gap: 0rem;
  --workspace-inline-padding: var(--space-6);
  --workspace-inline-padding-double: calc(var(--workspace-inline-padding) * 2);
}

@media (min-width: 768px) and (max-width: 1280px) {
  :root {
    --desktop-sidebar-width: 18rem;
    --desktop-shell-gap: 0rem;
    --workspace-inline-padding: var(--space-4);
    --workspace-inline-padding-double: calc(var(--workspace-inline-padding) * 2);
  }
}

@media (min-width: 768px) and (max-width: 1100px) {
  :root {
    --desktop-sidebar-width: 15.75rem;
    --workspace-inline-padding: var(--space-4);
    --workspace-inline-padding-double: calc(var(--workspace-inline-padding) * 2);
  }
}

@media (min-width: 1600px) {
  :root {
    --desktop-sidebar-width: 22.5rem;
  }
}