/* AICODE-PORT: Design tokens from design/src/index.css */

/* ==========================================================================
   Custom CSS Properties (Design Tokens)
   ========================================================================== */

:root {
    /* Raw Canvas - Industrial Chic Palette */
    --background: 43 18% 91%;
    --foreground: 222 47% 11%;

    /* Signal Orange */
    --primary: 20 100% 50%;
    --primary-foreground: 43 18% 91%;

    /* Secondary */
    --secondary: 43 18% 85%;
    --secondary-foreground: 222 47% 11%;

    /* Acid Olive */
    --accent: 71 71% 65%;
    --accent-foreground: 222 47% 11%;

    /* Deep Muted Olive */
    --olive: 82 45% 25%;
    --olive-foreground: 43 18% 91%;

    /* Muted */
    --muted: 43 12% 80%;
    --muted-foreground: 222 47% 40%;

    /* Destructive */
    --destructive: 0 84% 60%;
    --destructive-foreground: 43 18% 91%;

    /* Card & Input */
    --card: 43 18% 93%;
    --input: 43 18% 85%;
    --border: 222 47% 11%;
    --ring: 20 100% 50%;

    /* Terminal/Chat */
    --terminal-bg: 222 47% 8%;
    --terminal-foreground: 120 60% 70%;
    --terminal-accent: 20 100% 50%;

    /* Grid */
    --grid-line: 222 47% 11%;
}

/* ==========================================================================
   Typography Classes
   ========================================================================== */

.headline-massive {
    font-size: clamp(2.5rem, 8vw, 6rem);
    font-weight: 900;
    line-height: 0.95;
    letter-spacing: -0.03em;
    text-transform: uppercase;
}

.subhead {
    font-size: 1.125rem;
    line-height: 1.6;
    color: hsl(var(--muted-foreground));
}

@media (min-width: 768px) {
    .subhead {
        font-size: 1.25rem;
    }
}

/* ==========================================================================
   Button Classes
   ========================================================================== */

.btn-signal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: none;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-signal:hover {
    background-color: hsl(var(--foreground));
    color: hsl(var(--background));
}

.btn-signal:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-ghost-industrial {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    color: hsl(var(--foreground));
    font-family: 'JetBrains Mono', monospace;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: 1px solid hsl(var(--foreground));
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-ghost-industrial:hover {
    background-color: hsl(var(--foreground));
    color: hsl(var(--background));
}

/* ==========================================================================
   Badge Classes
   ========================================================================== */

.phase-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.5rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background-color: hsl(var(--accent));
    color: hsl(var(--accent-foreground));
    border: 1px solid hsl(var(--foreground));
}

/* ==========================================================================
   Card Classes
   ========================================================================== */

.roi-card {
    border: 1px solid hsl(var(--foreground));
    padding: 1.5rem;
    background-color: hsl(var(--background));
    transition: all 0.15s ease;
}

.roi-card:hover {
    background-color: hsl(var(--secondary) / 0.5);
}

.border-industrial {
    border: 1px solid hsl(var(--foreground));
}

/* ==========================================================================
   Terminal Classes
   ========================================================================== */

.terminal {
    background-color: hsl(var(--terminal-bg));
    font-family: 'JetBrains Mono', monospace;
    border: 1px solid hsl(var(--foreground));
}

/* ==========================================================================
   Grid Overlay
   ========================================================================== */

.grid-overlay {
    background-image:
        linear-gradient(to right, hsl(var(--grid-line) / 0.1) 1px, transparent 1px),
        linear-gradient(to bottom, hsl(var(--grid-line) / 0.1) 1px, transparent 1px);
    background-size: 40px 40px;
}

/* ==========================================================================
   Fidelity Bar (Progress)
   ========================================================================== */

.fidelity-bar {
    height: 0.25rem;
    width: 100%;
    background-color: hsl(var(--secondary));
    overflow: hidden;
}

.fidelity-fill {
    height: 100%;
    background-color: hsl(var(--primary));
    transition: width 0.5s ease;
}

/* ==========================================================================
   Animation Utilities
   ========================================================================== */

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

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

@keyframes pulse-signal {
    0%, 100% {
        box-shadow: 0 0 0 0 hsla(20, 100%, 50%, 0.4);
    }
    50% {
        box-shadow: 0 0 0 8px hsla(20, 100%, 50%, 0);
    }
}

.animate-pulse-signal {
    animation: pulse-signal 2s ease-in-out infinite;
}

@keyframes fade-in {
    0% {
        opacity: 0;
        transform: translateY(10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in {
    animation: fade-in 0.5s ease-out forwards;
}

@keyframes slide-up {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-slide-up {
    animation: slide-up 0.6s ease-out forwards;
}

@keyframes scale-in {
    0% {
        opacity: 0;
        transform: scale(0.95);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.animate-scale-in {
    animation: scale-in 0.3s ease-out forwards;
}

/* ==========================================================================
   Utility Overrides
   ========================================================================== */

/* Ensure no rounded corners (Industrial Chic) */
* {
    border-radius: 0 !important;
}

/* Hide elements with x-cloak until Alpine.js loads */
[x-cloak] {
    display: none !important;
}

/* Smooth scroll behavior */
html {
    scroll-behavior: smooth;
}

/* Selection color */
::selection {
    background-color: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
}

/* Custom scrollbar for terminal */
.terminal ::-webkit-scrollbar {
    width: 6px;
}

.terminal ::-webkit-scrollbar-track {
    background: hsl(var(--terminal-bg));
}

.terminal ::-webkit-scrollbar-thumb {
    background: hsl(var(--terminal-foreground) / 0.3);
}

.terminal ::-webkit-scrollbar-thumb:hover {
    background: hsl(var(--terminal-foreground) / 0.5);
}