:root {
    --surface: #131313;
    --surface-container: #201f1f;
    --surface-container-low: #1c1b1b;
    --surface-container-high: #2a2a2a;
    --surface-container-highest: #353534;
    --surface-container-lowest: #0e0e0e;
    --surface-bright: #393939;
    --on-surface: #e5e2e1;
    --on-surface-variant: #ddc1ae;
    --on-surface-variant-50: rgba(221, 193, 174, 0.5);
    --primary: #ffb77d;
    --primary-container: #ff8c00;
    --primary-container-20: rgba(255, 140, 0, 0.2);
    --primary-container-10: rgba(255, 140, 0, 0.1);
    --secondary-container: #ffdb3c;
    --tertiary: #85cfff;
    --tertiary-10: rgba(133, 207, 255, 0.1);
    --error: #ffb4ab;
    --error-container: #93000a;
    --error-container-20: rgba(147, 0, 10, 0.2);
    --error-20: rgba(255, 180, 171, 0.2);
    --outline-variant: #564334;
    --outline-variant-15: rgba(86, 67, 52, 0.15);
    --outline-variant-30: rgba(86, 67, 52, 0.3);
}

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--surface);
    color: var(--on-surface);
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

.bg-surface { background-color: var(--surface); }
.bg-surface-container { background-color: var(--surface-container); }
.bg-surface-container-low { background-color: var(--surface-container-low); }
.bg-surface-container-high { background-color: var(--surface-container-high); }
.bg-surface-container-highest { background-color: var(--surface-container-highest); }
.bg-surface-container-lowest { background-color: var(--surface-container-lowest); }
.bg-surface-bright { background-color: var(--surface-bright); }

.text-on-surface { color: var(--on-surface); }
.text-on-surface-variant { color: var(--on-surface-variant); }
.text-on-surface-variant-50 { color: var(--on-surface-variant-50); }
.text-primary { color: var(--primary); }
.text-tertiary { color: var(--tertiary); }
.text-error { color: var(--error); }

.bg-primary { background-color: var(--primary); }
.bg-primary-container { background-color: var(--primary-container); }
.bg-primary-container-20 { background-color: var(--primary-container-20); }
.bg-primary-container-10 { background-color: var(--primary-container-10); }
.bg-secondary-container { background-color: var(--secondary-container); }
.bg-tertiary-10 { background-color: var(--tertiary-10); }
.bg-error-container { background-color: var(--error-container); }
.bg-error-container-20 { background-color: var(--error-container-20); }

.border-outline-variant { border-color: var(--outline-variant); }
.border-outline-variant-15 { border-color: var(--outline-variant-15); }
.border-outline-variant-30 { border-color: var(--outline-variant-30); }
.border-tertiary { border-color: var(--tertiary); }
.border-primary-container { border-color: var(--primary-container); }
.border-error { border-color: var(--error); }
.border-error-20 { border-color: var(--error-20); }

.h-16 { height: 4rem; }
.h-2px { height: 2px; }
.w-12 { width: 3rem; }

.x-small { font-size: 0.625rem; }
.tracking-widest { letter-spacing: 0.1em; }
.tracking-wider { letter-spacing: 0.05em; }

/* Sidebar */
.nav-link {
    color: var(--on-surface-variant);
    opacity: 0.8;
    transition: all 0.3s ease;
    border-left: 4px solid transparent;
}

.nav-link:hover {
    background-color: var(--surface-container-high);
    color: var(--primary);
    opacity: 1;
}

.nav-link.active {
    background-color: var(--surface-container-high);
    color: var(--primary);
    border-left-color: var(--primary);
    opacity: 1;
}

/* Radial Progress */
.radial-progress-container {
    position: relative;
    width: 12rem;
    height: 12rem;
}

.radial-progress {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.radial-progress .track {
    fill: transparent;
    stroke: var(--surface-container-highest);
    stroke-width: 8;
}

.radial-progress .fill {
    fill: transparent;
    stroke: var(--primary-container);
    stroke-width: 8;
    stroke-dasharray: 251.2;
    stroke-dashoffset: 251.2;
    stroke-linecap: round;
    transition: stroke-dashoffset 1s ease-out;
}

.radial-text {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Accent Bar */
.accent-bar {
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
}

/* Timeline */
.timeline {
    position: relative;
    border-left: 1px solid var(--outline-variant-30);
    margin-left: 0.5rem;
    padding-left: 1.5rem;
}

.timeline-item {
    position: relative;
    margin-bottom: 1.5rem;
}

.timeline-dot {
    position: absolute;
    left: -1.85rem;
    top: 0.25rem;
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 50%;
    background-color: var(--outline-variant);
    border: 2px solid var(--surface);
}

.timeline-item.active .timeline-dot {
    background-color: var(--primary);
}

/* FAB */
.fab {
    position: fixed;
    bottom: 6rem;
    right: 1.5rem;
    width: 3.5rem;
    height: 3.5rem;
    background: linear-gradient(135deg, var(--primary), var(--primary-container));
    color: var(--on-primary-container);
    border: none;
    z-index: 1000;
    transition: transform 0.2s ease;
}

.fab:hover {
    transform: scale(1.1);
}

@media (min-width: 768px) {
    .fab {
        bottom: 2rem;
        right: 2rem;
    }
}

/* Bottom Nav */
.nav-item {
    color: var(--on-surface-variant);
}

.nav-item.active {
    color: var(--primary);
    background-color: var(--surface-container-high);
}

/* Utilities */
.space-y-3 > * + * { margin-top: 0.75rem; }
.space-y-4 > * + * { margin-top: 1rem; }
.space-y-5 > * + * { margin-top: 1.25rem; }
.space-y-6 > * + * { margin-top: 1.5rem; }

.max-w-7xl { max-width: 80rem; }

.avatar { width: 2rem; height: 2rem; }

.icon-box { width: 2.5rem; height: 2.5rem; display: flex; align-items: center; justify-content: center; }

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--surface);
}

::-webkit-scrollbar-thumb {
    background: var(--surface-container-highest);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--outline-variant);
}