/* ==================================================
   DESIGN SYSTEM
   BeatAllCS Technicals — theme tokens
================================================== */

:root {
    /* Brand — purple/indigo, matching the gradients & buttons already
       used across the app. (Orange removed — it isn't part of the brand.) */
    --primary: #7b1fe0;
    --primary-dark: #4310a5;
    --primary-light: #9d5cf0;
    --primary-rgb: 123, 31, 224;

    --secondary: #0d6efd;
    --secondary-rgb: 13, 110, 253;

    --gradient-primary: linear-gradient(135deg, #6d5dfc, #4f46e5);
    --gradient-brand: linear-gradient(135deg, #7b1fe0, #4310a5);

    /* Semantic status colors (shared by both themes) */
    --success: #22c55e;
    --success-rgb: 34, 197, 94;
    --danger: #eb5757;
    --danger-rgb: 235, 87, 87;
    --warning: #f2994a;
    --warning-rgb: 242, 153, 74;
    --info: #2f80ed;
    --info-rgb: 47, 128, 237;

    /* Layout */
    --sidebar-width: 280px;

    /* Border Radius */
    --radius-xs: 6px;
    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-xl: 28px;

    /* Animation */
    --transition-fast: .15s ease;
    --transition: .25s ease;

    /* Focus */
    --focus-ring: 0 0 0 3px rgba(var(--primary-rgb), .35);
}

/* ==================================================
   DARK THEME (Default)
================================================== */

:root,
[data-theme="dark"] {

    /* Primary reads fine at full brightness against dark backgrounds */
    --primary: #7b1fe0;
    --primary-dark: #4310a5;
    --primary-light: #9d5cf0;

    /* Backgrounds */
    --bg: #0f1115;
    --bg-secondary: #171b22;
    --bg-tertiary: #20252d;
    --bg-soft: rgba(var(--primary-rgb), .1);

    /* Cards */
    --card-bg: #181d24;
    --card-hover: #212731;

    /* Text */
    --text: #f4f6f8;
    --text-secondary: #c2c8d0;
    --text-muted: #8b95a5;
    --muted-text: var(--text-muted); /* alias for legacy pages */

    /* Borders */
    --border: #2d3440;
    --border-light: #39414e;

    /* Icons */
    --icon: #b8c0cb;

    /* Inputs */
    --input-bg: #171b22;
    --input-border: #303845;
    --input-placeholder: #6b7280;
    --input-focus-border: var(--primary);

    /* Links */
    --link: #9d5cf0;
    --link-hover: #b483f5;

    /* Navbar */
    --navbar-bg: #171b22;
    --navbar-text: #f4f6f8;

    /* Sidebar */
    --sidebar-bg: #14181f;

    /* Hover / Active */
    --hover: rgba(255, 255, 255, .05);
    --active-bg: rgba(255, 255, 255, .08);

    /* Disabled */
    --disabled-bg: #262b33;
    --disabled-text: #565f6c;

    /* Scrollbar */
    --scrollbar-track: #171b22;
    --scrollbar-thumb: #39414e;
    --scrollbar-thumb-hover: #4a5361;

    /* Overlay */
    --overlay: rgba(0, 0, 0, .55);

    /* Status tints (badge/alert backgrounds) */
    --success-tint: rgba(var(--success-rgb), .15);
    --danger-tint: rgba(var(--danger-rgb), .15);
    --warning-tint: rgba(var(--warning-rgb), .15);
    --info-tint: rgba(var(--info-rgb), .15);

    /* Shadows */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, .25);
    --shadow-md: 0 8px 25px rgba(0, 0, 0, .35);
    --shadow-lg: 0 20px 45px rgba(0, 0, 0, .45);
    --shadow: var(--shadow-md); /* alias for legacy pages */
    --BarGAR: rgb(57, 57, 57);
}

/* ==================================================
   LIGHT THEME
================================================== */

[data-theme="light"] {

    --primary: #7b1fe0;
    --primary-dark: #4310a5;
    --primary-light: #9d5cf0;
    --BarGAR: rgba(42, 42, 42, 0.247);

    /* Backgrounds */
    --bg: #f4f9ff;
    --bg-secondary: #ffffff;
    --bg-tertiary: #eef2f6;
    --bg-soft: rgba(var(--primary-rgb), .08);

    /* Cards */
    --card-bg: #ffffff;
    --card-hover: #f7f9fc;

    /* Text */
    --text: #1f2937;
    --text-secondary: #4b5563;
    --text-muted: #7b8794;
    --muted-text: var(--text-muted); /* alias for legacy pages */

    /* Borders */
    --border: #00000040;
    --border-light: #edf1f5;

    /* Icons */
    --icon: #6b7280;

    /* Inputs */
    --input-bg: #ffffff;
    --input-border: #d6dce5;
    --input-placeholder: #9aa4b2;
    --input-focus-border: var(--primary);

    /* Links */
    --link: #7b1fe0;
    --link-hover: #4310a5;

    /* Navbar */
    --navbar-bg: #ffffff;
    --navbar-text: #1f2937;

    /* Sidebar */
    --sidebar-bg: #ffffff;

    /* Hover / Active */
    --hover: rgba(0, 0, 0, .04);
    --active-bg: rgba(0, 0, 0, .06);

    /* Disabled */
    --disabled-bg: #eef1f5;
    --disabled-text: #a3acb9;

    /* Scrollbar */
    --scrollbar-track: #eef2f6;
    --scrollbar-thumb: #cfd6df;
    --scrollbar-thumb-hover: #b7c0cc;

    /* Overlay */
    --overlay: rgba(0, 0, 0, .2);

    /* Status tints (badge/alert backgrounds) */
    --success-tint: rgba(var(--success-rgb), .12);
    --danger-tint: rgba(var(--danger-rgb), .12);
    --warning-tint: rgba(var(--warning-rgb), .15);
    --info-tint: rgba(var(--info-rgb), .12);

    /* Shadows */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, .05);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, .08);
    --shadow-lg: 0 20px 45px rgba(0, 0, 0, .12);
    --shadow: var(--shadow-md); /* alias for legacy pages */
    --gradient-brand: linear-gradient(135deg, #6f5d84, #290174);
}

/* ==================================================
   SCROLLBAR (uses tokens above, theme-aware automatically)
================================================== */

* {
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

*::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

*::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
}

*::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: var(--radius-sm);
}

*::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover);
}