@layer layout, components;

@import url('./components/upload-image.css');
@import url('./components/canvas.css');
@import url('./components/controls-panel.css');
@import url('./components/zoom.css');
@import url('./components/message.css');
@import url('./components/loading.css');
@import url('./components/gui.css');

@keyframes slideIn {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes slideOut {
    from { transform: translateX(0); opacity: 1; }
    to { transform: translateX(100%); opacity: 0; }
}

@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

:root {
    /* Color Palette */
    --color-bg-primary: #1a1a2e;
    --color-bg-secondary: #212e4e;
    --color-bg-tertiary: #1d518d;
    --color-accent: #fb7533;
    --color-accent-hover: #cf571b;
    --color-text-primary: #ffffff;
    --color-text-secondary: #d4d4e3;
    --color-border: #4d4d83;
    --color-error: #ff4444;
    --color-success: #44ff44;
    
    /* Spacing */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    
    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    
    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-normal: 250ms ease;
    --transition-slow: 400ms ease;
}

/* CSS Reset and Base Styles */
@layer layout {
    *,
    *::before,
    *::after {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }

    html {
        font-size: 16px;
        scroll-behavior: smooth;
    }

    body {
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
        background-color: var(--color-bg-primary);
        color: var(--color-text-primary);
        line-height: 1.6;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
    }

    a {
        color: unset;
    }

    /* Header */
    header {
        background-color: var(--color-bg-secondary);
        padding: var(--spacing-md) var(--spacing-xl);
        border-bottom: 1px solid var(--color-border);
        text-align: center;

        & h1 {
            margin-bottom: 0;
            line-height: 0;
        }

        .logo {
            margin-bottom: -10px;
        
            @media (max-width: 768px) {
                width: 200px;
            }
        }
    }

    /* Main Layout */
    main {
        flex: 1;
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
        padding: var(--spacing-lg);
        max-width: 1400px;
        margin: 0 auto;
        width: 100%;
        
        @media (max-width: 768px) {
            padding: var(--spacing-md);
        }

        @media (min-width: 1024px) {
            grid-template-columns: 1fr 320px;
        }
    }

    /* Footer */
    footer {
        background-color: var(--color-bg-secondary);
        padding: var(--spacing-md);
        text-align: center;
        border-top: 1px solid var(--color-border);
        color: var(--color-text-secondary);
        font-size: 0.85rem;
    }

    .keyboard-hint {
        display: none;
        margin-top: var(--spacing-sm);
        font-size: 0.75rem;
        opacity: 0.8;

        /* For devices with mouse pointer */
        @media (pointer: fine) {
            display: block;
        }

        & kbd {
            background: var(--color-bg-tertiary);
            padding: 2px 6px;
            border-radius: 3px;
            font-family: monospace;
            font-size: 0.7rem;
            border: 1px solid var(--color-border);
        }
    }
}

/* Utility Classes */
.hidden {
    display: none !important;
}

.flex1 {
    flex: 1;
}

.hover:hover {
    cursor: pointer;
    background-color: var(--color-accent);
    border-color: var(--color-accent);
}

.drag-over {
    border-color: var(--color-accent);
    border-style: solid;
    background-color: rgba(233, 69, 96, 0.1);
}