/**
 * Shared public theme tokens.
 *
 * Purpose:
 * - Provides one browser-facing source for module colors and typography.
 * - Lets PHP-rendered pages and future React modules share the same CSS tokens.
 * - Keeps theme presets selectable through data-* attributes on .module roots.
 */

:root {
    --system-font-family: Inter, "Noto Sans SC", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    --system-font-size: 14px;

    --question-font-primary-family: Inter, "Noto Sans SC", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    --question-font-secondary-family: "Times New Roman", "Noto Serif SC", "Songti SC", "STSong", "SimSun", Times, serif;
    --question-font-content-family: var(--question-font-secondary-family);
    --question-font-content-size: 18px;

    --color-primary: #00b845;
    --color-primary-dark: #05933d;
    --color-primary-soft: #eef8f1;
    --color-primary-hover-soft: #e2f8e9;
    --color-primary-border: #bce8c9;
    --color-primary-gradient-start: #12c957;
    --color-primary-gradient-end: #00a53d;
    --color-primary-contrast: #ffffff;

    --color-success: #05933d;
    --color-success-dark: #078b25;
    --color-success-soft: #f3fcf6;
    --color-success-border: #ccead8;

    --color-danger: #d33b34;
    --color-danger-dark: #e10f0f;
    --color-danger-soft: #fff7f7;
    --color-danger-border: #ffd6d6;

    --color-warning: #f5c21a;
    --color-warning-dark: #b36b00;
    --color-warning-soft: #fff6e5;
    --color-warning-border: #f5c21a;

    --color-info: #2563eb;
    --color-info-dark: #1d4ed8;
    --color-info-soft: #eff6ff;
    --color-info-border: #bfdbfe;

    --color-text: #0f172a;
    --color-text-strong: #20314f;
    --color-muted: #617089;
    --color-line: #dfe6f2;
    --color-line-strong: #cfd8e6;
    --color-surface: #ffffff;
    --color-surface-soft: #f7fafc;
    --color-page: #fbfdff;
    --color-link: #1976d2;
    --color-link-hover: #1565c0;
    --color-link-soft: #e3f2fd;
    --color-link-border: #90caf9;
    --color-accent: #4f20ff;
    --color-overlay-soft: rgba(226, 232, 240, 0.72);
    --color-spinner-track: rgba(32, 49, 79, 0.18);
    --color-warning-ring: rgba(245, 194, 26, 0.18);

    --shadow-elevated: 0 18px 40px rgba(15, 23, 42, 0.06);
}

.module {
    --system-font-header-size: calc(var(--system-font-size) + 16px);
    --system-font-subheader-size: calc(var(--system-font-size) + 1px);
    --system-font-workspace-title-size: calc(var(--system-font-size) + 6px);
    --system-font-card-title-size: calc(var(--system-font-size) + 4px);
    --system-font-section-title-size: calc(var(--system-font-size) - 2px);
    --system-font-label-size: calc(var(--system-font-size) - 2px);
    --system-font-body-size: var(--system-font-size);
    --system-font-navigation-size: var(--system-font-size);
    --system-font-control-size: calc(var(--system-font-size) - 1px);
    --system-font-caption-size: calc(var(--system-font-size) - 2px);
    --system-font-metadata-size: calc(var(--system-font-size) - 3px);

    color: var(--color-text);
    background: var(--color-page);
    font-family: var(--system-font-family);
    font-size: var(--system-font-size);
}

.module[data-system-size="14"] {
    --system-font-size: 14px;
}

.module[data-system-size="16"] {
    --system-font-size: 16px;
}

.module[data-system-size="18"] {
    --system-font-size: 18px;
}

.module[data-system-size="20"] {
    --system-font-size: 20px;
}

.module[data-system-size="22"] {
    --system-font-size: 22px;
}

.module .system-header {
    color: var(--color-text, #0f172a);
    font-family: var(--system-font-family, Inter, "Noto Sans SC", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif);
    font-size: var(--system-font-header-size, 32px);
    font-weight: 800;
    line-height: 1.2;
}

.module .system-subheader {
    color: var(--color-muted, #617089);
    font-family: var(--system-font-family, Inter, "Noto Sans SC", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif);
    font-size: var(--system-font-subheader-size, 17px);
    font-weight: 400;
    line-height: 1.55;
}

.module .system-card-title {
    color: var(--color-text, #0f172a);
    font-family: var(--system-font-family, Inter, "Noto Sans SC", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif);
    font-size: var(--system-font-card-title-size, 18px);
    font-weight: 800;
    line-height: 1.25;
}

.module .system-workspace-title {
    color: var(--color-text, #0f172a);
    font-family: var(--system-font-family, Inter, "Noto Sans SC", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif);
    font-size: var(--system-font-workspace-title-size, 20px);
    font-weight: 800;
    line-height: 1.25;
}

.module .system-section-title {
    color: var(--color-muted, #617089);
    font-family: var(--system-font-family, Inter, "Noto Sans SC", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif);
    font-size: var(--system-font-section-title-size, 14px);
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.35;
    text-transform: none;
}

.module .system-label {
    color: var(--color-text, #0f172a);
    font-family: var(--system-font-family, Inter, "Noto Sans SC", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif);
    font-size: var(--system-font-label-size, 14px);
    font-weight: 700;
    line-height: 1.35;
}

.module .system-body {
    color: var(--color-text-strong, #20314f);
    font-family: var(--system-font-family, Inter, "Noto Sans SC", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif);
    font-size: var(--system-font-body-size, 14px);
    font-weight: 400;
    line-height: 1.5;
}

.module .system-caption {
    color: var(--color-muted, #617089);
    font-family: var(--system-font-family, Inter, "Noto Sans SC", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif);
    font-size: var(--system-font-caption-size, 14px);
    font-weight: 400;
    line-height: 1.4;
}

.module .system-metadata {
    color: var(--color-muted, #617089);
    font-family: var(--system-font-family, Inter, "Noto Sans SC", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif);
    font-size: var(--system-font-metadata-size, 11px);
    font-weight: 400;
    line-height: 1.35;
}

.module .system-control {
    font-family: var(--system-font-family, Inter, "Noto Sans SC", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif);
    font-size: var(--system-font-control-size, 13px);
    line-height: 1.35;
}

.module .system-navigation {
    color: var(--color-text-strong, #20314f);
    font-family: var(--system-font-family, Inter, "Noto Sans SC", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif);
    font-size: var(--system-font-navigation-size, 14px);
    font-weight: 400;
    line-height: 1.45;
}

.module .system-text-link {
    align-items: center;
    appearance: none;
    background: transparent;
    border: 0;
    border-radius: 7px;
    box-sizing: border-box;
    color: var(--color-link, #174ea6);
    cursor: pointer;
    display: inline-flex;
    font-family: var(--system-font-family, Inter, "Noto Sans SC", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif);
    font-size: var(--system-font-body-size, 14px);
    font-weight: 700;
    gap: 8px;
    line-height: 1.35;
    margin: 0;
    padding: 0;
    text-align: left;
    text-decoration: none;
}

.module .system-text-link:hover,
.module .system-text-link:active,
.module .system-text-link:focus-visible {
    color: var(--color-link-hover, #1565c0);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.module .system-text-link:focus {
    outline: none;
}

.module .system-text-link:focus-visible {
    outline: 2px solid var(--color-link-border, #90caf9);
    outline-offset: 2px;
}

.module .system-text-link--muted {
    color: var(--color-muted, #617089);
    font-weight: 600;
}

.module .system-text-link--regular {
    font-weight: 400;
}

.module .system-text-link--block {
    display: flex;
    min-height: 34px;
    padding: 6px 10px;
    width: 100%;
}

.module .system-text-link--selected {
    background: var(--color-primary-soft, #eef8f1);
    border: 1px solid var(--color-primary-border, #bce8c9);
    color: var(--color-primary-dark, #05933d);
    font-weight: 800;
    padding: 4px 8px;
    text-decoration: none;
}

.module .system-text-link--block.system-text-link--selected {
    padding: 6px 10px;
}

.module .system-text-link--selected:hover,
.module .system-text-link--selected:active,
.module .system-text-link--selected:focus-visible {
    background: var(--color-primary-hover-soft, #e2f8e9);
    color: var(--color-primary-dark, #05933d);
    text-decoration: none;
}

.module[data-theme-color="green"] {
    --color-primary: #00b845;
    --color-primary-dark: #05933d;
    --color-primary-soft: #eef8f1;
    --color-primary-hover-soft: #e2f8e9;
    --color-primary-border: #bce8c9;
    --color-primary-gradient-start: #12c957;
    --color-primary-gradient-end: #00a53d;
}

.module[data-theme-color="blue"] {
    --color-primary: #4285f4;
    --color-primary-dark: #3367d6;
    --color-primary-soft: #e8f0fe;
    --color-primary-hover-soft: #dbe8fd;
    --color-primary-border: #c6dafc;
    --color-primary-gradient-start: #5e97f6;
    --color-primary-gradient-end: #3367d6;
}

.module[data-theme-color="red"] {
    --color-primary: #db4437;
    --color-primary-dark: #b3261e;
    --color-primary-soft: #fce8e6;
    --color-primary-hover-soft: #fadad7;
    --color-primary-border: #f4c7c3;
    --color-primary-gradient-start: #e95b50;
    --color-primary-gradient-end: #c5221f;
}

.module[data-theme-color="yellow"] {
    --color-primary: #f4b400;
    --color-primary-dark: #c58b00;
    --color-primary-soft: #fef7e0;
    --color-primary-hover-soft: #feefc3;
    --color-primary-border: #fde293;
    --color-primary-gradient-start: #fbbc04;
    --color-primary-gradient-end: #f29900;
}

.module[data-theme-color="orange"] {
    --color-primary: #f4511e;
    --color-primary-dark: #d84315;
    --color-primary-soft: #fbe9e7;
    --color-primary-hover-soft: #ffded6;
    --color-primary-border: #ffccbc;
    --color-primary-gradient-start: #ff7043;
    --color-primary-gradient-end: #e64a19;
}

:root[data-theme="dark"],
.module[data-theme="dark"] {
    --color-primary-soft: rgba(0, 184, 69, 0.18);
    --color-primary-hover-soft: rgba(0, 184, 69, 0.24);
    --color-primary-border: rgba(0, 184, 69, 0.42);

    --color-success: #00b845;
    --color-success-dark: #8fdca4;
    --color-success-soft: #1e3a28;
    --color-success-border: #3e6b4b;

    --color-danger: #f28b82;
    --color-danger-dark: #f28b82;
    --color-danger-soft: #3a1f1f;
    --color-danger-border: #714141;

    --color-warning: #fdd663;
    --color-warning-dark: #fdd663;
    --color-warning-soft: #3b3216;
    --color-warning-border: #7a6320;

    --color-info: #aecbfa;
    --color-info-dark: #aecbfa;
    --color-info-soft: #1d2f45;
    --color-info-border: #3c5f8a;

    --color-text: #e8eaed;
    --color-text-strong: #e8eaed;
    --color-muted: #bdc1c6;
    --color-line: #303134;
    --color-line-strong: #3c4043;
    --color-surface: #191919;
    --color-surface-soft: #2b2c2f;
    --color-page: #191919;
    --color-link: #8ab4f8;
    --color-link-hover: #aecbfa;
    --color-link-soft: #1d2f45;
    --color-link-border: #3c5f8a;
    --color-overlay-soft: rgba(25, 25, 25, 0.78);
    --color-spinner-track: rgba(232, 234, 237, 0.18);
    --color-warning-ring: rgba(253, 214, 99, 0.22);

    --shadow-elevated: 0 18px 44px rgba(0, 0, 0, 0.46);

    background: var(--color-page);
    color: var(--color-text);
    color-scheme: dark;
}

:root[data-theme="dark"][data-theme-color="blue"],
.module[data-theme="dark"][data-theme-color="blue"] {
    --color-primary-soft: rgba(66, 133, 244, 0.18);
    --color-primary-hover-soft: rgba(66, 133, 244, 0.24);
    --color-primary-border: rgba(66, 133, 244, 0.42);
}

:root[data-theme="dark"] .module[data-theme-color="green"],
.module[data-theme="dark"] .module[data-theme-color="green"] {
    --color-primary-soft: rgba(0, 184, 69, 0.18);
    --color-primary-hover-soft: rgba(0, 184, 69, 0.24);
    --color-primary-border: rgba(0, 184, 69, 0.42);
}

:root[data-theme="dark"] .module[data-theme-color="blue"],
.module[data-theme="dark"] .module[data-theme-color="blue"] {
    --color-primary-soft: rgba(66, 133, 244, 0.18);
    --color-primary-hover-soft: rgba(66, 133, 244, 0.24);
    --color-primary-border: rgba(66, 133, 244, 0.42);
}

:root[data-theme="dark"][data-theme-color="red"],
.module[data-theme="dark"][data-theme-color="red"] {
    --color-primary-soft: rgba(219, 68, 55, 0.18);
    --color-primary-hover-soft: rgba(219, 68, 55, 0.24);
    --color-primary-border: rgba(219, 68, 55, 0.42);
}

:root[data-theme="dark"] .module[data-theme-color="red"],
.module[data-theme="dark"] .module[data-theme-color="red"] {
    --color-primary-soft: rgba(219, 68, 55, 0.18);
    --color-primary-hover-soft: rgba(219, 68, 55, 0.24);
    --color-primary-border: rgba(219, 68, 55, 0.42);
}

:root[data-theme="dark"][data-theme-color="yellow"],
.module[data-theme="dark"][data-theme-color="yellow"] {
    --color-primary-soft: rgba(244, 180, 0, 0.18);
    --color-primary-hover-soft: rgba(244, 180, 0, 0.24);
    --color-primary-border: rgba(244, 180, 0, 0.42);
}

:root[data-theme="dark"] .module[data-theme-color="yellow"],
.module[data-theme="dark"] .module[data-theme-color="yellow"] {
    --color-primary-soft: rgba(244, 180, 0, 0.18);
    --color-primary-hover-soft: rgba(244, 180, 0, 0.24);
    --color-primary-border: rgba(244, 180, 0, 0.42);
}

:root[data-theme="dark"][data-theme-color="orange"],
.module[data-theme="dark"][data-theme-color="orange"] {
    --color-primary-soft: rgba(244, 81, 30, 0.18);
    --color-primary-hover-soft: rgba(244, 81, 30, 0.24);
    --color-primary-border: rgba(244, 81, 30, 0.42);
}

:root[data-theme="dark"] .module[data-theme-color="orange"],
.module[data-theme="dark"] .module[data-theme-color="orange"] {
    --color-primary-soft: rgba(244, 81, 30, 0.18);
    --color-primary-hover-soft: rgba(244, 81, 30, 0.24);
    --color-primary-border: rgba(244, 81, 30, 0.42);
}

.module[data-question-font="primary"] {
    --question-font-content-family: var(--question-font-primary-family);
}

.module[data-question-font="secondary"] {
    --question-font-content-family: var(--question-font-secondary-family);
}

.module[data-question-size="14"] {
    --question-font-content-size: 14px;
}

.module[data-question-size="16"] {
    --question-font-content-size: 16px;
}

.module[data-question-size="18"] {
    --question-font-content-size: 18px;
}

.module[data-question-size="20"] {
    --question-font-content-size: 20px;
}

.module[data-question-size="22"] {
    --question-font-content-size: 22px;
}

.module .question-content,
.module .input-section .answer-affix,
.module .input-section .answer-text,
.module .input-section .answer-textarea,
.module .input-section .choice-content,
.module .answer-box,
.module .solution-body {
    color: var(--color-text);
    font-family: var(--question-font-content-family);
    font-size: var(--question-font-content-size);
}

.module .question-content mjx-container,
.module .input-section mjx-container,
.module .answer-box mjx-container,
.module .solution-body mjx-container {
    font-size: var(--question-font-content-size) !important;
}