:root {
    /* Theme Colors */
    --color-slate-900: #0f172a;
    --color-slate-800: #1e293b;
    --color-slate-700: #334155;
    --color-slate-500: #64748b;
    --color-slate-400: #94a3b8;
    --color-slate-200: #e2e8f0;
    --color-accent: #06b6d4;

    /* Fonts */
    --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-mono: "Fira Code", "Roboto Mono", SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

/* Base styles for shared navigation and theme */
.nav-shared {
    background-color: rgba(15, 23, 42, 0.8);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--color-slate-800);
}

.text-accent {
    color: var(--color-accent);
}

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

.bg-slate-900 {
    background-color: var(--color-slate-900);
}

.text-slate-200 {
    color: var(--color-slate-200);
}

.text-slate-400 {
    color: var(--color-slate-400);
}

.text-slate-500 {
    color: var(--color-slate-500);
}