/**
 * Webapp Core CSS Variables
 * Centralized theming variables for light and dark modes
 * Used across all webapp pages
 */

/* ═══════════════════════════════════════════════════════════════
   LIGHT MODE VARIABLES
   ═══════════════════════════════════════════════════════════════ */

body.light-mode {
    /* Primary Colors */
    --c-bg: rgba(255, 255, 255, 0.97);
    --c-surface: #f8f9fa;
    --c-border: rgba(0, 0, 0, 0.08);
    --c-text: #212529;
    --c-muted: #6c757d;

    /* Interactive Elements */
    --c-row: rgba(248, 249, 250, 0.9);
    --c-row-h: rgba(240, 242, 245, 1);
    --c-accent: rgba(220, 53, 69, 0.07);
    --c-accent-b: rgba(220, 53, 69, 0.18);

    /* Brand Colors */
    --brand-primary: #dc3545;
    --brand-primary-hover: #c82333;
    --brand-primary-rgb: 220, 53, 69;

    /* Card Backgrounds */
    --card-bg: #ffffff;
    --card-hover-bg: #fafafa;

    /* Input Elements */
    --input-bg: #ffffff;
    --input-border: #ced4da;
    --input-focus-border: #dc3545;
    --input-focus-shadow: rgba(220, 53, 69, 0.25);
}

/* ═══════════════════════════════════════════════════════════════
   DARK MODE VARIABLES
   ═══════════════════════════════════════════════════════════════ */

body.dark-mode {
    /* Primary Colors */
    --c-bg: rgba(30, 33, 38, 0.97);
    --c-surface: #3a3f45;
    --c-border: rgba(255, 255, 255, 0.08);
    --c-text: #f1f3f5;
    --c-muted: #adb5bd;

    /* Interactive Elements */
    --c-row: rgba(255, 255, 255, 0.04);
    --c-row-h: rgba(255, 255, 255, 0.08);
    --c-accent: rgba(220, 53, 69, 0.12);
    --c-accent-b: rgba(220, 53, 69, 0.25);

    /* Brand Colors */
    --brand-primary: #ff5a6a;
    --brand-primary-hover: #ff4757;
    --brand-primary-rgb: 255, 90, 106;

    /* Card Backgrounds */
    --card-bg: #2d2d2d;
    --card-hover-bg: #343434;

    /* Input Elements */
    --input-bg: #2d2d2d;
    --input-border: #495057;
    --input-focus-border: #ff5a6a;
    --input-focus-shadow: rgba(255, 90, 106, 0.25);
}

/* ═══════════════════════════════════════════════════════════════
   DATA-BS-THEME SUPPORT (Bootstrap 5)
   ═══════════════════════════════════════════════════════════════ */

[data-bs-theme="light"] {
    --c-bg: rgba(255, 255, 255, 0.97);
    --c-surface: #f8f9fa;
    --c-border: rgba(0, 0, 0, 0.08);
    --c-text: #212529;
    --c-muted: #6c757d;
    --c-row: rgba(248, 249, 250, 0.9);
    --c-row-h: rgba(240, 242, 245, 1);
    --c-accent: rgba(220, 53, 69, 0.07);
    --c-accent-b: rgba(220, 53, 69, 0.18);
    --brand-primary: #dc3545;
    --brand-primary-hover: #c82333;
    --brand-primary-rgb: 220, 53, 69;
    --card-bg: #ffffff;
    --card-hover-bg: #fafafa;
    --input-bg: #ffffff;
    --input-border: #ced4da;
    --input-focus-border: #dc3545;
    --input-focus-shadow: rgba(220, 53, 69, 0.25);
}

[data-bs-theme="dark"] {
    --c-bg: rgba(30, 33, 38, 0.97);
    --c-surface: #3a3f45;
    --c-border: rgba(255, 255, 255, 0.08);
    --c-text: #f1f3f5;
    --c-muted: #adb5bd;
    --c-row: rgba(255, 255, 255, 0.04);
    --c-row-h: rgba(255, 255, 255, 0.08);
    --c-accent: rgba(220, 53, 69, 0.12);
    --c-accent-b: rgba(220, 53, 69, 0.25);
    --brand-primary: #ff5a6a;
    --brand-primary-hover: #ff4757;
    --brand-primary-rgb: 255, 90, 106;
    --card-bg: #2d2d2d;
    --card-hover-bg: #343434;
    --input-bg: #2d2d2d;
    --input-border: #495057;
    --input-focus-border: #ff5a6a;
    --input-focus-shadow: rgba(255, 90, 106, 0.25);
}

/* ═══════════════════════════════════════════════════════════════
   SPACING SCALE
   ═══════════════════════════════════════════════════════════════ */

:root {
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;
    --spacing-3xl: 4rem;
}

/* ═══════════════════════════════════════════════════════════════
   BORDER RADIUS SCALE
   ═══════════════════════════════════════════════════════════════ */

:root {
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-round: 50px;
    --radius-circle: 50%;
}

/* ═══════════════════════════════════════════════════════════════
   SHADOW SCALE
   ═══════════════════════════════════════════════════════════════ */

:root {
    --shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.04);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04), 0 8px 32px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.07), 0 16px 48px rgba(0, 0, 0, 0.09);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.1), 0 24px 64px rgba(0, 0, 0, 0.12);
    --shadow-primary: 0 8px 24px rgba(220, 53, 69, 0.15);
}

/* ═══════════════════════════════════════════════════════════════
   TRANSITION DURATIONS
   ═══════════════════════════════════════════════════════════════ */

:root {
    --transition-fast: 0.15s;
    --transition-base: 0.3s;
    --transition-slow: 0.6s;
    --ease-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}