:root {
    --color-brand: #f97316;
    --color-base: #fafaf9;
    --color-ink: #09090b;
}

html,
body {
    margin: 0;
    padding: 0;
}

body {
    background-color: #fafaf9;
    color: #52525b;
    font-family: Inter, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

:where(h1),
:where(h2),
:where(h3),
:where(h4),
:where(h5),
:where(h6) {
    color: #09090b;
    font-family: 'Plus Jakarta Sans', 'Segoe UI', Inter, Roboto, Arial, sans-serif;
}

::selection {
    background-color: rgb(249 115 22 / 0.2);
    color: #7c2d12;
}

.font-display {
    font-family: 'Plus Jakarta Sans', 'Segoe UI', Inter, Roboto, Arial, sans-serif;
}

.font-body {
    font-family: Inter, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* Fallback custom token classes used by the UI system. */
.bg-base { background-color: #fafaf9; }
.bg-ink { background-color: #09090b; }
.text-ink { color: #09090b; }
.bg-brand { background-color: #f97316; }
.bg-brand-600 { background-color: #ea580c; }
.text-brand { color: #f97316; }
.text-brand-700 { color: #c2410c; }
.text-brand-900 { color: #7c2d12; }
.border-brand { border-color: #f97316; }
.bg-brand\/5 { background-color: rgb(249 115 22 / 0.05); }
.bg-brand\/10 { background-color: rgb(249 115 22 / 0.1); }
.bg-brand\/20 { background-color: rgb(249 115 22 / 0.2); }
.bg-brand\/60 { background-color: rgb(249 115 22 / 0.6); }
.border-brand\/10 { border-color: rgb(249 115 22 / 0.1); }
.border-brand\/20 { border-color: rgb(249 115 22 / 0.2); }
.border-brand\/30 { border-color: rgb(249 115 22 / 0.3); }
.ring-brand { --tw-ring-color: rgb(249 115 22 / 0.5); }
.ring-brand\/10 { --tw-ring-color: rgb(249 115 22 / 0.1); }
.ring-brand\/20 { --tw-ring-color: rgb(249 115 22 / 0.2); }
.shadow-brand\/5 { --tw-shadow-color: rgb(249 115 22 / 0.05); --tw-shadow: var(--tw-shadow-colored); }
.shadow-brand\/20 { --tw-shadow-color: rgb(249 115 22 / 0.2); --tw-shadow: var(--tw-shadow-colored); }
.shadow-brand\/25 { --tw-shadow-color: rgb(249 115 22 / 0.25); --tw-shadow: var(--tw-shadow-colored); }
.from-base {
    --tw-gradient-from: #fafaf9 var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(250 250 249 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-brand {
    --tw-gradient-from: #f97316 var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(249 115 22 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.to-brand-600 { --tw-gradient-to: #ea580c var(--tw-gradient-to-position); }

.bg-dot-pattern {
    background-image: radial-gradient(circle, #e4e4e7 1px, transparent 1px);
    background-size: 24px 24px;
}

.text-balance {
    text-wrap: balance;
}

/* Accessibility hardening: default zinc-400 is too low contrast on light surfaces. */
body .text-zinc-400 {
    color: #52525b;
}

.bg-ink .text-zinc-400,
.bg-zinc-900 .text-zinc-400,
.bg-black .text-zinc-400 {
    color: #a1a1aa;
}

.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cv-auto {
    content-visibility: auto;
    contain-intrinsic-size: 1px 900px;
}

@media (prefers-reduced-motion: reduce) {
    html:focus-within {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Stabilize card corner clipping during hover transforms (prevents radius flicker). */
.content-card {
    isolation: isolate;
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    -webkit-mask-image: -webkit-radial-gradient(white, black);
}

.content-card-media {
    transform: translateZ(0);
}

.content-card-image {
    display: block;
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.content-prose {
    color: #52525b;
    font-size: 1rem;
    line-height: 1.75;
}

.content-prose p {
    margin-bottom: 1.25rem;
}

.content-prose h3 {
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
    color: #09090b;
    font-size: 1.25rem;
    font-weight: 700;
}

.content-prose ul {
    margin: 0 0 1.25rem;
    padding-left: 1.25rem;
    list-style-type: disc;
}

.content-prose li {
    margin-bottom: 0.5rem;
}

.fade-in {
    animation: fadeIn 0.25s ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.loading-shimmer {
    background: linear-gradient(90deg, #e4e4e7 25%, #f4f4f5 50%, #e4e4e7 75%);
    background-size: 200% 100%;
    animation: shimmer 1.1s infinite;
}

@keyframes shimmer {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

.chart-bar {
    min-height: 2px;
    border-radius: 0.375rem 0.375rem 0 0;
}

#modal-root {
    position: relative;
    z-index: 80;
}

.admin-mobile-slide {
    animation: slideInLeft 0.2s ease-out;
}

@keyframes slideInLeft {
    from {
        transform: translateX(-100%);
    }

    to {
        transform: translateX(0);
    }
}