/* ============================================
   Rame Design System - DevExpress XAF Theme Mapping
   ============================================
   Maps Rame design tokens to DevExpress Blazor
   theme variables for seamless integration.

   IMPORTANT: The themeDetector.js script detects
   dark themes by analyzing --dxbl-body-bg and sets
   data-rame-theme="dark" on the <html> element.
   ============================================ */

/* ========================================
   LIGHT THEME (Default)
   Uses :root tokens from _tokens.css
   ======================================== */

/* ========================================
   DARK THEME OVERRIDES
   Applied when themeDetector.js detects a dark theme
   and sets data-rame-theme="dark" on <html>
   ======================================== */
html[data-rame-theme="dark"] {
    /* Primary colors for dark mode — Gyro Blue at full strength */
    --rame-primary: var(--gyro-blue, #4E9BF5);
    --rame-primary-hover: var(--gyro-blue-soft, #8FBEF9);
    /* Keep in step with _tokens-dark.css — this file loads after it and wins.
       Accent text sits on this tint, so it is the darker step (5.15:1). */
    --rame-primary-light: #16293F;
    --rame-primary-lighter: #101E30;

    /* Background colors — Night ground + brand surfaces */
    --rame-bg-primary: var(--gyro-surface-1, #0E1424);
    --rame-bg-secondary: var(--gyro-surface-2, #131B30);
    --rame-bg-tertiary: var(--gyro-surface-3, #182140);
    --rame-bg-chat: var(--gyro-night, #0A0E1A);
    --rame-bg-hover: #1C2749;
    --rame-bg-input: var(--gyro-surface-2, #131B30);

    /* Text colors */
    --rame-text-primary: var(--gyro-off, #F0F4FF);
    --rame-text-secondary: #B6C2D8;
    --rame-text-tertiary: #94A3BE;
    --rame-text-muted: var(--gyro-muted, #7A8BAA);
    --rame-text-chat: var(--gyro-off, #F0F4FF);
    --rame-text-meta: #9AA9C2;

    /* Border colors */
    --rame-border-light: var(--gyro-border, rgba(122, 139, 170, .16));
    --rame-border-medium: var(--gyro-border-strong, rgba(122, 139, 170, .32));
    --rame-border-dark: rgba(122, 139, 170, .48);

    /* Scrollbar */
    --rame-scrollbar-thumb: rgba(122, 139, 170, .38);
    --rame-scrollbar-thumb-hover: rgba(122, 139, 170, .58);

    /* Shadows adjusted for dark mode */
    --rame-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
    --rame-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35);
    --rame-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.4);
    --rame-shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.5);
    --rame-shadow-xl: 0 8px 24px rgba(0, 0, 0, 0.6);
    --rame-shadow-message: 0 1px 1px rgba(0, 0, 0, 0.2);

    /* Message bubble for dark */
    --rame-success: var(--gyro-teal, #2CE0B4);
    --rame-success-light: var(--gyro-teal-shade, #123A33);
    --rame-success-lighter: #0F2C27;

    /* Error/Warning in dark */
    --rame-error: var(--gyro-danger, #F2637B);
    --rame-error-light: #3A1820;
    --rame-warning: var(--gyro-amber, #F5A623);
    --rame-warning-light: var(--gyro-amber-shade, #43331A);

    /* Status colors for dark mode */
    --rame-status-online: var(--gyro-teal, #2CE0B4);
    --rame-status-offline: var(--gyro-muted, #7A8BAA);
    --rame-status-busy: var(--gyro-danger, #F2637B);
}

/* ========================================
   BLAZING BERRY THEME (Purple/Pink dark theme)
   Additional overrides for berry-specific colors
   ======================================== */
html[data-rame-theme="dark"].rame-theme-berry {
    --rame-primary: #9c27b0;
    --rame-primary-hover: #7b1fa2;
    --rame-primary-light: #2d1a33;

    --rame-accent: #e91e63;
    --rame-accent-hover: #c2185b;

    /* Berry-specific dark backgrounds */
    --rame-bg-primary: #1a1a2e;
    --rame-bg-secondary: #16213e;
    --rame-bg-tertiary: #1f2940;
    --rame-bg-chat: #0f0f23;
    --rame-bg-hover: #2a3754;
    --rame-bg-input: #2a3754;

    --rame-border-light: #2a3754;
    --rame-border-medium: #3a4764;

    --rame-scrollbar-thumb: #3a4764;
    --rame-scrollbar-thumb-hover: #4a5774;
}

/* ========================================
   HIGH CONTRAST MODE
   ======================================== */
@media (prefers-contrast: high) {
    html[data-rame-theme="dark"] {
        --rame-border-light: #ffffff;
        --rame-border-medium: #ffffff;
        --rame-text-secondary: var(--rame-text-primary);
        --rame-text-tertiary: var(--rame-text-primary);
    }

    :root:not([data-rame-theme="dark"]) {
        --rame-border-light: #000000;
        --rame-border-medium: #000000;
        --rame-text-secondary: var(--rame-text-primary);
        --rame-text-tertiary: var(--rame-text-primary);
    }
}

/* ========================================
   REDUCED MOTION
   ======================================== */
@media (prefers-reduced-motion: reduce) {
    :root {
        --rame-transition-base: none;
        --rame-transition-fast: none;
        --rame-transition-slow: none;
        --rame-transition-spring: none;
    }
}

/* ========================================
   PRINT STYLES
   ======================================== */
@media print {
    :root,
    html[data-rame-theme="dark"] {
        --rame-bg-primary: #ffffff;
        --rame-bg-secondary: #ffffff;
        --rame-bg-tertiary: #ffffff;
        --rame-text-primary: #000000;
        --rame-text-secondary: #333333;
        --rame-shadow-xs: none;
        --rame-shadow-sm: none;
        --rame-shadow-md: none;
        --rame-shadow-lg: none;
    }
}