/* file: portal/app/static/css/theme.css
 *
 * Semantic design tokens — the ONLY tokens components should reference.
 * Semantic tokens use plain names (--primary, --card, --text, etc.).
 *
 * IMPORTANT: This file MUST load AFTER bootstrap.min.css so the Bootstrap
 * bridge overrides (--bs-*) win the cascade.
 *
 * Structure:
 *   1. Surfaces (backgrounds + paired text)
 *   2. Actions (interactive elements + borders, grouped by name)
 *   3. Borders (generic)
 *   4. Interactive backgrounds
 *   5. Text (standalone)
 *   6. Focus
 *   7. Bootstrap bridge (maps tokens into --bs-* variables)
 *
 * Dark mode: override semantic tokens under [data-bs-theme="dark"].
 * Components reference semantic tokens → dark mode is automatic.
 */

@layer semantic {

/* ===========================================
   Light Mode (default)
   =========================================== */

:root {
    /* --- 1. Surfaces (background + paired text) --- */
    --surface:           var(--palette-page-bg);
    --page:              var(--palette-page-bg);
    --page-text:         var(--palette-neutral-900);

    --sidebar:           var(--palette-neutral-50);
    --sidebar-text:      var(--palette-neutral-500);
    --sidebar-active: var(--palette-neutral-200);
    --sidebar-active-text: var(--palette-neutral-1000);
    --sidebar-hover-bg:  var(--palette-neutral-200);
    --sidebar-border:    var(--palette-neutral-300);
    --sidebar-divider:   var(--palette-neutral-300);

    --navbar:            var(--palette-surface);
    --navbar-text:       var(--page-text);

    --card:              var(--palette-surface);
    --card-text:         var(--page-text);
    --card-secondary:    var(--page);
    --card-secondary-text: var(--page-text);
    --card-secondary-border: var(--border-light);
    --card-active:       color-mix(in srgb, var(--palette-blue-600) 12%, transparent);
    --card-active-border: var(--palette-blue-600);
    --card-active-text:  var(--page-text);

    --modal:             var(--palette-surface);
    --modal-text:        var(--page-text);

    --dropdown:          var(--palette-surface);
    --dropdown-text:     var(--page-text);

    --chip:              var(--palette-neutral-200);
    --chip-text:         var(--card-text);
    --chip-border:       var(--border);
    --chip-hover:        var(--palette-neutral-200);
    --chip-hover-border: var(--focus-border);
    --chip-hover-text:   var(--card-text);
    --chip-value:        var(--palette-neutral-300);

    --input:             var(--palette-surface);
    --input-disabled:    var(--palette-neutral-100);
    --input-border:      var(--border);
    --input-text:        var(--page-text);

    /* --- 2. Actions (interactive elements + paired text) --- */
    --primary:           var(--palette-blue-500);
    --primary-rgb:       var(--palette-blue-500-rgb);
    --primary-text:      var(--palette-neutral-0);
    --primary-muted:     var(--palette-blue-300);
    --primary-hover:     var(--palette-blue-600);
    --primary-active:    var(--palette-blue-700);
    --primary-border:    var(--palette-blue-500);

    --secondary:         var(--palette-neutral-500);
    --secondary-hover:   var(--palette-neutral-600);
    --secondary-active:  var(--palette-neutral-700);
    --secondary-rgb:     var(--palette-neutral-500-rgb);
    --secondary-text:    var(--palette-neutral-0);
    --secondary-border:  var(--palette-neutral-500);

    --danger:            var(--palette-red-600);
    --danger-rgb:        var(--palette-red-600-rgb);
    --danger-text:       var(--palette-neutral-0);
    --danger-hover:      var(--palette-red-700);
    --danger-active:     var(--palette-red-800);
    --danger-border:     var(--palette-red-600);

    --warning:           var(--palette-amber-500);
    --warning-rgb:       var(--palette-amber-500-rgb);
    --warning-text:      var(--palette-neutral-900);
    --warning-hover:     var(--palette-amber-600);
    --warning-active:    var(--palette-amber-700);
    --warning-border:    var(--palette-amber-500);

    --success:           var(--palette-green-600);
    --success-rgb:       var(--palette-green-600-rgb);
    --success-text:      var(--palette-neutral-0);
    --success-hover:     var(--palette-green-700);
    --success-active:    color-mix(in srgb, var(--palette-green-700) 85%, black);
    --success-border:    var(--palette-green-600);

    --info:              var(--palette-cyan-600);
    --info-rgb:          var(--palette-cyan-600-rgb);
    --info-text:         var(--palette-neutral-0);
    --info-border:       var(--palette-cyan-600);

    --outline: transparent;
    --outline-bg: var(--palette-neutral-0);
    --outline-text: var(--palette-neutral-500);
    --outline-hover: var(--palette-neutral-500);
    --outline-active: var(--palette-neutral-500);
    --outline-border: var(--palette-neutral-500);

    --active: var(--primary);
    --active-text: var(--primary-text);

    --toggle:              var(--card-active);
    --toggle-border:       var(--card-active-border);
    --toggle-text:         var(--card-active-text);
    --toggle-hover:        color-mix(in srgb, var(--palette-blue-600) 18%, transparent);
    --toggle-hover-border: var(--palette-blue-600);
    --toggle-hover-text:   var(--page-text);

    /* --- 3. Borders (generic) --- */
    --border:            var(--palette-neutral-300);
    --border-light:      var(--palette-neutral-400);
    --border-strong:     var(--palette-neutral-600);
    --border-width:      1px;

    /* --- 4. Interactive backgrounds --- */
    --accent:            #e9e9e98f;
    --hover-bg:          var(--accent);

    /* --- 4a. Component surfaces (accordion, popover reuse card tokens) --- */
    --accordion:         var(--card);
    --accordion-text:    var(--card-text);
    --accordion-border:  var(--border);

    /* --- 5. Text (standalone — not paired to a surface) --- */
    --text:              var(--palette-neutral-900);
    --text-heading:      var(--palette-neutral-1000);
    --text-light:        var(--palette-neutral-500);
    --text-disabled:     var(--palette-neutral-600);
    --text-link:         var(--palette-blue-600);

    /* --- 6. Focus --- */
    --focus-border:      var(--palette-blue-focus);
    --focus-ring:        var(--palette-blue-focus-ring);

    /* Chat */

    --user-message-bubble: #406CFF;
    --assistant-message-bubble: var(--palette-gray-50);

    /* --- 7. Bootstrap bridge ---
     * Maps our semantic tokens into Bootstrap's --bs-* system so existing
     * components that use --bs-* variables pick up design system values.
     *
     * These values are close to — but not pixel-identical to — Bootstrap 5.3's
     * shipped defaults. The differences are minor (e.g., body color shifts from
     * Bootstrap's #212529 to our #111827, border color from #dee2e6 to #e5e7eb).
     * This is intentional: we use our own palette as the source of truth so
     * that future restyle only requires changing colors.css.
     *
     * If you later restyle these to significantly different values, you MUST
     * also set the corresponding *-rgb companions (e.g., --bs-body-color-rgb)
     * because Bootstrap does NOT recompute them from the base variable.
     *
     * Bootstrap 5.3 light defaults vs. our values:
     *   --bs-body-color: #212529        → our --text (--palette-gray-900: #111827)
     *   --bs-body-bg: #fff              → our --page (var(--palette-neutral-0)) — exact match
     *   --bs-border-color: #dee2e6      → our --border (--palette-gray-200: #e5e7eb)
     *
     * NOTE: --bs-secondary-color, --bs-tertiary-color, and --bs-emphasis-color
     * are NOT bridged because Bootstrap computes them as rgba() from the base
     * color + rgb companion. Overriding the base without the rgb companion
     * would break alpha-based styles (e.g., rgba(var(--bs-emphasis-color-rgb), .85)).
     *
     * The --bs-*-rgb companions for action colors (primary, danger, etc.) ARE
     * bridged so Bootstrap utilities like .bg-primary, badges, and focus rings
     * pick up our palette values instead of Bootstrap's defaults.
     */
    --bs-body-font-family:  var(--font-family-sans);
    --bs-font-monospace:    var(--font-family-mono);
    --bs-body-font-size:    var(--font-size-base);
    --bs-body-color:        var(--text);
    --bs-body-bg:           var(--page);
    --bs-primary:           var(--primary);
    --bs-primary-rgb:       var(--primary-rgb);
    --bs-secondary:         var(--secondary);
    --bs-secondary-rgb:     var(--secondary-rgb);
    --bs-danger:            var(--danger);
    --bs-danger-rgb:        var(--danger-rgb);
    --bs-warning:           var(--warning);
    --bs-warning-rgb:       var(--warning-rgb);
    --bs-success:           var(--success);
    --bs-success-rgb:       var(--success-rgb);
    --bs-info:              var(--info);
    --bs-info-rgb:          var(--info-rgb);
    --bs-link-color:        var(--text-link);
    --bs-link-color-rgb:    var(--primary-rgb);
    --bs-border-color:      var(--border);
    --bs-border-radius:     var(--radius-field);
    --bs-border-radius-sm:  var(--radius-field);
    --bs-border-radius-lg:  var(--radius-box);


    /* Markdown Content */
    --md-table-header: #ececec;
}

/* ===========================================
   Dark Mode
   =========================================== */

[data-bs-theme="dark"] {
    /* Palette inversion in colors.css handles the color flip for all
     * tokens that reference numbered palette stops (gray-N, blue-N, etc.).
     * Only override tokens whose light-mode value is a non-inverted
     * reference (--palette-neutral-0, hardcoded hex).
     */

    /* --- Surfaces --- */
    /* --page uses --palette-page-bg which auto-inverts */
    --page:              var(--palette-page-bg);
    --accent:            #2b3242;
    --page-text:         var(--palette-neutral-900);
    --border:            var(--palette-neutral-400);
    --hover-bg:          var(--accent);

    /* Sidebar goes even darker in dark mode */
    --sidebar:             var(--page);
    --sidebar-text:        var(--palette-navy-400);
    --sidebar-active:      var(--palette-neutral-200);
    --sidebar-active-text: var(--palette-neutral-1000);
    --sidebar-hover-bg:    var(--palette-neutral-200);
    --sidebar-border:      var(--palette-neutral-300);
    --sidebar-divider:     var(--palette-neutral-300);

    /* --- Text --- */
    --text-light:          var(--palette-neutral-600);

    /* --- Actions --- */
    --primary-text:      var(--palette-neutral-1000);
    --primary-hover:     var(--palette-blue-400);

    --primary-rgb:       var(--palette-blue-600-rgb);
    --primary-muted:     var(--palette-blue-300);
    --primary-hover:     var(--palette-blue-600);
    --primary-active:    var(--palette-blue-400);

    --secondary:         var(--palette-neutral-400);
    --secondary-rgb:     var(--palette-neutral-400-rgb);
    --secondary-text:    var(--palette-neutral-1000);
    --secondary-hover:   var(--palette-neutral-500);
    --secondary-active:  var(--palette-neutral-300);
    --secondary-border:  var(--palette-neutral-400);

    --danger:            var(--palette-red-500);
    --danger-rgb:        var(--palette-red-500-rgb);
    --danger-text:       var(--palette-neutral-1000);
    --danger-hover:      var(--palette-red-300);
    --danger-active:     var(--palette-red-200);
    --danger-border:     var(--palette-red-500);

    --warning:           var(--palette-amber-500);
    --warning-rgb:       var(--palette-amber-500-rgb);
    --warning-text:      var(--palette-neutral-900);
    --warning-active:    var(--palette-amber-100);
    --warning-border:    var(--palette-amber-500);

    --success:           var(--palette-green-500);
    --success-rgb:       var(--palette-green-500-rgb);
    --success-text:      var(--palette-neutral-0);
    --success-active:    var(--palette-green-100);
    --success-border:    var(--palette-green-500);

    --info:              var(--palette-cyan-500);
    --info-rgb:          var(--palette-cyan-500-rgb);
    --info-text:         var(--palette-neutral-0);
    --info-border:       var(--palette-cyan-500);


    --input:    #1d2026;
    --input-disabled: #2d323b;

    --outline: transparent;
    --outline-bg: transparent;
    --outline-text: var(--palette-neutral-600);
    --outline-hover: var(--palette-neutral-500);
    --outline-active: var(--palette-neutral-500);
    --outline-border: var(--palette-neutral-500);

    /* --- Chips --- */
    --chip:             #2a3648;
    --chip-hover:        var(--palette-neutral-400);
    --chip-value:        var(--palette-neutral-400);

    /* --- Focus --- */
    --focus-border:      var(--palette-blue-focus);
    --focus-ring:        var(--palette-blue-focus-ring);

    /* Chat */
    --user-message-bubble: var(--palette-blue-300);
    --assistant-message-bubble: #ffffff0d;
    /* --- Bootstrap bridge ---
     * Must re-declare bridged --bs-* vars here so they pick up the
     * dark-mode semantic token values. Without this, Bootstrap's own
     * dark defaults would override our light-mode bridge declarations.
     */
    --bs-body-color:       var(--text);
    --bs-body-bg:          var(--page);
    --bs-primary:          var(--primary);
    --bs-primary-rgb:      var(--primary-rgb);
    --bs-secondary:        var(--secondary);
    --bs-secondary-rgb:    var(--secondary-rgb);
    --bs-danger:           var(--danger);
    --bs-danger-rgb:       var(--danger-rgb);
    --bs-warning:          var(--warning);
    --bs-warning-rgb:      var(--warning-rgb);
    --bs-success:          var(--success);
    --bs-success-rgb:      var(--success-rgb);
    --bs-info:             var(--info);
    --bs-info-rgb:         var(--info-rgb);
    --bs-link-color:       var(--text-link);
    --bs-link-color-rgb:   var(--primary-rgb);
    --bs-border-color:     var(--border);

    /* Markdown Content */
    --md-table-header: #222428;
}

} /* end @layer semantic */