/* ========================================
   RUDDHAACONNECT - CSS VARIABLES
   Global Theme Variables
   ======================================== */

:root {
    /* Colors - Ruddhaa Theme */
    --primary-color: #1f6bff;
    /* FIX (global theme root cause): rgba() can't take a hex custom
       property directly, so every focus ring / hover overlay / tinted
       shadow that needed the primary color at reduced opacity was
       hardcoded to this literal rgb triplet instead — meaning it
       silently ignored a tenant's chosen theme color everywhere it
       appeared. This triplet is kept in sync with --primary-color by
       theme-boot.js/theme.js whenever the theme is applied, so
       rgba(var(--primary-color-rgb), X) now tracks the real color. */
    --primary-color-rgb: 31, 107, 255;
    --secondary-color: #dbe7ff;
    --background-color: #f5f7fb;
    --text-primary: #111;
    --text-secondary: #666;
    --text-tertiary: #999;
    --border-color: #e0e0e0;
    --success-color: #4caf50;
    --warning-color: #ff9800;
    --danger-color: #e53935;
    --info-color: #2196f3;

    /* FIX: cards were hardcoded to solid #fff throughout the shared
       CSS (cards.css, global.css, layout.css, tables.css, modals.css,
       forms.css), with no variable and no way to theme them. These
       four are new, real theme controls (Settings → Theme & Colors),
       not just renamed existing ones. Defaults below give the
       glassmorphic look (semi-transparent + blur) by default, on
       every page using the shared card/table/modal/form styles,
       without needing a value set in portal_config first. */
    --text-color: var(--text-primary);
    --heading-color: var(--text-primary);
    --card-color: rgba(255, 255, 255, 0.55);
    --kpi-title-color: #8a93a6;
    --kpi-content-color: var(--heading-color);
    --card-blur: 16px;
    --card-border: rgba(0, 0, 0, 0.08);
    --menu-color: #111622;
    --menu-text-color: #ffffff;

    /* Sidebar */
    --sidebar-width: 240px;
    --sidebar-color: var(--menu-color);
    --sidebar-text: var(--menu-text-color);
    
    /* Header
       FIX: linked directly to --menu-color (not just given a similar
       default) — same variable the sidebar uses, so Settings' one
       "Menu Color" control governs both, and they can never end up
       out of sync with each other. */
    --header-height: 60px;
    --header-bg: var(--menu-color);
    --header-shadow: 0 2px 8px rgba(0,0,0,.07);
    
    /* Typography */
    --font-family: 'Segoe UI', sans-serif;
    --font-size-base: 13px;
    --font-size-lg: 14px;
    --font-size-xl: 16px;
    --font-size-heading: 20px;
    
    /* Spacing */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 12px;
    --spacing-lg: 16px;
    --spacing-xl: 20px;
    --spacing-2xl: 24px;
    
    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 10px;
    
    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;
    
    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
    --shadow-md: 0 1px 6px rgba(0,0,0,0.08);
    --shadow-lg: 0 4px 12px rgba(0,0,0,0.1);
    
    /* Z-index */
    --z-sidebar: 100;
    --z-header: 200;
    --z-modal: 300;
    --z-tooltip: 400;
}

/* FIX (real, confirmed bug — reported as "text in input boxes is too
   light and unreadable"): this dark-mode block changed --text-primary
   to a light gray and --background-color to near-black, but never
   correspondingly darkened input/card backgrounds — those stay
   hardcoded white (see input/select/textarea's `background: #fff` in
   global.css, and --card-color's semi-transparent white above, both
   untouched here). The practical result, for any user on a device set
   to prefer dark mode (the default on a lot of modern phones/laptops,
   not a rare setting): every input box, and most on-card text
   generally, rendered light-gray text on a white background —
   exactly the reported symptom, and not limited to the one modal it
   was first noticed on. Explicitly labeled "(future)" in the original
   comment — this was an unfinished feature, not a working dark mode,
   and it was silently breaking readability for real users. Removed
   rather than half-fixed, since properly supporting dark mode would
   need every card/input background updated to match, not just the
   text variables — a real, separate feature to build deliberately if
   wanted, not something to leave partially on by accident.
@media (prefers-color-scheme: dark) {
    :root {
        --background-color: #0f1419;
        --text-primary: #e0e0e0;
        --text-secondary: #b0b0b0;
        --border-color: #333;
    }
}
*/

/* High contrast mode */
@media (prefers-contrast: more) {
    :root {
        --border-color: #000;
        --text-primary: #000;
    }
}