/**
 * Theme design tokens — the public contract between themes and components.
 *
 * Bootstrap-inspired palette: semantic color triplets (solid + hover + soft
 * variant for alerts/badges), named surfaces, link/table/form/badge groups.
 * Defaults declared on :root match what the `default` theme currently renders.
 * Per-theme files in `static/css/themes/{ident}.css` override these by
 * re-declaring on :root (and may add selector-based rules where vars are
 * insufficient — e.g. background images, layout tweaks).
 *
 * Loading order (see ThemesFacade::onPrepareUserThemes):
 *   1. tokens.css                       <-- this file, base contract
 *   2. static/css/themes/{ident}.css    <-- per-theme override
 *
 * Contract maintenance: adding a new token here also requires updating every
 * per-theme override that customises that area. Removing a token requires
 * verifying no per-theme file still re-declares it.
 *
 * Vars are intentionally unused by the shared `main.css` (it lives in the
 * `themes/default` git submodule and uses hex literals). Per-theme override
 * files consume vars via `var(--name)` inside their own selectors — the win
 * is one documented source of truth for shared values, not a refactor of
 * the submodule.
 */
:root {
    /* ============ 1. Color palette (semantic) ============ */

    /* Primary — brand / accent / focus */
    --color-primary: #6485df;
    --color-primary-hover: #4a6cc7;
    --color-primary-active: #3a5db8;
    --color-primary-fg: #ffffff;
    --color-primary-soft-bg: #e8efff;
    --color-primary-soft-border: #c8d8ff;

    /* Secondary — neutral grey actions / muted text */
    --color-secondary: #888888;
    --color-secondary-hover: #6e6e6e;
    --color-secondary-fg: #ffffff;

    /* Default — light / outline buttons */
    --color-default-bg: #f5f5f5;
    --color-default-hover-bg: #e0e0e0;
    --color-default-fg: #333333;
    --color-default-border: #cccccc;

    /* Success — confirmations, positive state */
    --color-success: #5cb85c;
    --color-success-hover: #449d44;
    --color-success-fg: #ffffff;
    --color-success-soft-bg: #dff0d8;
    --color-success-soft-border: #d6e9c6;

    /* Info — neutral notifications */
    --color-info: #5bc0de;
    --color-info-hover: #31b0d5;
    --color-info-fg: #ffffff;
    --color-info-soft-bg: #d9edf7;
    --color-info-soft-border: #bce8f1;

    /* Warning — non-blocking notices */
    --color-warning: #f0ad4e;
    --color-warning-hover: #ec971f;
    --color-warning-fg: #333333;
    --color-warning-soft-bg: #fcf8e3;
    --color-warning-soft-border: #faebcc;

    /* Danger — errors, destructive actions */
    --color-danger: #d9534f;
    --color-danger-hover: #c9302c;
    --color-danger-fg: #ffffff;
    --color-danger-soft-bg: #f2dede;
    --color-danger-soft-border: #ebccd1;

    /* ============ 2. Body / surfaces ============ */
    --body-bg: #ffffff;
    --body-fg: #333333;
    --body-pattern: none;

    /* Defaults match the submodule's main.css #header rule so default theme
       renders unchanged. Per-theme files override for lighter/branded skins. */
    --header-bg: #242424;
    --header-fg: #ffffff;
    --header-border: #e0e0e0;

    --panel-bg: #2a2725;
    --panel-fg: #ffffff;
    --panel-active-bg: #1a1816;

    --card-bg: #ffffff;
    --card-fg: #333333;
    --card-border: #e0e0e0;

    /* ============ 3. Links ============ */
    --link-fg: var(--color-primary);
    --link-hover-fg: var(--color-primary-hover);
    --link-decoration: none;

    /* ============ 4. Tables ============ */
    --table-bg: #ffffff;
    --table-fg: #333333;
    --table-header-bg: #f5f5f5;
    --table-header-fg: #333333;
    --table-row-striped-bg: #fafafa;
    --table-row-hover-bg: #f0f0f0;
    --table-border: #e0e0e0;

    /* ============ 5. Forms ============ */
    --input-bg: #ffffff;
    --input-fg: #333333;
    --input-border: #cccccc;
    --input-focus-border: var(--color-primary);
    --input-focus-shadow: 0 0 0 2px rgba(100, 133, 223, 0.25);
    --input-placeholder-fg: #999999;
    --input-disabled-bg: #f5f5f5;

    /* ============ 6. Borders / shadows / radius ============ */
    --border-color: #e0e0e0;
    --border-radius: 0;
    --border-radius-sm: 2px;
    --border-radius-lg: 8px;

    --shadow-color: rgba(0, 0, 0, 0.1);
    --shadow-sm: 0 1px 2px var(--shadow-color);
    --shadow-md: 0 2px 4px var(--shadow-color);
    --shadow-lg: 0 4px 12px var(--shadow-color);

    /* ============ 7. Typography ============ */
    --font-family: "Open Sans", Arial, Helvetica, sans-serif;
    --font-family-monospace: "Courier New", monospace;
    --font-size-base: 13px;
    --font-size-sm: 11px;
    --font-size-lg: 16px;
    --line-height-base: 1.4;

    /* ============ 8. Badges / pills ============ */
    --badge-bg: #ed1c24;
    --badge-fg: #ffffff;
    --badge-font-size: 11px;
    --badge-radius: 10px;

    /* ============ 9. Theme assets ============ */
    --sidebar-icon: none;

    /* ============ 10. Mobile bottom-nav geometry ============ */
    /* Fixed .b-mobile-nav (themes/default/menu_bar.php) shown below 980px.
       These drive the #content clearance in reset.css so page content — action
       buttons, pagination — stays above the bar. --mobile-nav-bar-height mirrors
       .e-nav-bar in the submodule main.css; --mobile-nav-clearance-gap is the
       breathing room above the bar; env(safe-area-inset-bottom) adds the
       home-indicator region inside the native app. */
    --mobile-nav-bar-height: 56px;
    --mobile-nav-clearance-gap: 40px;
    --mobile-nav-clearance: calc(
        var(--mobile-nav-bar-height) + var(--mobile-nav-clearance-gap) + env(safe-area-inset-bottom)
    );
}