@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* FERRANMI DESIGN SYSTEM V1.0 (from AGENT.md) */
:root {
    --background-900: #06142E;
    --background-800: #0A1D3F;
    --background-700: #102A58;
    --background-600: #20396A;
    --background-500: #2D4174;

    --card: rgba(17, 33, 61, 0.72);
    --card-border: rgba(255, 255, 255, 0.08);
    --card-selected: #3B82F6;

    --primary: #3B82F6;
    --success: #22C55E;
    --warning: #F59E0B;
    --danger: #EF4444;

    --text-primary: #FFFFFF;
    --text-secondary: rgba(255, 255, 255, 0.72);
    --text-disabled: rgba(255, 255, 255, 0.38);

    --radius: 28px;
    --blur: 20px;

    --transition: 180ms cubic-bezier(.2, .8, .2, 1);
}

html, body {
    font-family: 'Inter', 'Google Sans', 'SF Pro Display', system-ui, -apple-system, sans-serif;
    background-color: #06142E;
    background-image: 
        linear-gradient(180deg, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0) 40%),
        url('../images/background.png');
    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;
    background-attachment: fixed;
    color: var(--text-primary);
    min-height: 100vh;
    overflow-x: hidden;
}

/* Card Base Styling (from AGENT.md) */
.app-card {
    --accent: #3B82F6;
    --accent-glow: rgba(59, 130, 246, 0.45);
    --accent-glow-subtle: rgba(59, 130, 246, 0.18);

    background: var(--card);
    backdrop-filter: blur(var(--blur));
    -webkit-backdrop-filter: blur(var(--blur));
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
    padding: 28px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    
    transition: transform .18s cubic-bezier(.2,.8,.2,1),
                box-shadow .18s cubic-bezier(.2,.8,.2,1),
                border-color .18s cubic-bezier(.2,.8,.2,1),
                background .18s cubic-bezier(.2,.8,.2,1),
                opacity .18s cubic-bezier(.2,.8,.2,1);
    outline: none;
    opacity: 1;
}

/* Normal / Hover State (from AGENT.md) */
.app-card:hover {
    transform: scale(1.02);
}

/* Focused / Selected State (from AGENT.md) */
.app-card:focus,
.app-card.is-focused {
    transform: scale(1.03);
    border: 2px solid var(--accent) !important;
    box-shadow: 0 0 20px var(--accent-glow),
                0 0 60px var(--accent-glow-subtle);
}

/* Pressed State */
.app-card:active {
    transform: scale(0.98);
}

/* Icon Container (from AGENT.md: 132px circular, white, shadow: 0 12px 30px rgba(0,0,0,.18)) */
.icon-circle {
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
}

/* Focus visible fallback */
.app-card:focus-visible {
    outline: none;
}