/* style.css - The Disciplined Luminary Design System */

:root {
    /* Colors - Tonal Depth */
    --surface: #0b1326;
    --surface-container-low: #131b2e;
    --surface-container: #1b243b;
    --surface-container-high: #242d45;
    --surface-container-highest: #2d3449;
    
    --on-surface: #dae2fd;
    --on-surface-variant: #9ba3b7;
    
    --primary: #66dd8b;
    --primary-container: #25a55a;
    --on-primary: #00391c;
    
    --secondary: #ffb786;
    --on-secondary: #4d2700;
    
    --tertiary: #ffb4ac;
    --on-tertiary: #690005;
    
    --outline-variant: rgba(61, 74, 65, 0.15); /* Ghost Border */
}

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

body {
    background-color: var(--surface);
    color: var(--on-surface);
    font-family: 'Inter', sans-serif;
    margin: 0;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .display-lg {
    font-family: 'Manrope', sans-serif;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.label-architectural {
    font-family: 'Inter', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--on-surface-variant);
}

/* The "No-Line" Rule - Boundaries through background shifts */
.card-tonal {
    background-color: var(--surface-container-low);
    border-radius: 1.5rem; /* xl equivalent */
    padding: 1.5rem;
}

.card-lifted {
    background-color: var(--surface-container-high);
    border-radius: 1.5rem;
    padding: 1.5rem;
}

/* Glassmorphism */
.glass {
    background: rgba(27, 36, 59, 0.7);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border: 1px solid var(--outline-variant);
}

/* Primary CTA Gradient */
.btn-emerald {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-container) 100%);
    color: var(--on-primary);
    font-weight: 700;
    border-radius: 0.75rem;
    transition: transform 0.2s ease, filter 0.2s ease;
    border: none;
    padding: 1rem 2rem;
    cursor: pointer;
}

.btn-emerald:hover {
    transform: translateY(-2px);
    filter: brightness(1.1);
}

.btn-emerald:active {
    transform: translateY(0);
}

/* Status Chips - Pills */
.chip {
    padding: 0.25rem 1rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
}

.chip-present {
    background-color: var(--primary);
    color: var(--on-primary);
}

.chip-late {
    background-color: var(--secondary);
    color: var(--on-secondary);
}

.chip-absent {
    background-color: var(--tertiary);
    color: var(--on-tertiary);
}

/* Ambient Shadows */
.ambient-shadow {
    box-shadow: 0 20px 40px rgba(218, 226, 253, 0.08);
}

/* Ghost Border */
.ghost-border {
    border: 1px solid var(--outline-variant);
}

/* Utilities */
.gap-breathable {
    gap: 1.5rem;
}