/* Consolidated CSS Root Variables for LMS Frontend Project */
/* Standardized color naming convention across all components */

:root {
    /* === BACKGROUND COLORS === */
    --bg-page: #f5f5f5;                    /* Main page background */
    --bg-card: #ffffff;                    /* Card backgrounds */
    --bg-input: #ffffff;                    /* Input field backgrounds */
    --bg-button-primary: #222121;          /* Primary button background */
    --bg-button-secondary: #f5f5f5;        /* Secondary button background */
    --bg-button-disabled: #e0e0e0;         /* Disabled button background */
    --bg-overlay: rgba(0, 0, 0, 0.45);     /* Modal overlay background */
    --bg-modal: #ffffff;                   /* Modal content background */
    --bg-success: #e8f9ed;                 /* Success state background */
    --bg-error: #ffebea;                   /* Error state background */
    --bg-warning: #fff3cd;                 /* Warning state background */
    --bg-progress: #e6e6e6;                /* Progress bar background */
    --bg-hover: #f8f8f8;                   /* Hover state background */
    --bg-selected: #e8f4ff;                /* Selected state background */
    --bg-tag: #f5f5f5;                     /* Tag/pill background */
    --bg-carousel-start: #c2c2c2;          /* Carousel gradient start */
    --bg-carousel-mid: #e2e2e2;            /* Carousel gradient middle */
    --bg-carousel-end: #e6e6e6;            /* Carousel gradient end */
    --bg-topic: #f0f0f0;                   /* Topic card background */
    --bg-learning: #e7e7e7;                /* Learning section background */
    --bg-pdf: #f9f9f9;                     /* PDF viewer background */

    /* === TEXT COLORS === */
    --text-primary: #464646;               /* Primary text color */
    --text-secondary: #808080;             /* Secondary text color */
    --text-muted: #666666;                 /* Muted text color */
    --text-light: #ffffff;                 /* Light text (for dark backgrounds) */
    --text-success: #34c759;               /* Success text color */
    --text-error: #ff3b30;                 /* Error text color */
    --text-warning: #ff9500;               /* Warning text color */
    --text-link: #007aff;                  /* Link text color */
    --text-inverse: #1c1c1c;              /* Inverse text color */

    /* === BORDER COLORS === */
    --border-primary: #e0e0e0;             /* Primary border color */
    --border-secondary: #d0d0d0;           /* Secondary border color */
    --border-light: #f3f3f3;              /* Light border color */
    --border-input: #e5e5e5;              /* Input border color */
    --border-selected: #4a9fff;            /* Selected border color */
    --border-success: #34c759;             /* Success border color */
    --border-error: #ff3b30;               /* Error border color */
    --border-divider: #d0cfcf;            /* Content divider */
    --border-category: #bababa;             /* Category list border */

    /* === STATUS & STATE COLORS === */
    --status-success: #30b34a;            /* Success status */
    --status-error: #ed1b24;               /* Error status */
    --status-warning: #f59d17;             /* Warning status */
    --status-info: #007aff;                 /* Info status */
    --status-completed: #51b330;            /* Completed status */
    --status-in-progress: #eede0e;         /* In progress status */
    --status-not-attempted: #808080;       /* Not attempted status */

    /* === INTERACTIVE ELEMENTS === */
    --interactive-primary: #4caf50;        /* Primary interactive (download) */
    --interactive-hover: #45a049;           /* Hover state */
    --highlight: #ff2d55;                  /* Highlight/accent color */
    --accent-blue: #0c87ca;                 /* Blue accent */
    --accent-green: #0dd033;               /* Green accent */

    /* === GRAYSCALE VALUES === */
    --gray-50: #f8f8f8;
    --gray-100: #f5f5f5;
    --gray-200: #eaeaea;
    --gray-300: #e0e0e0;
    --gray-400: #d0d0d0;
    --gray-500: #bababa;
    --gray-600: #808080;
    --gray-700: #666666;
    --gray-800: #464646;
    --gray-900: #1c1c1c;
    --gray-950: #222121;

    /* === TYPOGRAPHY === */
    --font-family-primary: "Plus Jakarta Sans", sans-serif;
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-black: 800;

    /* === LAYOUT DIMENSIONS === */
    --sidebar-width: 280px;
    --navbar-height: 70px;
    --border-radius-sm: 8px;
    --border-radius-md: 12px;
    --border-radius-lg: 20px;
    --border-radius-xl: 31px;
    --border-radius-2xl: 35px;
    --border-radius-full: 50px;

    /* === SHADOWS === */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.11);
    --shadow-lg: 0 4px 24px rgba(0, 0, 0, 0.06);
    --shadow-xl: 0 8px 20px rgba(0, 0, 0, 0.15);

    /* === TRANSITIONS === */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;

    /* === Z-INDEX SCALE === */
    --z-dropdown: 100;
    --z-sticky: 101;
    --z-fixed: 102;
    --z-modal-backdrop: 103;
    --z-modal: 104;
    --z-popover: 105;
    --z-tooltip: 106;
}