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

/* ===== CLEAN MINIMAL THEME VARIABLES ===== */
:root {
    --bg-primary: #09090b;
    --bg-secondary: #121215;
    --bg-card: #18181b;
    --bg-card-hover: #222226;
    --text-primary: #e4e4e7;
    --text-heading: #fafafa;
    --text-muted: #a1a1aa;
    --accent: #10b981;
    --accent-rgb: 16, 185, 129;
    --accent-dark: #059669;
    --border-color: #27272a;
    --border-color-hover: #3f3f46;
    --nav-bg: rgba(9, 9, 11, 0.85);
    --scrollbar-track: #09090b;
    --scrollbar-thumb: #27272a;
    --input-bg: #121215;
}

/* Light Mode (Clean, Minimal Slate/Zinc) */
html.light-mode {
    --bg-primary: #ffffff;
    --bg-secondary: #f4f4f5;
    --bg-card: #fcfcfc;
    --bg-card-hover: #f4f4f5;
    --text-primary: #27272a;
    --text-heading: #09090b;
    --text-muted: #71717a;
    --accent: #059669;
    --accent-rgb: 5, 150, 105;
    --accent-dark: #047857;
    --border-color: #e4e4e7;
    --border-color-hover: #d4d4d8;
    --nav-bg: rgba(255, 255, 255, 0.85);
    --scrollbar-track: #ffffff;
    --scrollbar-thumb: #e4e4e7;
    --input-bg: #f4f4f5;
}

/* Global Reset & Base */
* {
    box-sizing: border-box;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 80px;
}

section[id] {
    scroll-margin-top: 80px;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

code, pre, .font-mono {
    font-family: 'Fira Code', monospace;
}

/* Minimal Scrollbar */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
}
::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: 3px;
}

/* Minimal Text & Border Classes (No Glowing Shadows) */
.neon-text {
    color: var(--accent);
    font-weight: 600;
}

.neon-border {
    border-color: var(--accent);
}

.typing-cursor::after {
    content: '|';
    color: var(--accent);
    margin-left: 2px;
}

/* Minimal Cards (Clean borders, no blurry lag) */
.glass-card {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    position: relative;
    overflow: hidden;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.glass-card:hover {
    border-color: var(--border-color-hover);
    background-color: var(--bg-card-hover);
}

/* Form & Input Styles */
.editor-textarea, input[type="text"], input[type="password"], textarea {
    background-color: var(--input-bg);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    border-radius: 6px;
}

.editor-textarea:focus, input[type="text"]:focus, input[type="password"]:focus, textarea:focus {
    outline: none;
    border-color: var(--accent);
}

/* Minimal Theme Toggle Button */
.theme-toggle-btn {
    position: fixed;
    top: 18px;
    right: 20px;
    z-index: 999;
    width: 38px;
    height: 38px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    color: var(--text-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.theme-toggle-btn:hover {
    border-color: var(--accent);
    background: var(--bg-card-hover);
}

.sun-icon, .moon-icon {
    width: 18px;
    height: 18px;
}

html.light-mode .sun-icon {
    display: none;
}
html.light-mode .moon-icon {
    display: block;
}
html:not(.light-mode) .sun-icon {
    display: block;
}
html:not(.light-mode) .moon-icon {
    display: none;
}

/* Clean Terminal Window */
#terminal-container {
    background-color: #0c0c0e;
    border: 1px solid var(--border-color);
    border-radius: 10px;
}

/* Light mode overrides for Tailwind classes */
html.light-mode .bg-\[\#0a0a0a\],
html.light-mode .bg-\[\#0a0a0a\]\/90 {
    background-color: var(--nav-bg) !important;
}
html.light-mode .bg-\[\#111\],
html.light-mode .bg-\[\#0f0f0f\] {
    background-color: var(--bg-secondary) !important;
}
html.light-mode .bg-gray-900,
html.light-mode .bg-gray-900\/50,
html.light-mode .bg-gray-900\/30,
html.light-mode .bg-gray-900\/20,
html.light-mode .bg-gray-800 {
    background-color: var(--bg-card) !important;
}
html.light-mode .text-white {
    color: var(--text-heading) !important;
}
html.light-mode .text-gray-300,
html.light-mode .text-gray-400 {
    color: var(--text-primary) !important;
}
html.light-mode .text-gray-500,
html.light-mode .text-gray-600 {
    color: var(--text-muted) !important;
}
html.light-mode .border-gray-700,
html.light-mode .border-gray-800 {
    border-color: var(--border-color) !important;
}
html.light-mode .text-green-400,
html.light-mode .text-green-500 {
    color: var(--accent) !important;
}
html.light-mode .border-green-500\/30,
html.light-mode .border-green-500\/50,
html.light-mode .border-green-700 {
    border-color: var(--border-color) !important;
}
html.light-mode .bg-green-900,
html.light-mode .bg-green-900\/20,
html.light-mode .bg-green-900\/30 {
    background-color: rgba(var(--accent-rgb), 0.08) !important;
}
html.light-mode #terminal-container {
    background-color: #f4f4f5 !important;
    border-color: var(--border-color) !important;
}
html.light-mode #terminal-output {
    color: #18181b !important;
}
html.light-mode #terminal-output .text-gray-400 {
    color: #52525b !important;
}