:root {
    /* --- Global Palette (Neutral Gray) --- */

    /* Brand Colors */
    --color-primary: #e1251c;
    --color-secondary: #3b82f6; /* Professional Blue */
    --color-tertiary: #10b981;

    /* Typography */
    --font-main: "Google Sans", "Roboto", sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
        "Liberation Mono", "Courier New", monospace;

    /* Neutrals (Neutral Gray) */
    --color-white: #ffffff;
    --color-black: #111827;
    --color-modal-overlay: rgba(0, 0, 0, 0.7);

    --color-gray-50: #f9fafb;
    --color-gray-100: #f3f4f6;
    --color-gray-200: #e5e7eb;
    --color-gray-300: #d1d5db;
    --color-gray-400: #9ca3af;
    --color-gray-500: #6b7280;
    --color-gray-600: #4b5563;
    --color-gray-700: #374151;
    --color-gray-800: #1f2337;
    --color-gray-900: #0e1221;

    --color-nav-icon: var(--color-gray-500);

    /* Shadows */
    --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --shadow-sm: 0 0 40px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 0 60px 0 rgb(0 0 0 / 0.1);
    --shadow-lg: 0 0 75px 0 rgb(0 0 0 / 0.1);
    --shadow-xl: 0 0 85px 0 rgb(0 0 0 / 0.1);
    --shadow-2xl: 0 0 100px 0 rgb(0 0 0 / 0.25);
    --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
}

.dark {
    --color-primary: #ef443b;
    --color-secondary: #6086fa;
    --color-tertiary: #34d399;
    --color-black: #b8b7d0;
    --color-gray-400: #868ab1;
    --color-nav-icon: var(--color-gray-400);
}

/* Custom classes map to variables */
.font-mono {
    font-family: var(--font-mono) !important;
}
.text-primary {
    color: var(--color-primary);
}
.bg-primary {
    background-color: var(--color-primary);
}
.bg-primary-50 {
    background-color: rgba(71, 38, 220, 0.05);
}
.hover\:bg-primary-50:hover {
    background-color: rgba(71, 38, 220, 0.05);
} /* Note: Opacity handling is trickier with simple vars, but this works for simple cases */
.hover\:text-primary:hover {
    color: var(--color-primary);
}
.text-black {
    color: var(--color-black) !important;
}
.text-secondary {
    color: var(--color-secondary) !important;
}
.bg-secondary {
    background-color: var(--color-secondary) !important;
}
.hover\:text-secondary:hover {
    color: var(--color-secondary) !important;
}

/* Base button text should be white when on primary/secondary bg */
.btn-primary,
.bg-primary,
.bg-secondary {
    color: var(--color-white) !important;
}

.btn-primary svg,
.bg-primary svg,
.bg-secondary svg {
    color: var(--color-white) !important;
}

.text-white {
    color: var(--color-white) !important;
}

/* Ensure icons inherit color properly within buttons/links */
.bg-primary svg,
.bg-secondary svg,
.btn-primary svg {
    color: inherit !important;
}

/* Nav/Header icons consistency */
nav .p-2.rounded-full {
    color: var(--color-nav-icon) !important;
}

nav .p-2.rounded-full:hover {
    color: var(--color-primary) !important;
    background-color: var(--color-gray-100) !important;
}

.dark nav .p-2.rounded-full:hover {
    background-color: var(--color-gray-700) !important;
}

/* Active state in nav override */
nav .text-primary.p-2.rounded-full {
    color: var(--color-primary) !important;
    background-color: rgba(
        71,
        38,
        220,
        0.1
    ) !important; /* Fixed: use rgba instead of opacity for background */
}

.dark nav .text-primary.p-2.rounded-full {
    background-color: var(--color-gray-700) !important;
}

/* Spinner visibility */
.animate-spin {
    color: var(--color-primary) !important;
}

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

/* --- Prose Overrides --- */
/* Ensure prose content respects our dark mode colors */
.dark .prose code {
    background-color: var(--color-gray-800) !important;
}
.dark .prose blockquote {
    border-left-color: var(--color-secondary) !important;
    background-color: var(--color-gray-800) !important;
    color: var(--color-gray-400) !important;
}

/* --- Clamp Typography Overrides --- */
/* Force clamp on prose headings to override default Tailwind typography sizes */
h1,
.prose h1 {
    font-size: clamp(1.4rem, 5vw, 1.8rem) !important;
    line-height: 1.1 !important;
    color: var(--color-black) !important;
    font-weight: 700 !important;
}
h2,
.prose h2 {
    font-size: clamp(1.25rem, 5vw, 1.5rem) !important;
    line-height: 1.1 !important;
    color: var(--color-black) !important;
    font-weight: 700 !important;
}
h3,
.prose h3 {
    font-size: clamp(1rem, 5vw, 1.25rem) !important;
    line-height: 1.1 !important;
    color: var(--color-black) !important;
    font-weight: 700 !important;
}
h4,
.prose h4 {
    font-size: clamp(0.875rem, 5vw, 1rem) !important;
    line-height: 1.1 !important;
    color: var(--color-black) !important;
    font-weight: 700 !important;
}
h5,
.prose h5 {
    font-size: clamp(0.75rem, 5vw, 0.875rem) !important;
    line-height: 1.1 !important;
    color: var(--color-black) !important;
    font-weight: 700 !important;
}
h6,
.prose h6 {
    font-size: clamp(0.625rem, 5vw, 0.75rem) !important;
    line-height: 1.1 !important;
    color: var(--color-black) !important;
    font-weight: 700 !important;
}
p,
.prose p {
    color: var(--color-black) !important;
}
hr,
.prose hr {
    margin: 3rem 0 !important;
}
.prose a {
    color: var(--color-secondary) !important;
    text-decoration: none !important;
}

/* Standard links outside prose */
a:not(.bg-primary):not(.bg-secondary):not(.text-white) {
    color: var(--color-secondary);
}
code,
.prose code {
    background-color: var(--color-gray-100) !important;
    color: var(--color-black) !important;
}
blockquote,
.prose blockquote {
    border-left-color: var(--color-secondary) !important;
    background-color: color-mix(
        in srgb,
        var(--color-secondary),
        transparent 90%
    ) !important;
    color: var(--color-black) !important;
    padding: 0.5rem 2rem !important;
    border-radius: 0.5rem !important;
}
ul,
.prose ul,
ol,
.prose ol {
    color: var(--color-black) !important;
}
b,
.prose b,
strong,
.prose strong {
    color: var(--color-black) !important;
}
.text-4xl,
.text-5xl {
    /* Apply to these utility classes specifically if they are used for titles */
    font-size: clamp(2.25rem, 5vw, 3rem) !important;
}

/* Shadow Overrides */
.shadow-sm {
    box-shadow: var(--shadow-sm) !important;
}
.shadow {
    box-shadow: var(--shadow) !important;
}
.shadow-md {
    box-shadow: var(--shadow-md) !important;
}
.shadow-lg {
    box-shadow: var(--shadow-lg) !important;
}
.shadow-xl {
    box-shadow: var(--shadow-xl) !important;
}
.shadow-2xl {
    box-shadow: var(--shadow-2xl) !important;
}
.shadow-inner {
    box-shadow: var(--shadow-inner) !important;
}
/* External link icon for prose links with target="_blank" */
.prose a[target="_blank"]::after {
    content: "";
    display: inline-block;
    width: 0.85em;
    height: 0.85em;
    margin-left: 0.2em;
    background-color: currentColor;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='3' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M13.5 6H5.25A2.25 2.25 0 0 0 3 8.25v10.5A2.25 2.25 0 0 0 5.25 21h10.5A2.25 2.25 0 0 0 18 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25' /%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='3' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M13.5 6H5.25A2.25 2.25 0 0 0 3 8.25v10.5A2.25 2.25 0 0 0 5.25 21h10.5A2.25 2.25 0 0 0 18 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25' /%3E%3C/svg%3E");
    mask-repeat: no-repeat;
    mask-size: contain;
    vertical-align: middle;
    position: relative;
    top: -1px;
    opacity: 0.8;
}

.prose a[target="_blank"]:hover::after {
    opacity: 1;
}