/* Microsoft Fluent Design System - GET CID Implementation */

/* ========== DESIGN TOKENS ========== */
:root {
    /* Brand Colors */
    --fluent-brand-primary: #0078D4;
    --fluent-brand-secondary: #00BCF2;
    --fluent-brand-accent: #0099BC;
    --fluent-brand-hover: #106EBE;
    --fluent-brand-pressed: #005A9E;
    
    /* Neutral Colors */
    --fluent-neutral-background-1: #FFFFFF;
    --fluent-neutral-background-2: #F3F2F1;
    --fluent-neutral-background-3: #EDEBE9;
    --fluent-neutral-background-4: #E1DFDD;
    --fluent-neutral-background-canvas: #FAF9F8;
    
    /* Text Colors */
    --fluent-neutral-foreground-1: #323130;
    --fluent-neutral-foreground-2: #605E5C;
    --fluent-neutral-foreground-3: #8A8886;
    --fluent-neutral-foreground-disabled: #A19F9D;
    
    /* Semantic Colors */
    --fluent-success: #107C10;
    --fluent-success-background: #DDF4DD;
    --fluent-warning: #FFB900;
    --fluent-warning-background: #FFF4CE;
    --fluent-error: #D13438;
    --fluent-error-background: #FDE7E9;
    
    /* Shadows and Elevation */
    --fluent-shadow-2: 0 0.5px 1px rgba(0,0,0,0.1), 0 1px 3px rgba(0,0,0,0.1);
    --fluent-shadow-4: 0 0.5px 1px rgba(0,0,0,0.1), 0 2px 6px rgba(0,0,0,0.1);
    --fluent-shadow-8: 0 0.5px 1px rgba(0,0,0,0.1), 0 4px 12px rgba(0,0,0,0.15);
    --fluent-shadow-16: 0 0.5px 1px rgba(0,0,0,0.1), 0 8px 24px rgba(0,0,0,0.2);
    
    /* Border Radius */
    --fluent-radius-small: 2px;
    --fluent-radius-medium: 4px;
    --fluent-radius-large: 6px;
    --fluent-radius-xl: 8px;
    --fluent-radius-2xl: 12px;
    
    /* Spacing */
    --fluent-space-xs: 4px;
    --fluent-space-sm: 8px;
    --fluent-space-md: 12px;
    --fluent-space-lg: 16px;
    --fluent-space-xl: 20px;
    --fluent-space-2xl: 24px;
    --fluent-space-3xl: 32px;
    
    /* Typography */
    --fluent-font-family: 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    --fluent-font-size-100: 12px;
    --fluent-font-size-200: 14px;
    --fluent-font-size-300: 16px;
    --fluent-font-size-400: 18px;
    --fluent-font-size-500: 20px;
    --fluent-font-size-600: 24px;
    --fluent-font-size-700: 28px;
    --fluent-font-size-800: 32px;
    --fluent-font-size-900: 40px;
    
    /* Animation */
    --fluent-duration-ultra-fast: 0.05s;
    --fluent-duration-faster: 0.1s;
    --fluent-duration-fast: 0.15s;
    --fluent-duration-normal: 0.2s;
    --fluent-duration-gentle: 0.3s;
    --fluent-duration-slow: 0.5s;
    
    --fluent-curve-accelerate: cubic-bezier(0.7, 0, 1, 0.5);
    --fluent-curve-decelerate: cubic-bezier(0.1, 0.9, 0.2, 1);
    --fluent-curve-standard: cubic-bezier(0.8, 0, 0.2, 1);
    --fluent-curve-linear: cubic-bezier(0, 0, 1, 1);
}

/* ========== FLUENT COMPONENTS ========== */

/* Button Styles */
.fluent-button {
    font-family: var(--fluent-font-family);
    font-size: var(--fluent-font-size-300);
    font-weight: 600;
    padding: var(--fluent-space-sm) var(--fluent-space-lg);
    border-radius: var(--fluent-radius-medium);
    border: 1px solid transparent;
    cursor: pointer;
    transition: all var(--fluent-duration-fast) var(--fluent-curve-standard);
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--fluent-space-sm);
    text-decoration: none;
    box-sizing: border-box;
}

.fluent-button:focus-visible {
    outline: 2px solid var(--fluent-brand-primary);
    outline-offset: 2px;
}

.fluent-button-primary {
    background-color: var(--fluent-brand-primary);
    color: var(--fluent-neutral-background-1);
}

.fluent-button-primary:hover {
    background-color: var(--fluent-brand-hover);
    transform: translateY(-1px);
    box-shadow: var(--fluent-shadow-4);
}

.fluent-button-primary:active {
    background-color: var(--fluent-brand-pressed);
    transform: translateY(0);
}

.fluent-button-secondary {
    background-color: var(--fluent-neutral-background-1);
    color: var(--fluent-brand-primary);
    border-color: var(--fluent-brand-primary);
}

.fluent-button-secondary:hover {
    background-color: var(--fluent-neutral-background-2);
    transform: translateY(-1px);
    box-shadow: var(--fluent-shadow-4);
}

/* Card Styles */
.fluent-card {
    background-color: var(--fluent-neutral-background-1);
    border-radius: var(--fluent-radius-xl);
    box-shadow: var(--fluent-shadow-2);
    transition: all var(--fluent-duration-gentle) var(--fluent-curve-standard);
    border: 1px solid var(--fluent-neutral-background-3);
    overflow: hidden;
}

.fluent-card:hover {
    box-shadow: var(--fluent-shadow-8);
    transform: translateY(-2px);
}

.fluent-card-interactive {
    cursor: pointer;
}

.fluent-card-interactive:hover {
    box-shadow: var(--fluent-shadow-16);
    transform: translateY(-4px);
}

/* Input Styles */
.fluent-input {
    font-family: var(--fluent-font-family);
    font-size: var(--fluent-font-size-300);
    padding: var(--fluent-space-sm) var(--fluent-space-md);
    border: 1px solid var(--fluent-neutral-background-4);
    border-radius: var(--fluent-radius-medium);
    background-color: var(--fluent-neutral-background-1);
    color: var(--fluent-neutral-foreground-1);
    transition: all var(--fluent-duration-fast) var(--fluent-curve-standard);
    outline: none;
    box-sizing: border-box;
}

.fluent-input:focus {
    border-color: var(--fluent-brand-primary);
    box-shadow: 0 0 0 1px var(--fluent-brand-primary);
}

.fluent-input:hover:not(:focus) {
    border-color: var(--fluent-neutral-foreground-3);
}

/* Dropzone Styles */
.fluent-dropzone {
    border: 2px dashed var(--fluent-neutral-background-4);
    border-radius: var(--fluent-radius-xl);
    background-color: var(--fluent-neutral-background-canvas);
    padding: var(--fluent-space-3xl);
    text-align: center;
    transition: all var(--fluent-duration-normal) var(--fluent-curve-standard);
    cursor: pointer;
}

.fluent-dropzone:hover {
    border-color: var(--fluent-brand-primary);
    background-color: var(--fluent-neutral-background-1);
    box-shadow: var(--fluent-shadow-2);
}

.fluent-dropzone.dragover {
    border-color: var(--fluent-brand-primary);
    background-color: var(--fluent-brand-primary);
    background-image: linear-gradient(45deg, transparent 25%, rgba(255,255,255,0.1) 25%, rgba(255,255,255,0.1) 50%, transparent 50%, transparent 75%, rgba(255,255,255,0.1) 75%);
    background-size: 20px 20px;
    animation: move-bg 0.5s linear infinite;
}

@keyframes move-bg {
    0% { background-position: 0 0; }
    100% { background-position: 20px 20px; }
}

/* Result Blocks */
.fluent-result-block {
    background-color: var(--fluent-neutral-background-2);
    border: 1px solid var(--fluent-neutral-background-4);
    border-radius: var(--fluent-radius-medium);
    padding: var(--fluent-space-md);
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: var(--fluent-font-size-400);
    font-weight: 600;
    text-align: center;
    color: var(--fluent-neutral-foreground-2);
    transition: all var(--fluent-duration-fast) var(--fluent-curve-standard);
    cursor: pointer;
    min-width: 120px;
}

.fluent-result-block:hover {
    background-color: var(--fluent-neutral-background-1);
    box-shadow: var(--fluent-shadow-2);
    transform: translateY(-1px);
}

.fluent-result-block.filled {
    background-color: var(--fluent-success-background);
    border-color: var(--fluent-success);
    color: var(--fluent-success);
}

/* Typography */
.fluent-title-1 {
    font-family: var(--fluent-font-family);
    font-size: var(--fluent-font-size-900);
    font-weight: 600;
    line-height: 1.2;
    color: var(--fluent-neutral-foreground-1);
}

.fluent-title-2 {
    font-family: var(--fluent-font-family);
    font-size: var(--fluent-font-size-800);
    font-weight: 600;
    line-height: 1.3;
    color: var(--fluent-neutral-foreground-1);
}

.fluent-title-3 {
    font-family: var(--fluent-font-family);
    font-size: var(--fluent-font-size-600);
    font-weight: 600;
    line-height: 1.4;
    color: var(--fluent-neutral-foreground-1);
}

.fluent-body-1 {
    font-family: var(--fluent-font-family);
    font-size: var(--fluent-font-size-300);
    font-weight: 400;
    line-height: 1.5;
    color: var(--fluent-neutral-foreground-1);
}

.fluent-body-2 {
    font-family: var(--fluent-font-family);
    font-size: var(--fluent-font-size-200);
    font-weight: 400;
    line-height: 1.5;
    color: var(--fluent-neutral-foreground-2);
}

/* Icons */
.fluent-icon {
    width: 20px;
    height: 20px;
    fill: currentColor;
    flex-shrink: 0;
}

.fluent-icon-medium {
    width: 24px;
    height: 24px;
}

.fluent-icon-large {
    width: 32px;
    height: 32px;
}

/* Animations */
@keyframes fluent-fade-in {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fluent-slide-in-right {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fluent-scale-in {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.fluent-animate-fade-in {
    animation: fluent-fade-in var(--fluent-duration-gentle) var(--fluent-curve-decelerate);
}

.fluent-animate-slide-in-right {
    animation: fluent-slide-in-right var(--fluent-duration-gentle) var(--fluent-curve-decelerate);
}

.fluent-animate-scale-in {
    animation: fluent-scale-in var(--fluent-duration-gentle) var(--fluent-curve-decelerate);
}

/* Progress Indicator */
.fluent-progress {
    width: 100%;
    height: 4px;
    background-color: var(--fluent-neutral-background-3);
    border-radius: var(--fluent-radius-small);
    overflow: hidden;
}

.fluent-progress-bar {
    height: 100%;
    background-color: var(--fluent-brand-primary);
    border-radius: var(--fluent-radius-small);
    transition: width var(--fluent-duration-normal) var(--fluent-curve-standard);
}

.fluent-progress-indeterminate .fluent-progress-bar {
    width: 30%;
    animation: progress-indeterminate 2s infinite var(--fluent-curve-linear);
}

@keyframes progress-indeterminate {
    0% { transform: translateX(-100%); }
    50% { transform: translateX(0%); }
    100% { transform: translateX(400%); }
}

/* Shimmer Effect */
.fluent-shimmer {
    background: linear-gradient(
        90deg,
        var(--fluent-neutral-background-2) 0%,
        var(--fluent-neutral-background-3) 50%,
        var(--fluent-neutral-background-2) 100%
    );
    background-size: 200% 100%;
    animation: shimmer 2s infinite;
}

@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* Responsive Design */
@media (max-width: 768px) {
    .fluent-button {
        padding: var(--fluent-space-md) var(--fluent-space-xl);
        font-size: var(--fluent-font-size-300);
    }
    
    .fluent-title-1 {
        font-size: var(--fluent-font-size-700);
    }
    
    .fluent-title-2 {
        font-size: var(--fluent-font-size-600);
    }
}

/* Dark Theme Support */
@media (prefers-color-scheme: dark) {
    :root {
        --fluent-neutral-background-1: #1F1F1F;
        --fluent-neutral-background-2: #2D2D2D;
        --fluent-neutral-background-3: #3A3A3A;
        --fluent-neutral-background-4: #484848;
        --fluent-neutral-background-canvas: #151515;
        
        --fluent-neutral-foreground-1: #FFFFFF;
        --fluent-neutral-foreground-2: #E5E5E5;
        --fluent-neutral-foreground-3: #CCCCCC;
        --fluent-neutral-foreground-disabled: #999999;
    }
}

/* High Contrast Support */
@media (prefers-contrast: high) {
    .fluent-button-primary {
        border: 2px solid;
    }
    
    .fluent-card {
        border: 2px solid var(--fluent-neutral-foreground-3);
    }
}