/* colors/bootstrap-evf-colors-app.css
   Purpose:
   - Define app-level color roles that reusable components and overrides consume.
   May contain:
   - Shared component meaning tokens
   - App surface, nav, form, badge, button, switch, and markdown tokens
   - Compatibility aliases between old and new EVF token families
   Must not contain:
   - Component selectors
   - Raw palette definitions
   - Bootstrap variable remaps
   Dependencies:
   - Requires bootstrap-evf-colors-base.css to be loaded first.
   Scope:
   - Global app color roles only.
*/

/*
=========================================================
App color roles
These tokens describe how the app uses the EVF palette.
=========================================================
*/

:root,
[data-bs-theme=light] {
    /* Badge contrast */
    --evf-badge-on-colored: var(--evf-creammap);
    --evf-badge-on-neutral: var(--evf-bluecoat-base);

    /* Button helpers */
    --evf-btn-fg-on-dark: var(--evf-creammap);
    --evf-btn-fg-on-light: var(--evf-bluecoat-base);
    --evf-btn-shadow-active: inset 0 3px 5px rgba(0, 0, 0, 0.125);

    /* Reusable card surface */
    --evf-surface-card-bg-rgb: 240, 245, 247;
    --evf-surface-card-border-rgb: var(--evf-bluecoat-base-rgb);
    --evf-surface-card-highlight-rgb: var(--evf-creammap-rgb);
    --evf-surface-card-shadow-rgb: var(--evf-bluecoat-base-rgb);
    --evf-surface-card-title-rgb: var(--evf-bluecoat-base-rgb);
    --evf-surface-card-muted-rgb: var(--evf-bluecoat-base-rgb);

    --evf-surface-card-bg: rgb(var(--evf-surface-card-bg-rgb));
    --evf-surface-card-border: rgba(var(--evf-surface-card-border-rgb), 0.10);
    --evf-surface-card-highlight: rgba(var(--evf-surface-card-highlight-rgb), 0.78);
    --evf-surface-card-title: rgb(var(--evf-surface-card-title-rgb));
    --evf-surface-card-muted: rgba(var(--evf-surface-card-muted-rgb), 0.78);

    /* Temporary compatibility aliases for existing public-card usages */
    --evf-public-card-bg-rgb: var(--evf-surface-card-bg-rgb);
    --evf-public-card-border-rgb: var(--evf-surface-card-border-rgb);
    --evf-public-card-highlight-rgb: var(--evf-surface-card-highlight-rgb);
    --evf-public-card-shadow-rgb: var(--evf-surface-card-shadow-rgb);
    --evf-public-card-title-rgb: var(--evf-surface-card-title-rgb);
    --evf-public-card-muted-rgb: var(--evf-surface-card-muted-rgb);

    --evf-public-card-bg: var(--evf-surface-card-bg);
    --evf-public-card-border: var(--evf-surface-card-border);
    --evf-public-card-highlight: var(--evf-surface-card-highlight);
    --evf-public-card-title: var(--evf-surface-card-title);
    --evf-public-card-muted: var(--evf-surface-card-muted);

    /* Inactive and read-only form controls */
    --evf-form-inactive-bg-rgb: 243, 247, 249;
    --evf-form-inactive-border-rgb: var(--evf-bluecoat-base-rgb);
    --evf-form-inactive-text-rgb: var(--evf-bluecoat-base-rgb);
    --evf-form-inactive-label-rgb: var(--evf-bluecoat-base-rgb);
    --evf-form-inactive-placeholder-rgb: var(--evf-bluecoat-base-rgb);
    --evf-form-inactive-shadow-rgb: var(--evf-bluecoat-base-rgb);

    --evf-form-inactive-bg: rgb(var(--evf-form-inactive-bg-rgb));
    --evf-form-inactive-border: rgba(var(--evf-form-inactive-border-rgb), 0.18);
    --evf-form-inactive-text: rgba(var(--evf-form-inactive-text-rgb), 0.96);
    --evf-form-inactive-label: rgba(var(--evf-form-inactive-label-rgb), 0.60);
    --evf-form-inactive-placeholder: rgba(var(--evf-form-inactive-placeholder-rgb), 0.56);
    --evf-form-inactive-shadow: inset 0 1px 0 rgba(var(--evf-form-inactive-shadow-rgb), 0.03);

    /* Markdown surface */
    --evf-markdown-text: var(--evf-bluecoat-base);
    --evf-markdown-bg: color-mix(in srgb, var(--evf-creammap) 86%, var(--evf-bluecoat-base-90) 14%);
    --evf-markdown-border: var(--evf-bluecoat-base-70);
    --evf-markdown-inset-shadow: inset 0 1px 0 rgba(var(--evf-creammap-rgb), 0.04);
    --evf-markdown-heading: var(--evf-bluecoat-base);
    --evf-markdown-link: var(--evf-bluecoat-base);
    --evf-markdown-link-hover: var(--evf-bluecoat-violet);
    --evf-markdown-quote-bg: var(--evf-bluecoat-base-90);
    --evf-markdown-quote-border: var(--evf-bluecoat-base-70);
    --evf-markdown-quote-text: rgba(var(--evf-bluecoat-base-rgb), 0.75);
    --evf-markdown-code-text: var(--evf-bluecoat-teal);
    --evf-markdown-code-bg: color-mix(in srgb, var(--evf-creammap) 82%, var(--evf-bluecoat-base-70) 18%);
    --evf-markdown-pre-bg: color-mix(in srgb, var(--evf-creammap) 88%, var(--evf-bluecoat-base-90) 12%);
    --evf-markdown-table-header-bg: var(--evf-bluecoat-base-90);
    --evf-markdown-table-header-text: var(--evf-tarink);
    --evf-markdown-table-row-alt-bg: color-mix(in srgb, var(--evf-creammap) 86%, var(--evf-bluecoat-base-90) 14%);

    /* Shared navigation */
    --evf-nav-header-bg: var(--evf-creammap);
    --evf-nav-footer-bg: var(--evf-creammap);
    --evf-nav-border: rgba(var(--evf-bluecoat-base-rgb), 0.1);
    --evf-nav-link-color: var(--evf-bluecoat-base);
    --evf-nav-link-hover-bg: rgba(var(--evf-bluecoat-base-rgb), 0.1);
    --evf-nav-link-active-bg: rgba(var(--evf-bluecoat-base-rgb), 0.1);
    --evf-nav-icon-color-active: var(--evf-bluecoat-base);
    --evf-nav-icon-color: var(--evf-bluecoat-base);
    --evf-nav-toggler-bg: var(--evf-creammap);
    --evf-nav-toggler-icon-color: var(--evf-bluecoat-base);
    --evf-nav-toggler-bg-checked: var(--evf-creammap);
    --evf-nav-toggler-icon-color-checked: var(--evf-bluecoat-base);
    --evf-nav-focus-ring: var(--evf-bluecoat-base);
    --evf-nav-toggler-border: rgba(var(--evf-bluecoat-base-rgb), 0.5);

    /* Switches */
    --evf-ui-switch-track-off: var(--evf-creammap);
    --evf-ui-switch-track-on: var(--evf-bluecoat-base);
    --evf-ui-switch-knob-off: rgba(var(--evf-bluecoat-base-rgb), 0.5);
    --evf-ui-switch-knob-on: var(--evf-creammap);
}

[data-bs-theme=dark] {
    /* Badge contrast */
    --evf-badge-on-colored: var(--evf-tarink);
    --evf-badge-on-neutral: var(--evf-icesail-base);

    /* Button helpers */
    --evf-btn-fg-on-dark: var(--evf-icesail-base);
    --evf-btn-fg-on-light: var(--evf-tarink);
    --evf-btn-shadow-active: inset 0 3px 5px rgba(0, 0, 0, 0.125);

    /* Reusable card surface */
    --evf-surface-card-bg-rgb: 18, 31, 36;
    --evf-surface-card-border-rgb: var(--evf-icesail-base-rgb);
    --evf-surface-card-highlight-rgb: var(--evf-icesail-base-rgb);
    --evf-surface-card-shadow-rgb: 0, 0, 0;
    --evf-surface-card-title-rgb: var(--evf-icesail-base-rgb);
    --evf-surface-card-muted-rgb: var(--evf-icesail-base-rgb);

    --evf-surface-card-bg: rgb(var(--evf-surface-card-bg-rgb));
    --evf-surface-card-border: rgba(var(--evf-surface-card-border-rgb), 0.14);
    --evf-surface-card-highlight: rgba(var(--evf-surface-card-highlight-rgb), 0.08);
    --evf-surface-card-title: rgb(var(--evf-surface-card-title-rgb));
    --evf-surface-card-muted: rgba(var(--evf-surface-card-muted-rgb), 0.82);

    /* Temporary compatibility aliases for existing public-card usages */
    --evf-public-card-bg-rgb: var(--evf-surface-card-bg-rgb);
    --evf-public-card-border-rgb: var(--evf-surface-card-border-rgb);
    --evf-public-card-highlight-rgb: var(--evf-surface-card-highlight-rgb);
    --evf-public-card-shadow-rgb: var(--evf-surface-card-shadow-rgb);
    --evf-public-card-title-rgb: var(--evf-surface-card-title-rgb);
    --evf-public-card-muted-rgb: var(--evf-surface-card-muted-rgb);

    --evf-public-card-bg: var(--evf-surface-card-bg);
    --evf-public-card-border: var(--evf-surface-card-border);
    --evf-public-card-highlight: var(--evf-surface-card-highlight);
    --evf-public-card-title: var(--evf-surface-card-title);
    --evf-public-card-muted: var(--evf-surface-card-muted);

    /* Inactive and read-only form controls */
    --evf-form-inactive-bg-rgb: 20, 33, 39;
    --evf-form-inactive-border-rgb: var(--evf-icesail-base-rgb);
    --evf-form-inactive-text-rgb: var(--evf-icesail-base-rgb);
    --evf-form-inactive-label-rgb: var(--evf-icesail-base-rgb);
    --evf-form-inactive-placeholder-rgb: var(--evf-icesail-base-rgb);
    --evf-form-inactive-shadow-rgb: var(--evf-icesail-base-rgb);

    --evf-form-inactive-bg: rgb(var(--evf-form-inactive-bg-rgb));
    --evf-form-inactive-border: rgba(var(--evf-form-inactive-border-rgb), 0.16);
    --evf-form-inactive-text: rgba(var(--evf-form-inactive-text-rgb), 0.94);
    --evf-form-inactive-label: rgba(var(--evf-form-inactive-label-rgb), 0.58);
    --evf-form-inactive-placeholder: rgba(var(--evf-form-inactive-placeholder-rgb), 0.50);
    --evf-form-inactive-shadow: inset 0 1px 0 rgba(var(--evf-form-inactive-shadow-rgb), 0.04);

    /* Markdown surface */
    --evf-markdown-text: var(--evf-icesail-base);
    --evf-markdown-bg: color-mix(in srgb, var(--evf-tarink) 82%, var(--evf-bluecoat-base-20) 18%);
    --evf-markdown-border: var(--evf-bluecoat-base-30);
    --evf-markdown-inset-shadow: inset 0 1px 0 rgba(var(--evf-icesail-base-rgb), 0.04);
    --evf-markdown-heading: var(--evf-icesail-base);
    --evf-markdown-link: var(--evf-icesail-base);
    --evf-markdown-link-hover: var(--evf-icesail-purple);
    --evf-markdown-quote-bg: var(--evf-bluecoat-base-20);
    --evf-markdown-quote-border: var(--evf-bluecoat-base-30);
    --evf-markdown-quote-text: rgba(var(--evf-icesail-base-rgb), 0.75);
    --evf-markdown-code-text: var(--evf-icesail-teal);
    --evf-markdown-code-bg: color-mix(in srgb, var(--evf-tarink) 78%, var(--evf-bluecoat-base-30) 22%);
    --evf-markdown-pre-bg: color-mix(in srgb, var(--evf-tarink) 84%, var(--evf-bluecoat-base-20) 16%);
    --evf-markdown-table-header-bg: var(--evf-bluecoat-base-20);
    --evf-markdown-table-header-text: var(--evf-creammap);
    --evf-markdown-table-row-alt-bg: color-mix(in srgb, var(--evf-tarink) 82%, var(--evf-bluecoat-base-20) 18%);

    /* Shared navigation */
    --evf-nav-header-bg: var(--evf-tarink);
    --evf-nav-footer-bg: var(--evf-tarink);
    --evf-nav-border: rgba(var(--evf-icesail-base-rgb), 0.1);
    --evf-nav-link-color: var(--evf-icesail-base);
    --evf-nav-link-hover-bg: rgba(var(--evf-icesail-base-rgb), 0.1);
    --evf-nav-link-active-bg: rgba(var(--evf-icesail-base-rgb), 0.1);
    --evf-nav-icon-color-active: var(--evf-icesail-base);
    --evf-nav-icon-color: var(--evf-icesail-base);
    --evf-nav-toggler-bg: var(--evf-tarink);
    --evf-nav-toggler-icon-color: var(--evf-icesail-base);
    --evf-nav-toggler-bg-checked: var(--evf-tarink);
    --evf-nav-toggler-icon-color-checked: var(--evf-icesail-base);
    --evf-nav-focus-ring: var(--evf-icesail-base);
    --evf-nav-toggler-border: rgba(var(--evf-icesail-base-rgb), 0.5);

    /* Switches */
    --evf-ui-switch-track-off: var(--evf-tarink);
    --evf-ui-switch-track-on: var(--evf-icesail-base);
    --evf-ui-switch-knob-off: rgba(var(--evf-icesail-base-rgb), 0.5);
    --evf-ui-switch-knob-on: var(--evf-tarink);
}