/*
 * App design tokens (display-only; not loaded by PDF/export templates).
 *
 * Naming: --color-* semantic variables swap under html.dark (see theme.js / FOUC script).
 *
 * Migration hints (grep when touching templates):
 *   rg "bg-gray-100|bg-white|dark:bg-slate" teacher_aide_app/templates
 *   rg "text-gray-|text-slate-|dark:text-" teacher_aide_app/templates
 *   rg "border-gray-|border-slate-|dark:border-" teacher_aide_app/templates
 *
 * Prefer Tailwind utilities wired in base.html tailwind.config:
 *   bg-app-page, bg-app-surface, text-app-fg, text-app-fg-muted, border-app-border,
 *   bg-app-input-bg, text-app-input-fg (form fields),
 *   bg-app-chrome, text-app-chrome-fg, bg-app-primary, etc.
 *
 * Standalone templates that do not extend base.html (e.g. landing.html) do not load
 * app-tokens.css / theme.js unless duplicated — theme toggle has no effect there until wired.
 */

:root {
    --color-page-bg: #f7f9fb;
    --color-surface: #ffffff;
    --color-border: #e5e7eb;
    --color-fg: #1f2937;
    --color-fg-muted: #4b5563;
    --color-fg-subtle: #6b7280;
    --color-input-bg: #ffffff;
    --color-input-fg: #1f2937;
    --color-primary: #f97316;
    --color-primary-hover: #ea580c;
    --color-ring: rgba(249, 115, 22, 0.45);
    --color-chrome-bg: #111827;
    --color-chrome-fg: #ffffff;
    --color-danger: #dc2626;
    --color-danger-hover: #b91c1c;
}

html.dark {
    --color-page-bg: #0f172a;
    --color-surface: #1e293b;
    --color-border: #334155;
    /* Primary readable text: pure white; muted/subtle stay dimmed (choice B). */
    --color-fg: #ffffff;
    --color-fg-muted: #94a3b8;
    --color-fg-subtle: #64748b;
    --color-input-bg: #0f172a;
    --color-input-fg: #ffffff;
    --color-primary: #fb923c;
    --color-primary-hover: #f97316;
    --color-ring: rgba(251, 146, 60, 0.45);
    /* Header flush with page — same surface as body/main content */
    --color-chrome-bg: var(--color-page-bg);
    --color-chrome-fg: #ffffff;
    --color-danger: #ef4444;
    --color-danger-hover: #dc2626;
}