/* Fluent Design Tokens - Theme Variables */

/* Light Theme */
html[data-theme="light"],
:root[data-theme="light"] {
    /* Background Colors */
    --color-background: #faf9f8;
    --color-surface: #ffffff;
    --color-surface-secondary: #f3f2f1;
    --color-surface-tertiary: #edebe9;

    /* Text Colors */
    --color-text-primary: #201f1e;
    --color-text-secondary: #605e5c;
    --color-text-tertiary: #a19f9d;
    --color-text-disabled: #d2d0ce;

    /* Border Colors */
    --color-border: #edebe9;
    --color-border-hover: #d2d0ce;
    --color-border-active: #a19f9d;

    /* Primary Colors (Azure Blue) */
    --color-primary: #0078d4;
    --color-primary-hover: #106ebe;
    --color-primary-active: #005a9e;
    --color-primary-light: #deecf9;

    /* Semantic Colors */
    --color-success: #107c10;
    --color-success-light: #dff6dd;
    --color-warning: #ffb900;
    --color-warning-light: #fff4ce;
    --color-error: #d13438;
    --color-error-light: #fde7e9;
    --color-info: #0078d4;
    --color-info-light: #deecf9;

    /* Shadows */
    --shadow-card: 0 1.6px 3.6px 0 rgba(0,0,0,.132), 0 0.3px 0.9px 0 rgba(0,0,0,.108);
    --shadow-elevated: 0 6.4px 14.4px 0 rgba(0,0,0,.132), 0 1.2px 3.6px 0 rgba(0,0,0,.108);
    --shadow-flyout: 0 25.6px 57.6px 0 rgba(0,0,0,.22), 0 4.8px 14.4px 0 rgba(0,0,0,.18);

    /* Accent Colors */
    --color-accent-1: #0078d4;
    --color-accent-2: #107c10;
    --color-accent-3: #ffb900;
    --color-accent-4: #d13438;
}

/* Dark Theme - Azure Portal Style */
html[data-theme="dark"],
:root[data-theme="dark"] {
    /* Background Colors */
    --color-background: #1e1e1e;
    --color-surface: #2d2d30;
    --color-surface-secondary: #252526;
    --color-surface-tertiary: #3e3e42;

    /* Text Colors */
    --color-text-primary: #ffffff;
    --color-text-secondary: #cccccc;
    --color-text-tertiary: #8a8886;
    --color-text-disabled: #605e5c;

    /* Border Colors */
    --color-border: #3e3e42;
    --color-border-hover: #505050;
    --color-border-active: #6e6e6e;

    /* Primary Colors (Azure Blue - adjusted for dark) */
    --color-primary: #2b88d8;
    --color-primary-hover: #3a96e4;
    --color-primary-active: #1f6bab;
    --color-primary-light: #1a3a52;

    /* Semantic Colors */
    --color-success: #13a10e;
    --color-success-light: #1a3d1a;
    --color-warning: #ffb900;
    --color-warning-light: #4d3800;
    --color-error: #e81123;
    --color-error-light: #4d1519;
    --color-info: #2b88d8;
    --color-info-light: #1a3a52;

    /* Shadows */
    --shadow-card: 0 1.6px 3.6px 0 rgba(0,0,0,.5), 0 0.3px 0.9px 0 rgba(0,0,0,.4);
    --shadow-elevated: 0 6.4px 14.4px 0 rgba(0,0,0,.5), 0 1.2px 3.6px 0 rgba(0,0,0,.4);
    --shadow-flyout: 0 25.6px 57.6px 0 rgba(0,0,0,.6), 0 4.8px 14.4px 0 rgba(0,0,0,.5);

    /* Accent Colors */
    --color-accent-1: #2b88d8;
    --color-accent-2: #13a10e;
    --color-accent-3: #ffb900;
    --color-accent-4: #e81123;
}

/* Common Theme Variables */
:root {
    /* Spacing Scale */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-2xl: 48px;

    /* Layout Dimensions */
    --sidebar-width-expanded: 280px;
    --sidebar-width-collapsed: 48px;
    --header-height: 48px;
    --breadcrumb-height: 40px;

    /* Border Radius */
    --border-radius-sm: 2px;
    --border-radius-md: 4px;
    --border-radius-lg: 8px;
    --border-radius-xl: 12px;

    /* Typography */
    --font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', sans-serif;
    --font-size-xs: 11px;
    --font-size-sm: 12px;
    --font-size-md: 14px;
    --font-size-lg: 16px;
    --font-size-xl: 20px;
    --font-size-2xl: 24px;
    --font-size-3xl: 32px;

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

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

    /* Transitions */
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-normal: 300ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);

    /* Z-Index Layers */
    --z-index-base: 0;
    --z-index-dropdown: 100;
    --z-index-sticky: 200;
    --z-index-sidebar: 1000;
    --z-index-header: 1100;
    --z-index-modal-backdrop: 2000;
    --z-index-modal: 2100;
    --z-index-popover: 3000;
    --z-index-tooltip: 4000;
}

/* Focus Visible Styles */
:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Scrollbar Styles */
::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

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

::-webkit-scrollbar-thumb {
    background: var(--color-border-hover);
    border-radius: var(--border-radius-lg);
    border: 3px solid var(--color-background);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-border-active);
}

/* Dark mode scrollbar */
[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: var(--color-surface-tertiary);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: var(--color-border-hover);
}

/* Selection Styles */
::selection {
    background-color: var(--color-primary-light);
    color: var(--color-text-primary);
}