/**
 * Base theme styles - Project-agnostic template
 *
 * This file provides theme CSS variables based on data attributes.
 * Customize the CSS variables below to match your design system.
 *
 * Usage:
 * - `/theme-bootstrap.js` in `app.html` runs before these sheets (native browser first paint).
 * - Linked from `app.html` before `main.css` (static asset: `/styles/base.css`)
 * - `autoThemeManager` sets `data-theme` (backend-synced clock when View → Auto, else user color from View)
 *   `themeManager` sets `data-font-size` and `data-animation-speed`
 * - Use the CSS variables throughout your application
 */

/* Default Theme (Light) - matches theme manager default */
:root {
    /* Native scrollbars, form controls, and UA chrome follow the active palette. */
    color-scheme: light;
    /* Customize these variables for your default theme */
    /*
     * Font stacks (override per project):
     * - --app-font-system: window chrome (title bar, status bar, menus)
     * - --app-font-body: main content in .app-content
     * - --app-font-heading: h1–h6
     */
    --app-font-system: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
    --app-font-body: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
    --app-font-heading: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;

    --app-bg: #ffffff;
    --app-bg-highlight: #f0f0f0;
    --app-text: #333333;
    --app-text-dim: #666666;
    --app-accent: #000000;
    --app-border: #cccccc;
    --app-success: #00aa00;
    --app-warning: #ff8800;
    --app-error: #cc0000;
    --app-active: #0066cc;

    /* Brand marks / header logos: monochrome that flips with theme */
    --logo-filter: grayscale(100%) contrast(150%);

    /* Window chrome — duplicate in main.css; change both if you resize bars */
    --title-bar-height: 24px;
    --status-bar-height: 20px;

    /*
     * Shell typography: fixed size regardless of data-font-size (content zoom).
     * Use for title menus, status zoom readout, and status bar buttons.
     */
    --font-size-chrome-menu: 12px;
    --font-size-chrome-status-readout: 11px;
    --font-size-chrome-status-btn: 12px;

    /*
     * Modal / dialog stacking above fixed shell (title-bar.css, status-bar.css, page-header.css).
     * .title-bar z-index 10050, .status-bar 10040, .dashboard-header 1001.
     */
    --app-dialog-overlay-z: 10060;
    --app-dialog-content-z: 10061;
}

/* Dark Theme */
[data-theme="dark"] {
    color-scheme: dark;
    scrollbar-color: var(--app-border) var(--app-bg);
    --app-bg: #000000;
    --app-bg-highlight: #1a1a1a;
    --app-text: #d8d8d8;
    --app-text-dim: #a0a0a0;
    --app-accent: #ffffff;
    --app-border: #333333;
    --app-success: #44ff44;
    --app-warning: #ffaa00;
    --app-error: #ff4444;
    --app-active: #0e93ff;
    --logo-filter: grayscale(100%) contrast(150%) invert(1);
}

/* Light Theme */
[data-theme="light"] {
    color-scheme: light;
    scrollbar-color: var(--app-border) var(--app-bg);
    --app-bg: #ffffff;
    --app-bg-highlight: #f0f0f0;
    --app-text: #333333;
    --app-text-dim: #666666;
    --app-accent: #000000;
    --app-border: #cccccc;
    --app-success: #00aa00;
    --app-warning: #ff8800;
    --app-error: #cc0000;
    --app-active: #0066cc;
    --logo-filter: grayscale(100%) contrast(150%);
}

/* High Contrast Theme */
[data-theme="high-contrast"] {
    color-scheme: dark;
    scrollbar-color: var(--app-border) var(--app-bg);
    --app-bg: #000000;
    --app-bg-highlight: #222222;
    --app-text: #ffffff;
    --app-text-dim: #b1b1b1;
    --app-accent: #ffff00;
    --app-border: #ffffff;
    --app-success: #00ff00;
    --app-warning: #ffff00;
    --app-error: #ff0000;
    --app-active: #00ffff;
    --logo-filter: grayscale(100%) contrast(150%) invert(1) brightness(1.2);
}

/* Font Size Variables */
:root,
[data-font-size="medium"] {
    --font-size-base: 14px;
    --font-size-small: 12px;
    --font-size-large: 16px;
    --font-size-h1: 24px;
    --font-size-h2: 18px;
    --font-size-h3: 16px;
    --font-size-h4: 14px;
    --font-size-h5: 13px;
    --font-size-h6: 12px;
    --font-size-button: 13px;
    --font-size-label: 12px;
    --font-size-caption: 11px;
    --font-size-table: 13px;
    --font-size-modal: 15px;
    --font-size-status: 12px;
}

[data-font-size="small"] {
    --font-size-base: 12px;
    --font-size-small: 10px;
    --font-size-large: 14px;
    --font-size-h1: 20px;
    --font-size-h2: 16px;
    --font-size-h3: 14px;
    --font-size-h4: 12px;
    --font-size-h5: 11px;
    --font-size-h6: 10px;
    --font-size-button: 11px;
    --font-size-label: 10px;
    --font-size-caption: 9px;
    --font-size-table: 11px;
    --font-size-modal: 13px;
    --font-size-status: 10px;
}

[data-font-size="large"] {
    --font-size-base: 16px;
    --font-size-small: 14px;
    --font-size-large: 18px;
    --font-size-h1: 28px;
    --font-size-h2: 20px;
    --font-size-h3: 18px;
    --font-size-h4: 16px;
    --font-size-h5: 15px;
    --font-size-h6: 14px;
    --font-size-button: 15px;
    --font-size-label: 14px;
    --font-size-caption: 13px;
    --font-size-table: 15px;
    --font-size-modal: 17px;
    --font-size-status: 14px;
}

/* Animation Speed Variables */
:root,
[data-animation-speed="normal"] {
    --animation-duration-fast: 0.15s;
    --animation-duration-normal: 0.3s;
    --animation-duration-slow: 0.5s;
}

[data-animation-speed="fast"] {
    --animation-duration-fast: 0.1s;
    --animation-duration-normal: 0.2s;
    --animation-duration-slow: 0.3s;
}

[data-animation-speed="slow"] {
    --animation-duration-fast: 0.25s;
    --animation-duration-normal: 0.5s;
    --animation-duration-slow: 0.8s;
}

/*
 * Shadcn subtree bridge: semantic vars (--background, --card, …) inherit from `--app-*`
 * on wrappers (e.g. `Card.Root` with `class="app-shadcn-surface"`). Global defaults also
 * map in `lib/tailwind.css` (`:root`); keep this class for coherent subtrees/portals when needed.
 */
.app-shadcn-surface {
    --background: var(--app-bg);
    --foreground: var(--app-text);
    --card: var(--app-bg);
    --card-foreground: var(--app-text);
    --popover: var(--app-bg);
    --popover-foreground: var(--app-text);
    --primary: var(--app-accent);
    --primary-foreground: var(--app-bg);
    --secondary: var(--app-bg-highlight);
    --secondary-foreground: var(--app-text);
    --muted: var(--app-bg-highlight);
    --muted-foreground: var(--app-text-dim);
    --accent: var(--app-bg-highlight);
    --accent-foreground: var(--app-text);
    --destructive: var(--app-error);
    --destructive-foreground: var(--app-bg);
    --border: var(--app-border);
    --input: var(--app-border);
    --ring: var(--app-active);
}