/*
 * Forensic primitives — atmosphere, typography, accent classes.
 *
 * NOTE: This blog renders LIGHT. The landing site renders dark. We diverged
 * from the upstream forensic.css to flip the rgba whites → blacks for
 * forensic-rule, forensic-grid-backdrop, forensic-card-accent, scrollbars.
 * The brand-green tokens still come from _tokens.css (shared, untouched);
 * we add --brand-green-deep below for AA contrast on white surfaces.
 */

:root {
    /* Darker accent green for body content / links on light surfaces.
       Passes WCAG AA (~4.8:1) against #FAFAF9. */
    --brand-green-deep: #15803d;
    /* Rebind brand-green-bright to the deep value for the blog so existing
       utility classes (.text-brand, .forensic-section-marker, Tailwind
       text-brand-green-bright) hit AA on white without per-call refactor. */
    --brand-green-bright: var(--brand-green-deep);
    /* Blog typography: clean sans (Inter) for headings + body, Roboto Mono for
       code — matching the docs site. Overrides the shared brand tokens
       (Fraunces / JetBrains Mono) for the blog only; the shared _tokens.css is
       untouched so the docs/blog token drift-guard stays green. */
    --font-display: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-mono: "Roboto Mono", ui-monospace, "SF Mono", Consolas, monospace;
}

/* ===== Brand wordmark ===== */
.lc-wordmark {
    font-family: var(--font-mono);
    font-weight: 600;
    letter-spacing: -0.04em;
    text-transform: lowercase;
}
.lc-wordmark .ai {
    /* On light surface the mint #4EDEA3 has ~2.2:1 contrast on cream — fails AA.
       Use the deep variant which is AA-safe on this surface. */
    color: var(--brand-green-deep);
}

/* ===== Typography utility classes ===== */
.font-display {
    font-family: var(--font-display);
    font-feature-settings: "ss01" on, "ss02" on;
}

.font-mono-tabular {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" on, "ss01" on;
}

/* ===== Brand accent utility classes ===== */
.text-brand {
    color: var(--brand-green-bright);
}

.bg-brand-soft {
    background-color: var(--brand-green-soft);
}

.bg-brand-faint {
    background-color: var(--brand-green-faint);
}

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

.border-brand {
    border-color: var(--brand-green-line);
}

.border-brand-strong {
    border-color: var(--brand-green);
}

/* ===== Forensic primitives ===== */

/* Section number — paper-style chapter marker */
.forensic-section-marker {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    color: var(--brand-green-bright);
    text-transform: uppercase;
}

/* Hairline rule used between sections */
.forensic-rule {
    height: 1px;
    background: linear-gradient(
        to right,
        transparent,
        rgba(0, 0, 0, 0.12) 12%,
        rgba(0, 0, 0, 0.12) 88%,
        transparent
    );
}

/* Grid backdrop — atmospheric texture under hero / cards */
.forensic-grid-backdrop {
    background-image:
        linear-gradient(rgba(0, 0, 0, 0.035) 1px, transparent 1px),
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.035) 1px,
            transparent 1px
        );
    background-size: 64px 64px;
    background-position: -1px -1px;
    mask-image: radial-gradient(
        ellipse at center,
        black 0%,
        black 50%,
        transparent 85%
    );
    -webkit-mask-image: radial-gradient(
        ellipse at center,
        black 0%,
        black 50%,
        transparent 85%
    );
}

/* Grain overlay — subtle SVG fractalNoise for depth (light variant) */
.forensic-grain {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.35 0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.4'/></svg>");
    opacity: 0.22;
    mix-blend-mode: multiply;
}

/* Display heading — Inter (optical-sizing is a no-op fallback) */
.forensic-display {
    font-family: var(--font-display);
    font-optical-sizing: auto;
    font-weight: 300;
    letter-spacing: -0.02em;
    line-height: 1.04;
}

.forensic-display-italic {
    font-family: var(--font-display);
    font-optical-sizing: auto;
    font-style: italic;
    font-weight: 300;
}

/* Card with brand-green tint and hairline.
   End color is a slightly-lifted cream (between body bg #f5f2e8 and white)
   so the card feels lifted from the page without the hard "stark white
   island on cream" break. */
.forensic-card-accent {
    background: linear-gradient(
        180deg,
        var(--brand-green-faint) 0%,
        #faf8f0 60%
    );
    border: 1px solid var(--brand-green-line);
    border-radius: 4px;
}

/* Native scrollbars + form controls follow the light theme (not the OS/browser dark default) */
html { color-scheme: light; }

/* ===== Thin scrollbars (light variant) ===== */
pre,
.thin-scroll {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.18) transparent;
}
pre::-webkit-scrollbar,
.thin-scroll::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
pre::-webkit-scrollbar-track,
.thin-scroll::-webkit-scrollbar-track {
    background: transparent;
}
pre::-webkit-scrollbar-thumb,
.thin-scroll::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.18);
    border-radius: 3px;
}
pre::-webkit-scrollbar-thumb:hover,
.thin-scroll::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, 0.32);
}

/* ===== Accessibility ===== */
:focus-visible {
    outline: 2px solid var(--brand-green);
    outline-offset: 2px;
}
:focus:not(:focus-visible) {
    outline: none;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}