@import url('https://fonts.googleapis.com/css2?family=Fira+Code&display=swap');

:root {
    /* --- THEME VARIABLES (LIGHT) --- */
    --bg: #f9fafb;
    --bg-alt: #f3f4f6;
    --header-bg: #ffffff;
    --header-bg-translucent: rgba(255, 255, 255, 0.8);
    --bg-alt-translucent: rgba(243, 244, 246, 0.8);
    --code-bg: #f3f4f6;
    --text: #111827;
    --text-muted: #6b7280;
    --header-border: #e5e7eb;
    --surface-border: #d1d5db;
    --surface-bg: #ffffff;
    --surface-shadow-color: rgba(0, 0, 0, 0.1);
    --surface-shadow: 0 4px 6px -1px var(--surface-shadow-color), 0 2px 4px -2px var(--surface-shadow-color);
    --btn-secondary-shadow-color: rgba(0, 0, 0, 0.05);
    --accent: #4f46e5;
    --accent-light: #e0e7ff;
    --accent-text: #3730a3;
    --btn-primary-bg: #4f46e5;
    --btn-primary-text: #ffffff;
    --btn-primary-hover-bg: #4338ca;
    --btn-secondary-bg: #ffffff;
    --btn-secondary-text: #374151;
    --btn-secondary-border: #d1d5db;
    --btn-secondary-hover-bg: #f9fafb;
    --toast-success-bg: #dcfce7;
    --toast-success-text: #166534;
    --toast-error-bg: #fee2e2;
    --toast-error-text: #991b1b;
    --input-bg: #ffffff;
    --scroll-thumb: #a5b4fc;
    --scroll-track: #e5e7eb;
    --modal-backdrop: rgba(17, 24, 39, 0.5);
    --focus-ring-color: rgba(79, 70, 229, 0.4);
    --btn-danger-bg: #ef4444;
    --btn-danger-text: #ffffff;
    --btn-danger-hover-bg: #dc2626;
    --highlight: #81d4fa;

    --success: #16a34a;
    --success-light: #dcfce7;
    --success-text: #15803d;
    --danger: #dc2626;
    --danger-light: #fee2e2;
    --danger-text: #b91c1c;
    --warning: #d97706;
    --warning-light: #fef3c7;
    --warning-text: #b45309;
    --info-text: #0e7490;
    --surface: #ffffff;
    --surface-alt: #f3f4f6;
    --border: #e5e7eb;
}

body.dark {
    --bg: #111827;
    --bg-alt: #1f2937;
    --header-bg: #1f2937;
    --header-bg-translucent: rgba(31, 41, 55, 0.8);
    --bg-alt-translucent: rgba(55, 65, 81, 0.8);
    --code-bg: #1f2937;
    --text: #f9fafb;
    --text-muted: #9ca3af;
    --header-border: #374151;
    --surface-border: #4b5563;
    --surface-bg: #1f2937;
    --surface-shadow-color: rgba(0, 0, 0, 0.4);
    --btn-secondary-shadow-color: rgba(0, 0, 0, 0.2);
    --accent: #818cf8;
    --accent-light: #312e81;
    --accent-text: #c7d2fe;
    --btn-primary-bg: #6366f1;
    --btn-primary-text: #ffffff;
    --btn-primary-hover-bg: #4f46e5;
    --btn-secondary-bg: #374151;
    --btn-secondary-text: #e5e7eb;
    --btn-secondary-border: #4b5563;
    --btn-secondary-hover-bg: #4b5563;
    --toast-success-bg: #14532d;
    --toast-success-text: #dcfce7;
    --toast-error-bg: #7f1d1d;
    --toast-error-text: #fee2e2;
    --input-bg: #374151;
    --scroll-thumb: #4f46e5;
    --scroll-track: #1f2937;
    --modal-backdrop: rgba(0, 0, 0, 0.7);
    --focus-ring-color: rgba(99, 102, 241, 0.4);
    --btn-danger-bg: #f87171;
    --btn-danger-text: #ffffff;
    --btn-danger-hover-bg: #ef4444;
    --highlight: #81d4fa;

    --success: #4ade80;
    --success-light: #14532d;
    --success-text: #dcfce7;
    --danger: #f87171;
    --danger-light: #450a0a;
    --danger-text: #fca5a5;
    --warning: #facc15;
    --warning-light: #422006;
    --warning-text: #fde047;
    --info-text: #22d3ee;
    --surface: #334155;
    --surface-alt: #475569;
    --border: #475569;
}

/* --- Theme Variants --- */
.theme-ocean { --accent: #38bdf8; --btn-primary-bg: #0ea5e9; --btn-primary-hover-bg: #0284c7; }
body.dark .theme-ocean { --accent: #38bdf8; --btn-primary-bg: #0ea5e9; --btn-primary-hover-bg: #0369a1; }

.theme-forest { --accent: #4ade80; --btn-primary-bg: #22c55e; --btn-primary-hover-bg: #16a34a; }
body.dark .theme-forest { --accent: #4ade80; --btn-primary-bg: #22c55e; --btn-primary-hover-bg: #15803d; }

.theme-sunset { --accent: #fb923c; --btn-primary-bg: #f97316; --btn-primary-hover-bg: #ea580c; }
body.dark .theme-sunset { --accent: #fb923c; --btn-primary-bg: #f97316; --btn-primary-hover-bg: #c2410c; }

.theme-lavender { --accent: #c084fc; --btn-primary-bg: #a855f7; --btn-primary-hover-bg: #9333ea; }
body.dark .theme-lavender { --accent: #c084fc; --btn-primary-bg: #a855f7; --btn-primary-hover-bg: #7e22ce; }

.theme-pastel-dream { --bg: #fdf6f3; --bg-alt: #fbeee8; --header-bg: #fff; --surface-bg: #fff; --border: #f5d6c8; --surface-border: #f8e1d7; --accent: #f5967b; --btn-primary-bg: #f5967b; --btn-primary-hover-bg: #f37f5f; }
body.dark .theme-pastel-dream { --bg: #2c252a; --bg-alt: #3b3238; --header-bg: #3b3238; --surface-bg: #3b3238; --border: #564851; --surface-border: #4a3d46; --accent: #f5967b; --btn-primary-bg: #f5967b; --btn-primary-hover-bg: #f37f5f; --text: #f5e4dd; --text-muted: #bdaea8; }

.theme-minty-fresh { --bg: #f0fdf4; --bg-alt: #dcfce7; --header-bg: #fff; --surface-bg: #fff; --border: #bbf7d0; --surface-border: #cff9e0; --accent: #22c55e; --btn-primary-bg: #22c55e; --btn-primary-hover-bg: #16a34a; }
body.dark .theme-minty-fresh { --bg: #132d2b; --bg-alt: #1a3c39; --header-bg: #1a3c39; --surface-bg: #1a3c39; --border: #325854; --surface-border: #2c4c48; --accent: #4ade80; --btn-primary-bg: #22c55e; --btn-primary-hover-bg: #16a34a; --text: #dcfce7; --text-muted: #a3b1af; }

/* Base and Global Styles */
* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
    height: 100%;
    font-family: 'Sitka', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', sans-serif;
    background-color: var(--bg);
    color: var(--text);
    overflow: hidden;
    transition: background-color 0.3s, color 0.3s;
}

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--scroll-track); }
::-webkit-scrollbar-thumb { background-color: var(--scroll-thumb); border-radius: 10px; border: 2px solid var(--scroll-track); }

body.is-resizing { cursor: col-resize; user-select: none; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; }
.admin-only { display: none !important; }
body[data-user-role="admin"] .admin-only { display: flex !important; }