/**
 * Fluent 2 Design System Theme
 * Based on Microsoft Fluent Design principles
 */

:root {
    /* Colors - Light Mode */
    --color-primary: #0078D4;
    --color-primary-hover: #106EBE;
    --color-primary-active: #005A9E;

    --color-secondary: #8764B8;
    --color-success: #107C10;
    --color-warning: #FF8C00;
    --color-error: #D13438;
    --color-info: #0078D4;

    /* Neutral colors */
    --color-neutral-0: #FFFFFF;
    --color-neutral-10: #FAF9F8;
    --color-neutral-20: #F3F2F1;
    --color-neutral-30: #EDEBE9;
    --color-neutral-40: #E1DFDD;
    --color-neutral-50: #D2D0CE;
    --color-neutral-60: #C8C6C4;
    --color-neutral-70: #A19F9D;
    --color-neutral-80: #605E5C;
    --color-neutral-90: #323130;
    --color-neutral-100: #201F1E;
    --color-neutral-110: #11100F;

    /* Typography */
    --font-family-base: 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
    --font-family-monospace: 'Consolas', 'Monaco', 'Courier New', monospace;

    --font-size-xs: 0.75rem;    /* 12px */
    --font-size-sm: 0.875rem;   /* 14px */
    --font-size-base: 1rem;     /* 16px */
    --font-size-lg: 1.125rem;   /* 18px */
    --font-size-xl: 1.25rem;    /* 20px */
    --font-size-2xl: 1.5rem;    /* 24px */
    --font-size-3xl: 2rem;      /* 32px */
    --font-size-4xl: 2.5rem;    /* 40px */

    --font-weight-regular: 400;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

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

    /* Spacing */
    --spacing-xs: 0.25rem;   /* 4px */
    --spacing-sm: 0.5rem;    /* 8px */
    --spacing-md: 1rem;      /* 16px */
    --spacing-lg: 1.5rem;    /* 24px */
    --spacing-xl: 2rem;      /* 32px */
    --spacing-2xl: 3rem;     /* 48px */
    --spacing-3xl: 4rem;     /* 64px */

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

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.12);
    --shadow-xl: 0 16px 32px rgba(0, 0, 0, 0.16);

    /* Transitions */
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);

    /* Z-index */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;
}

/* Dark mode colors */
@media (prefers-color-scheme: dark) {
    :root {
        --color-primary: #4CC2FF;
        --color-primary-hover: #6BCFFF;
        --color-primary-active: #8ADCFF;

        --color-neutral-0: #1B1A19;
        --color-neutral-10: #252423;
        --color-neutral-20: #292827;
        --color-neutral-30: #323130;
        --color-neutral-40: #3B3A39;
        --color-neutral-50: #484644;
        --color-neutral-60: #605E5C;
        --color-neutral-70: #797775;
        --color-neutral-80: #A19F9D;
        --color-neutral-90: #C8C6C4;
        --color-neutral-100: #E1DFDD;
        --color-neutral-110: #F3F2F1;
    }
}

/* Reset and base styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    color: var(--color-neutral-100);
    background-color: var(--color-neutral-10);
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
    margin-bottom: var(--spacing-md);
}

h1 { font-size: var(--font-size-4xl); }
h2 { font-size: var(--font-size-3xl); }
h3 { font-size: var(--font-size-2xl); }
h4 { font-size: var(--font-size-xl); }
h5 { font-size: var(--font-size-lg); }
h6 { font-size: var(--font-size-base); }

p {
    margin-bottom: var(--spacing-md);
}

a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--color-primary-hover);
}

/* Container */
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-lg);
}

.container-fluid {
    width: 100%;
    padding: 0 var(--spacing-lg);
}