/**
 * gdo Theme Variables
 * Centralized design tokens for consistent theming
 *
 * FILE PURPOSE: Core CSS variables (colors, spacing, typography, shadows, transitions)
 * LOAD ORDER: 1st - Foundation layer
 * DEPENDENCIES: None
 * USED BY: All other CSS files
 *
 * ORGANIZATION:
 * - Brand Colors (Harrison Consulting mauve/purple gradient)
 * - Theme Colors (light/dark mode backgrounds, text, borders)
 * - Semantic Colors (success, warning, error states)
 * - Typography (font families, sizes, weights, line heights)
 * - Spacing Scale (consistent spacing units)
 * - Shadows & Elevation (depth hierarchy)
 * - Border Radius (consistent corner radii)
 * - Transitions (timing and easing functions)
 *
 * CONVENTIONS:
 * - Use semantic names (--text-primary, not --color-1)
 * - Define both light and dark mode values
 * - Document units and purpose in comments
 * - Prefix component-specific variables (--navbar-*, --card-*)
 */

:root {
    /* ====== Brand Colors (Harrison Consulting) ====== */
    /* Values from SecretSwap design: linear-gradient(135deg, #9d5a6d 0%, #593d6c 100%) */
    --gdo-mauve: #9d5a6d;
    --gdo-purple: #593d6c;
    --gdo-mauve-light: #b47484;
    --gdo-purple-dark: #4a3159;

    /* ====== Theme Colors - Light Mode (Default) ====== */
    --bg-primary: #fafbfc;
    --bg-secondary: #f3f4f6;
    --bg-tertiary: #e5e7eb;
    --bg-navbar: linear-gradient(135deg, var(--gdo-mauve) 0%, var(--gdo-purple) 100%);
    --bg-footer: #f3f4f6;

    --text-primary: #1f2937;
    --text-secondary: #6b7280;
    --text-muted: #9ca3af;
    --text-inverse: #ffffff;

    --border-color: #e1e8ed;
    --border-color-light: rgba(0, 0, 0, 0.08);

    --link-color: var(--gdo-purple);
    --link-hover: var(--gdo-mauve);

    --shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    --shadow-md: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    --shadow-brand: 0 4px 16px rgba(157, 90, 109, 0.25);
    --shadow-brand-hover: 0 8px 24px rgba(157, 90, 109, 0.35);

    --code-bg: rgba(157, 90, 109, 0.1);
    --code-text: var(--gdo-purple);

    /* ====== Component-specific Variables ====== */
    --card-bg: var(--bg-primary);
    --card-border: var(--border-color-light);
    --card-header-bg: rgba(157, 90, 109, 0.03);

    --navbar-text: #ffffff;
    --navbar-link-hover: rgba(255, 255, 255, 0.85);

    --feature-card-border: #e1e8ed;
    --feature-card-hover-shadow: 0 8px 24px rgba(157, 90, 109, 0.15);

    --session-healthy: #28a745;
    --session-degraded: #ffc107;
    --session-unhealthy: #dc3545;

    /* ====== Transitions ====== */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;

    /* ====== Spacing ====== */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;

    /* ====== Border Radius ====== */
    --radius-sm: 0.25rem;
    --radius-md: 0.5rem;
    --radius-lg: 1rem;
    --radius-full: 50%;
}

/* ====== Light Mode Theme (Explicit) ====== */
[data-theme="light"] {
    /* Use same variables as :root default */
    /* This ensures consistent light mode appearance */
}

/* ====== Dark Mode Theme ====== */
[data-theme="dark"] {
    /* Background Colors - Improved contrast */
    --bg-primary: #0d1117;
    --bg-secondary: #161b22;
    --bg-tertiary: #21262d;
    --bg-navbar: linear-gradient(135deg, #2d1f2d 0%, #1f1726 100%);
    --bg-footer: #161b22;

    /* Text Colors - Enhanced contrast for better readability */
    --text-primary: #f0f6fc;
    --text-secondary: #8d96a0;
    --text-muted: #6e7681;
    --text-inverse: #0d1117;

    /* Border Colors - Improved visibility */
    --border-color: #30363d;
    --border-color-light: #21262d;

    /* Link Colors - Better contrast for dark mode */
    --link-color: #c88898;
    --link-hover: #d9a3b1;

    /* Shadows - More prominent in dark mode */
    --shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.5);
    --shadow-md: 0 0.5rem 1rem rgba(0, 0, 0, 0.6);
    --shadow-brand: 0 4px 16px rgba(200, 136, 152, 0.25);
    --shadow-brand-hover: 0 8px 24px rgba(200, 136, 152, 0.35);

    /* Code - Better visibility */
    --code-bg: rgba(200, 136, 152, 0.15);
    --code-text: #d9a3b1;

    /* Component-specific - Consistent with background improvements */
    --card-bg: var(--bg-secondary);
    --card-border: var(--border-color);
    --card-header-bg: var(--bg-tertiary);

    --navbar-text: #f0f6fc;
    --navbar-link-hover: rgba(255, 255, 255, 0.9);

    --feature-card-border: #30363d;
}