/*
 * Global visual foundation.
 * Keep semantic tokens here so normal pages and Django Admin share one source.
 * Legacy aliases remain available while existing pages migrate incrementally.
 */
:root,
html[data-theme="light"],
html[data-theme="dark"] {
  color-scheme: light;

  --color-canvas: #f6f9fc;
  --color-surface: #ffffff;
  --color-nav: #f5f8fd;
  --color-nav-hover: #eef4fc;
  --color-nav-active: #e8f0ff;
  --color-nav-active-border: #4f7df3;
  --color-nav-border: #e5ecf5;
  --color-nav-text: #53647a;
  --color-nav-text-muted: #7f8ea3;

  --color-primary: #4f7df3;
  --color-primary-hover: #416ee0;
  --color-primary-soft: #e8f0ff;
  --color-primary-text: #3565d4;
  --color-accent: #45bfae;
  --color-accent-soft: #e9f8f5;

  --color-heading: #31435f;
  --color-text: #31435f;
  --color-text-muted: #7b8aa0;
  --color-text-weak: #8391a5;
  --color-border: #e5ebf3;
  --color-border-strong: #dce5f0;

  --color-success: #15803d;
  --color-success-soft: #ecfdf3;
  --color-warning: #b45309;
  --color-warning-soft: #fff7ed;
  --color-danger: #dc2626;
  --color-danger-hover: #b91c1c;
  --color-danger-soft: #fef2f2;
  --color-disabled: #9aa8ba;
  --color-disabled-bg: #f1f4f8;
  --color-focus-ring: rgba(79, 125, 243, .2);

  --font-sans: "Microsoft YaHei UI", "Microsoft YaHei", "PingFang SC", "Noto Sans SC", Arial, sans-serif;
  --font-code: "Cascadia Code", Consolas, "Courier New", monospace;
  --font-size-page-title: 24px;
  --font-size-module-title: 19px;
  --font-size-card-title: 16px;
  --font-size-body: 15px;
  --font-size-helper: 14px;
  --font-size-nav: 15px;
  --font-size-button: 15px;
  --font-size-table: 15px;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 600;
  --line-height-heading: 1.35;
  --line-height-body: 1.65;
  --line-height-table: 1.55;

  --radius-control: 8px;
  --radius-card: 12px;
  --radius-feature: 14px;
  --shadow-card: 0 1px 3px rgba(38, 50, 71, .035);
  --shadow-float: 0 8px 24px rgba(38, 50, 71, .065);
  --focus-ring: 0 0 0 3px var(--color-focus-ring);

  --layout-sidebar-width: 272px;
  --layout-topbar-height: 72px;
  --layout-content-max: 1504px;

  /* Legacy aliases: keep old pages working while they move to semantic tokens. */
  --ink: var(--color-text);
  --heading: var(--color-heading);
  --text: var(--color-text);
  --muted: var(--color-text-muted);
  --weak: var(--color-text-weak);
  --surface: var(--color-surface);
  --canvas: var(--color-canvas);
  --exam-canvas: var(--color-canvas);
  --sidebar: var(--color-nav);
  --sidebar-bg: var(--color-nav);
  --accent: var(--color-primary);
  --primary: var(--color-primary);
  --primary-dark: var(--color-primary-hover);
  --primary-soft: var(--color-primary-soft);
  --secondary: var(--color-accent);
  --secondary-soft: var(--color-accent-soft);
  --success: var(--color-success);
  --success-soft: var(--color-success-soft);
  --warning: var(--color-warning);
  --warning-soft: var(--color-warning-soft);
  --danger: var(--color-danger);
  --danger-soft: var(--color-danger-soft);
  --border: var(--color-border);
  --focus: var(--color-focus-ring);
  --code-font: var(--font-code);

  --student-accent: var(--color-primary);
  --student-accent-dark: var(--color-primary-hover);
  --student-blue: var(--color-primary);
  --student-teal: var(--color-accent);
  --exam-accent: var(--color-primary);
  --exam-blue: var(--color-primary);

  --ui-brand: var(--color-primary);
  --ui-brand-strong: var(--color-primary-hover);
  --ui-brand-soft: var(--color-primary-soft);
  --ui-accent: var(--color-accent);
  --ui-nav: var(--color-nav);
  --ui-nav-hover: var(--color-nav-hover);
  --ui-canvas: var(--color-canvas);
  --ui-surface: var(--color-surface);
  --ui-border: var(--color-border);
  --ui-text: var(--color-text);
  --ui-muted: var(--color-text-muted);
  --ui-success: var(--color-success);
  --ui-warning: var(--color-warning);
  --ui-danger: var(--color-danger);
  --ui-radius-sm: var(--radius-control);
  --ui-radius-md: var(--radius-card);
  --ui-radius-lg: var(--radius-feature);
  --ui-shadow: var(--shadow-card);
  --ui-sidebar-width: var(--layout-sidebar-width);
  --ui-topbar-height: var(--layout-topbar-height);
}