/* SEIM Shared UI Tokens
   Single source of truth for brand + cross-surface semantic tokens.

   Used by:
   - Vue SPA (frontend-vue/index.html + Vite /static proxy)
   - Wagtail CMS public pages (cms/templates/cms/base.html)
   - Remaining Django templates (static/css/main.css import)
*/

:root {
    /* Brand */
    --seim-brand-primary: #667eea;
    --seim-brand-secondary: #764ba2;

    /* Bootstrap-compatible theme variables (applies to both Django + SPA) */
    --bs-primary: var(--seim-brand-primary);
    --bs-primary-rgb: 102, 126, 234;
    --bs-link-color: var(--seim-brand-primary);
    --bs-link-hover-color: #5468d9;

    /* Map project-wide primitives to brand (Django utilities consume these) */
    --primary-color: var(--seim-brand-primary);
    --primary-hover: #5468d9;
    --primary-dark: #4557c6;
    --primary-light: rgba(102, 126, 234, 0.12);
}

/*
  Surface primitives used by SPA (+ Django when colors.css is also loaded).
  Fallbacks keep --seim-* resolvable even if colors.css fails to load (Vite-only).
*/
:root {
    --bg-primary: #ffffff;
    --bg-secondary: #f8f9fa;
    --bg-tertiary: #e9ecef;
    --text-primary: #212529;
    --text-secondary: #495057;
    --text-muted: #6c757d;
    --border-color: #dee2e6;
    --border-color-light: #e9ecef;

    /* Cross-surface semantic tokens (SPA uses --seim-*) */
    --seim-app-bg: var(--bg-secondary);
    --seim-surface-bg: var(--bg-primary);
    --seim-surface-text: var(--text-primary);
    --seim-border-color: var(--border-color);
    --seim-muted: var(--text-muted);
}

html[data-theme="light"] {
    --bg-primary: #ffffff;
    --bg-secondary: #f8f9fa;
    --bg-tertiary: #e9ecef;
    --text-primary: #212529;
    --text-secondary: #495057;
    --text-muted: #6c757d;
    --border-color: #dee2e6;
    --border-color-light: #e9ecef;
    color-scheme: light;
}

/* Ensure dark mode sets browser chrome for form controls/scrollbars */
html[data-theme="dark"] {
    --bg-primary: #212529;
    --bg-secondary: #343a40;
    --bg-tertiary: #495057;
    --text-primary: #f8f9fa;
    --text-secondary: #e9ecef;
    --text-muted: #adb5bd;
    --border-color: #495057;
    --border-color-light: #6c757d;
    color-scheme: dark;
}