/* Breakpoints: mobile 0–767px; tablet 768–1023px; desktop 1024px and up. */
/* i0: neutral surfaces, one forest action accent; semantic color is limited to small status dots. */
:root, [data-theme="light"] {
  color-scheme: light;
  --icon-xs: 14px;
  --icon-sm: 16px;
  --icon-md: 20px;
  --icon-lg: 24px;
  --icon-xl: 32px;
  --color-bg: #f6f7f6;
  --color-surface: #ffffff;
  --color-surface-soft: #f0f3f1;
  --color-ink: #14201b;
  --color-muted: #5b6761;
  --color-line: #e3e7e4;
  /* Physical paper is independent of the interface theme. */
  --color-paper: #ffffff;
  --color-paper-ink: #1a1a1a;
  --color-paper-muted: #555555;
  --color-paper-line: #cccccc;
  --color-paper-warning-bg: #fff8e8;
  --color-paper-warning-ink: #946318;
  --color-primary: #1f5d50;
  --color-primary-ink: #ffffff;
  --color-action: var(--color-primary);
  --color-action-hover: var(--color-primary);
  --color-action-pressed: var(--color-primary);
  --color-action-ink: var(--color-primary-ink);
  --color-secondary-bg: transparent;
  --color-secondary-border: var(--color-primary);
  --color-secondary-ink: var(--color-primary);
  --color-accent-soft: #eaf1ee;
  --color-overlay: rgb(15 20 23 / 48%);
  --shadow-card: none;
  --shadow-popover: 0 16px 40px rgb(15 20 23 / 16%);
  --shadow-badge: inset 0 0 0 1px var(--rating-border, var(--state-border, var(--status-neutral-border)));
  --shadow-dot-neutral: inset 0 0 0 1px var(--dot-neutral);
  --shadow-filter-count: inset 0 0 0 1px var(--state-border);
  --shadow-filter-count-selected: inset 0 0 0 1px var(--state-solid);
  --radius-none: 0;
  --z-raised: 1;
  --z-sticky: 3;
  --z-floating: 4;
  --z-popover: 5;
  --z-tooltip: 10;
  --z-skip: 20;
  --dot-neutral: #65756e;
  --dot-success: #1f5d50;
  --dot-warning: #946318;
  --dot-error: #a64138;
  --dot-info: #416d97;
  --dot-violet: #8060a2;
  --chart-1: #7d8982;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --radius-sm: 0.5rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.625rem;
  --radius-xl: 0.625rem;
  --radius-pill: 999px;
  --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-md: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 2rem;
  --text-4xl: 2.5rem;
  --line-tight: 1.2;
  --line-normal: 1.5;
  --line-relaxed: 1.65;
  --control-min-height: 2.75rem;
  --content-max: 78rem;
  --sidebar-width: 14.5rem;
  --density-page-space: var(--space-6);
  --density-card-space: var(--space-5);
  --density-gap: var(--space-4);
  --density-row-space: var(--space-3);
  --density-table-space: var(--space-3);
  --density-table-height: 3rem;
  --density-list-height: 3.5rem;
}
[data-status], [data-rating], [data-tone], [data-filter] {
  --shadow-badge: inset 0 0 0 1px var(--rating-border, var(--state-border, var(--status-neutral-border)));
  --shadow-filter-count: inset 0 0 0 1px var(--state-border, var(--status-neutral-border));
  --shadow-filter-count-selected: inset 0 0 0 1px var(--state-solid, var(--dot-neutral));
}

/* Transitional role names keep existing page consumers on the neutral foundation. */
:root, [data-theme] {
  --chart-2: var(--dot-info);
  --chart-3: var(--dot-warning);
  --chart-4: var(--dot-violet);
  --chart-5: var(--dot-success);
  --color-positive: var(--color-primary);
  --color-focus: var(--color-primary);
  --color-warning-bg: var(--status-warn-bg);
  --color-warning-ink: var(--status-warn-ink);
  --color-error-bg: var(--status-error-bg);
  --color-error-ink: var(--status-error-ink);
  --color-info-bg: var(--status-info-bg);
  --color-info-ink: var(--status-info-ink);
  --focus-ring: 0 0 0 2px var(--color-focus), 0 0 0 4px var(--color-bg);
  --domain-english-bg: var(--color-surface-soft);
  --domain-english-ink: var(--color-ink);
  --domain-english-border: var(--color-line);
  --domain-english-solid: var(--color-muted);
  --domain-chinese-bg: var(--color-surface-soft);
  --domain-chinese-ink: var(--color-ink);
  --domain-chinese-border: var(--color-line);
  --domain-chinese-solid: var(--color-muted);
  --domain-mathematics-bg: var(--color-surface-soft);
  --domain-mathematics-ink: var(--color-ink);
  --domain-mathematics-border: var(--color-line);
  --domain-mathematics-solid: var(--color-muted);
  --domain-social-emotional-bg: var(--color-surface-soft);
  --domain-social-emotional-ink: var(--color-ink);
  --domain-social-emotional-border: var(--color-line);
  --domain-social-emotional-solid: var(--color-muted);
  --rating-emerging-bg: var(--color-surface-soft);
  --rating-emerging-ink: var(--color-ink);
  --rating-emerging-border: var(--color-line);
  --rating-emerging-solid: var(--dot-warning);
  --rating-developing-bg: var(--color-surface-soft);
  --rating-developing-ink: var(--color-ink);
  --rating-developing-border: var(--color-line);
  --rating-developing-solid: var(--dot-info);
  --rating-secure-bg: var(--color-surface-soft);
  --rating-secure-ink: var(--color-ink);
  --rating-secure-border: var(--color-line);
  --rating-secure-solid: var(--dot-success);
  --rating-extending-bg: var(--color-surface-soft);
  --rating-extending-ink: var(--color-ink);
  --rating-extending-border: var(--color-line);
  --rating-extending-solid: var(--dot-violet);
  --status-ready-bg: var(--color-surface-soft);
  --status-ready-ink: var(--color-ink);
  --status-ready-border: var(--color-line);
  --status-ready-solid: var(--dot-success);
  --status-warn-bg: var(--color-surface-soft);
  --status-warn-ink: var(--color-ink);
  --status-warn-border: var(--color-line);
  --status-warn-solid: var(--dot-warning);
  --status-error-bg: var(--color-surface-soft);
  --status-error-ink: var(--color-ink);
  --status-error-border: var(--color-line);
  --status-error-solid: var(--dot-error);
  --status-info-bg: var(--color-surface-soft);
  --status-info-ink: var(--color-ink);
  --status-info-border: var(--color-line);
  --status-info-solid: var(--dot-info);
  --status-neutral-bg: var(--color-surface-soft);
  --status-neutral-ink: var(--color-ink);
  --status-neutral-border: var(--color-line);
  --status-neutral-solid: var(--dot-neutral);
  --status-drafted-bg: var(--color-surface-soft);
  --status-drafted-ink: var(--color-ink);
  --status-drafted-border: var(--color-line);
  --status-drafted-solid: var(--dot-violet);
  --status-reviewed-bg: var(--color-surface-soft);
  --status-reviewed-ink: var(--color-ink);
  --status-reviewed-border: var(--color-line);
  --status-reviewed-solid: var(--dot-success);
  --provider-mock-bg: var(--color-surface-soft);
  --provider-mock-ink: var(--color-ink);
  --provider-mock-border: var(--color-line);
  --provider-mock-solid: var(--color-muted);
  --provider-gateway-bg: var(--color-surface-soft);
  --provider-gateway-ink: var(--color-ink);
  --provider-gateway-border: var(--color-line);
  --provider-gateway-solid: var(--color-muted);
  --provider-openai-bg: var(--color-surface-soft);
  --provider-openai-ink: var(--color-ink);
  --provider-openai-border: var(--color-line);
  --provider-openai-solid: var(--color-muted);
  --provider-gemini-bg: var(--color-surface-soft);
  --provider-gemini-ink: var(--color-ink);
  --provider-gemini-border: var(--color-line);
  --provider-gemini-solid: var(--color-muted);
  --rating-emerging-fg: var(--rating-emerging-ink);
  --rating-developing-fg: var(--rating-developing-ink);
  --rating-secure-fg: var(--rating-secure-ink);
  --rating-extending-fg: var(--rating-extending-ink);
  --status-ready-fg: var(--status-ready-ink);
  --status-warn-fg: var(--status-warn-ink);
  --status-error-fg: var(--status-error-ink);
  --status-info-fg: var(--status-info-ink);
  --status-neutral-fg: var(--status-neutral-ink);
  --status-drafted-fg: var(--status-drafted-ink);
  --status-reviewed-fg: var(--status-reviewed-ink);
  --status-not-started-bg: var(--status-neutral-bg);
  --status-not-started-ink: var(--status-neutral-ink);
  --status-not-started-border: var(--status-neutral-border);
  --status-not-started-solid: var(--status-neutral-solid);
  --status-not-started-fg: var(--status-neutral-ink);
  --status-in-progress-bg: var(--status-info-bg);
  --status-in-progress-ink: var(--status-info-ink);
  --status-in-progress-border: var(--status-info-border);
  --status-in-progress-solid: var(--status-info-solid);
  --status-in-progress-fg: var(--status-info-ink);
  --rating-none-bg: var(--status-neutral-bg);
  --rating-none-ink: var(--status-neutral-ink);
  --rating-none-border: var(--status-neutral-border);
  --rating-none-solid: var(--status-neutral-solid);
  --rating-none-fg: var(--status-neutral-ink);
  --surface-sidebar-active: var(--color-accent-soft);
  --surface-card-header: var(--color-surface);
  --surface-table-zebra: var(--color-surface);
  --surface-table-hover: var(--color-surface-soft);
}

[data-theme="dark"] {
  color-scheme: dark;
  --color-bg: #10151c;
  --color-surface: #181f28;
  --color-surface-soft: #222c38;
  --color-ink: #edf1f7;
  --color-muted: #a7b3c4;
  --color-line: #687b92;
  --color-primary: #4fb59a;
  --color-primary-ink: #ffffff;
  --color-action: #1b7f61;
  --color-action-hover: #1d8465;
  --color-action-pressed: #176c53;
  --color-action-ink: #ffffff;
  --color-secondary-bg: var(--color-surface-soft);
  --color-secondary-border: var(--color-line);
  --color-secondary-ink: var(--color-ink);
  --color-accent-soft: #263343;
  --color-overlay: rgb(0 0 0 / 64%);
  --shadow-card: none;
  --shadow-popover: 0 16px 40px rgb(0 0 0 / 32%);
  --dot-neutral: #a7b3c4;
  --dot-success: #71cfb5;
  --dot-warning: #e1b66a;
  --dot-error: #f29c95;
  --dot-info: #8fb9e8;
  --dot-violet: #c3a6eb;
  --chart-1: #9aa8bb;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --color-bg: #10151c;
    --color-surface: #181f28;
    --color-surface-soft: #222c38;
    --color-ink: #edf1f7;
    --color-muted: #a7b3c4;
    --color-line: #687b92;
    --color-primary: #4fb59a;
    --color-primary-ink: #ffffff;
    --color-action: #1b7f61;
    --color-action-hover: #1d8465;
    --color-action-pressed: #176c53;
    --color-action-ink: #ffffff;
    --color-secondary-bg: var(--color-surface-soft);
    --color-secondary-border: var(--color-line);
    --color-secondary-ink: var(--color-ink);
    --color-accent-soft: #263343;
    --color-overlay: rgb(0 0 0 / 64%);
    --shadow-card: none;
    --shadow-popover: 0 16px 40px rgb(0 0 0 / 32%);
    --dot-neutral: #a7b3c4;
    --dot-success: #71cfb5;
    --dot-warning: #e1b66a;
    --dot-error: #f29c95;
    --dot-info: #8fb9e8;
    --dot-violet: #c3a6eb;
    --chart-1: #9aa8bb;
  }
}

/* Density changes layout metrics, not type. Coarse pointers always keep 44px targets. */
[data-density="compact"] {
  --density-page-space: var(--space-4);
  --density-card-space: var(--space-4);
  --density-gap: var(--space-2);
  --density-row-space: var(--space-1);
  --density-table-space: var(--space-1);
  --density-table-height: 2.5rem;
  --density-list-height: 3rem;
}
@media (min-width: 1024px) and (pointer: fine) {
  [data-density="compact"] {
    --density-list-height: 2.75rem;
  }
}
@media (pointer: coarse) {
  :root, [data-density] { --control-min-height: 2.75rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Paper stays greyscale and readable independently of the screen theme. */
@media print {
  html:root[data-theme], html:root:not([data-theme]) {
    color-scheme: light;
    --color-bg: #ffffff;
    --color-surface: #ffffff;
    --color-surface-soft: #f0f0f0;
    --color-ink: #111111;
    --color-muted: #444444;
    --color-line: #777777;
    --color-primary: #111111;
    --color-primary-ink: #ffffff;
    --color-action: var(--color-primary);
    --color-action-hover: var(--color-primary);
    --color-action-pressed: var(--color-primary);
    --color-action-ink: var(--color-primary-ink);
    --color-secondary-bg: var(--color-surface);
    --color-secondary-border: var(--color-line);
    --color-secondary-ink: var(--color-ink);
    --color-accent-soft: #eeeeee;
  }
}