@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    :root {
        --font-sans: 'Space Grotesk', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
        --font-mono: 'Share Tech Mono', monospace;
        --color-industrial-grey: #d1d5db;
        --color-industrial-dark: #111827;
        --color-amber: #ffb000;
    }

    html {
        font-family: var(--font-sans);
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    .font-display {
        font-family: var(--font-sans);
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    .font-mono,
    .crt-screen {
        font-family: var(--font-mono);
    }

    /* Inset Panels */
    .retro-panel {
        background: #f3f4f6;
        border: 2px solid #9ca3af;
        box-shadow: inset 1px 1px 0 #fff, 2px 2px 0 #4b5563;
    }

    .dark .retro-panel {
        background: #374151;
        border: 2px solid #1f2937;
        box-shadow: inset 1px 1px 0 #4b5563, 2px 2px 0 #000;
    }

    /* CRT Screen */
    .crt-screen {
        background: #000;
        color: var(--color-amber);
        border: 4px solid #4b5563;
        box-shadow: inset 0 0 15px rgba(255, 176, 0, 0.3);
        padding: 1.25rem;
        position: relative;
        overflow: hidden;
    }

    .crt-screen::before {
        content: " ";
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.1) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.03), rgba(0, 255, 0, 0.01), rgba(0, 0, 255, 0.03));
        z-index: 2;
        background-size: 100% 2px, 3px 100%;
        pointer-events: none;
    }

    /* Amber Glow */
    .text-amber-glow {
        color: var(--color-amber);
        text-shadow: 0 0 8px rgba(255, 176, 0, 0.6);
    }

    /* Animations */
    @keyframes blink {

        0%,
        100% {
            opacity: 1;
        }

        50% {
            opacity: 0;
        }
    }

    .animate-retro-blink {
        animation: blink 1s step-end infinite;
    }

    /* Custom Scrollbar - Industrial style */
    ::-webkit-scrollbar {
        width: 14px;
        height: 14px;
    }

    ::-webkit-scrollbar-track {
        background: #1f2937;
        box-shadow: inset 2px 2px 0 #000;
    }

    ::-webkit-scrollbar-thumb {
        background: #6b7280;
        border: 2px solid #1f2937;
        box-shadow: 2px 2px 0 #000, inset 1px 1px 0 #9ca3af;
    }

    ::-webkit-scrollbar-thumb:hover {
        background: #9ca3af;
    }

    /* Firefox */
    * {
        scrollbar-width: auto;
        scrollbar-color: #6b7280 #1f2937;
    }
}

@layer utilities {
    [x-cloak] {
        display: none !important;
    }
}