/* ==========================================================================
   XP ITSM - Theme Variables
   CSS Custom Properties for the complete theme system
   ========================================================================== */

:root {
    /* ---- Primary Brand Colors ---- */
    --color-primary:            #1a73e8;
    --color-primary-hover:      #1557b0;
    --color-primary-light:      #e8f0fe;
    --color-primary-dark:       #0d47a1;
    --color-primary-rgb:        26, 115, 232;

    --color-secondary:          #5f6368;
    --color-secondary-hover:    #4a4e52;
    --color-secondary-light:    #e8eaed;
    --color-secondary-dark:     #3c4043;

    --color-accent:             #fbbc04;
    --color-accent-hover:       #f9a825;
    --color-accent-light:       #fef7e0;

    /* ---- Semantic Colors ---- */
    --color-success:            #0d904f;
    --color-success-hover:      #0a7a42;
    --color-success-light:      #e6f4ea;
    --color-success-rgb:        13, 144, 79;

    --color-danger:             #d93025;
    --color-danger-hover:       #b3261e;
    --color-danger-light:       #fce8e6;
    --color-danger-rgb:         217, 48, 37;

    --color-warning:            #e37400;
    --color-warning-hover:      #c76400;
    --color-warning-light:      #fef3e0;
    --color-warning-rgb:        227, 116, 0;

    --color-info:               #1a73e8;
    --color-info-hover:         #1557b0;
    --color-info-light:         #e8f0fe;
    --color-info-rgb:           26, 115, 232;

    /* ---- Background Colors ---- */
    --bg-body:                  #f1f3f4;
    --bg-main:                  #ffffff;
    --bg-sidebar:               #202124;
    --bg-sidebar-hover:         #303134;
    --bg-sidebar-active:        #1a73e8;
    --bg-navbar:                #ffffff;
    --bg-card:                  #ffffff;
    --bg-input:                 #ffffff;
    --bg-input-focus:           #ffffff;
    --bg-dropdown:              #ffffff;
    --bg-modal:                 #ffffff;
    --bg-overlay:               rgba(0, 0, 0, 0.5);
    --bg-code:                  #f1f3f4;
    --bg-table-header:          #f8f9fa;
    --bg-table-hover:           #f1f3f4;
    --bg-table-stripe:          #fafafa;

    /* ---- Text Colors ---- */
    --text-primary:             #202124;
    --text-secondary:           #5f6368;
    --text-muted:               #9aa0a6;
    --text-inverse:             #ffffff;
    --text-link:                #1a73e8;
    --text-link-hover:          #1557b0;
    --text-sidebar:             #e8eaed;
    --text-sidebar-muted:       #9aa0a6;
    --text-navbar:              #202124;
    --text-on-primary:          #ffffff;

    /* ---- Border Colors ---- */
    --border-color:             #dadce0;
    --border-color-light:       #e8eaed;
    --border-color-dark:        #bdc1c6;
    --border-color-focus:       #1a73e8;
    --border-color-input:       #dadce0;

    /* ---- Border Radius ---- */
    --radius-xs:                2px;
    --radius-sm:                4px;
    --radius-md:                8px;
    --radius-lg:                12px;
    --radius-xl:                16px;
    --radius-2xl:               24px;
    --radius-full:              9999px;

    /* ---- Shadows ---- */
    --shadow-sm:                0 1px 2px 0 rgba(60, 64, 67, 0.1),
                                0 1px 3px 1px rgba(60, 64, 67, 0.05);
    --shadow-md:                0 1px 3px 0 rgba(60, 64, 67, 0.15),
                                0 4px 8px 3px rgba(60, 64, 67, 0.1);
    --shadow-lg:                0 4px 8px 0 rgba(60, 64, 67, 0.2),
                                0 8px 16px 6px rgba(60, 64, 67, 0.1);
    --shadow-focus:             0 0 0 3px rgba(26, 115, 232, 0.3);
    --shadow-inset:             inset 0 1px 2px rgba(60, 64, 67, 0.1);

    /* ---- Spacing Scale ---- */
    --space-0:                  0;
    --space-1:                  4px;
    --space-2:                  8px;
    --space-3:                  12px;
    --space-4:                  16px;
    --space-5:                  20px;
    --space-6:                  24px;
    --space-8:                  32px;
    --space-10:                 40px;
    --space-12:                 48px;
    --space-16:                 64px;
    --space-20:                 80px;

    /* ---- Typography ---- */
    --font-family:              -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
                                'Helvetica Neue', Arial, 'Noto Sans', sans-serif,
                                'Apple Color Emoji', 'Segoe UI Emoji';
    --font-family-mono:         'SF Mono', 'Cascadia Code', 'Segoe UI Mono',
                                'Roboto Mono', Menlo, Consolas, monospace;

    --font-size-xs:             11px;
    --font-size-sm:             12px;
    --font-size-base:           14px;
    --font-size-md:             16px;
    --font-size-lg:             18px;
    --font-size-xl:             20px;
    --font-size-2xl:            24px;
    --font-size-3xl:            30px;
    --font-size-4xl:            36px;

    --font-weight-normal:       400;
    --font-weight-medium:       500;
    --font-weight-semibold:     600;
    --font-weight-bold:         700;

    --line-height-tight:        1.25;
    --line-height-normal:       1.5;
    --line-height-relaxed:      1.75;

    /* ---- Layout ---- */
    --sidebar-width:            260px;
    --sidebar-collapsed-width:  70px;
    --navbar-height:            56px;
    --content-max-width:        1400px;

    /* ---- Transitions ---- */
    --transition-fast:          0.1s ease;
    --transition-base:          0.2s ease;
    --transition-slow:          0.3s ease;
    --transition-slower:        0.5s ease;

    /* ---- Z-Index Scale ---- */
    --z-dropdown:               100;
    --z-sticky:                 200;
    --z-navbar:                 300;
    --z-sidebar:                400;
    --z-modal-backdrop:         500;
    --z-modal:                  600;
    --z-tooltip:                700;
    --z-ai-widget:              800;
    --z-toast:                  900;
}