@layer reset, base, components, utilities;

@import "./reset.css" layer(reset);

/* ─── Local fonts ──────────────────────────────────────────────────────── */
@font-face {
    font-family: 'ChicagoFLF';
    src: url('/fonts/ChicagoFLF.ttf') format('truetype');
}

/* ─── Tokens ─────── */
:root {
    color-scheme: light dark;

    /* Body */
    --font-sans: 'Inter Variable', 'Inter', sans-serif;
    /* Headings & Buttons */
    --font-chicago: 'ChicagoFLF', sans-serif;
    /* Code */
    --font-mono: 'JetBrains Mono Variable', 'JetBrains Mono', 'Menlo', 'Monaco', 'Courier New', monospace;

    /* Gray tones

       Text colors:
         Primary (titles, body):      neutral-700 / dark:neutral-300
         Secondary (descriptions, labels, footer, breadcrumbs): neutral-600 / dark:neutral-400
         Interact/hover:              text-black / dark:text-white (max contrast)
         Disabled:                    neutral-300 / dark:neutral-700
         (exceptions exist when bg differs, e.g. FinderLink inverts text on colored bg)

       Backgrounds:
         Page:                        neutral-25 / dark:neutral-920
         Header/Footer:               neutral-10 / dark:neutral-920
         Cards:                       neutral-25 / dark:neutral-910
         Elevated (modals, code):     white / dark:neutral-950
         Hover state:                 neutral-75 / dark:neutral-875

       Borders:
         Primary:                     neutral-200 / dark:neutral-850
         Hover:                       neutral-300 / dark:neutral-600

       Links:
         Default:                     blue-700 / dark:blue-350
         Hover:                       blue-700 / dark:blue-300 */
    --color-neutral-10: oklch(99.8% 0 0);
    --color-neutral-25: oklch(99.5% 0 0);
    --color-neutral-50: oklch(98.5% 0 0);
    --color-neutral-75: oklch(97.8% 0 0);
    --color-neutral-100: oklch(97% 0 0);
    --color-neutral-150: oklch(95.6% 0 0);
    --color-neutral-200: oklch(92.2% 0 0);
    --color-neutral-300: oklch(87% 0 0);
    --color-neutral-350: oklch(80.9% 0 0);
    --color-neutral-400: oklch(70.8% 0 0);
    --color-neutral-450: oklch(62.9% 0 0);
    --color-neutral-500: oklch(55.6% 0 0);
    --color-neutral-550: oklch(49.7% 0 0);
    --color-neutral-600: oklch(43.9% 0 0);
    --color-neutral-650: oklch(40.5% 0 0);
    --color-neutral-700: oklch(37.1% 0 0);
    --color-neutral-750: oklch(32.0% 0 0);
    --color-neutral-800: oklch(26.9% 0 0);
    --color-neutral-850: oklch(23.7% 0 0);
    --color-neutral-875: oklch(22.1% 0 0);
    --color-neutral-900: oklch(20.5% 0 0);
    --color-neutral-910: oklch(19.3% 0 0);
    --color-neutral-920: oklch(18.1% 0 0); /* primary dark mode background */
    --color-neutral-930: oklch(16.9% 0 0);
    --color-neutral-940: oklch(15.7% 0 0);
    --color-neutral-950: oklch(14.5% 0 0);

    /* Blue that matches htmx logo */
    --color-blue-50: oklch(0.9714 0.0108 256.69);
    --color-blue-100: oklch(0.9375 0.0235 250.08);
    --color-blue-200: oklch(0.8908 0.043 249.39);
    --color-blue-300: oklch(0.8196 0.0739 247.52);
    --color-blue-350: oklch(0.7729 0.0925 249.30);
    --color-blue-400: oklch(0.7262 0.111 251.08);
    --color-blue-500: oklch(0.6393 0.1445 257.27);
    --color-blue-600: oklch(0.5693 0.1653 261.81); /* htmx brand blue */
    --color-blue-700: oklch(0.505 0.1698 264.24);
    --color-blue-800: oklch(0.4421 0.1412 265.64);
    --color-blue-900: oklch(0.3934 0.1075 265.08);
    --color-blue-950: oklch(0.2936 0.068 267.21);

    --radius-xs: 0.125rem;
    --radius-sm: 0.25rem;
    --radius-md: 0.375rem;
    --radius-lg: 0.625rem; /* override of Tailwind default 0.5rem */
    --radius-xl: 0.75rem;
    --radius-full: 9999px;

    --tracking-tightest: -0.075em;
    --tracking-tight: -0.025em;

    /* ─── Layout ─────────────────────────────────────────────────────── */
    --navigation-bar-height: 56px;
    @media (width >= 64rem) {
        --navigation-bar-height: 76px;
    }
    --header-height: var(--navigation-bar-height);
    --construction-banner-height: 40px;

    /* ─── Shiki (was in input.css base layer; light-dark()-ified) ────── */
    --astro-code-foreground: light-dark(#1a1a1a, var(--color-neutral-350));
    --astro-code-background: light-dark(white, var(--color-neutral-930));
    --astro-code-token-string-expression: #bca26c; /* HTML tags (yellow) */
    --astro-code-token-function: light-dark(#5a5a5a, var(--color-neutral-350)); /* HTML attrs */
    --astro-code-token-keyword: #6aab73; /* attribute = */
    --astro-code-token-string: #6aab73; /* attribute values */
    --astro-code-token-constant: #ce8e6d; /* function, async, export */
    --astro-code-token-parameter: #57a8f5; /* functions/methods */
    --astro-code-token-punctuation: #c87dbb; /* properties */
    --astro-code-token-comment: #808080;
    --astro-code-token-link: #57a8f5;
}

/* ─── Base ─────────────────────────────────────────────────────────────── */
@layer base {
    body {
        overflow-x: hidden;
        color: light-dark(var(--color-neutral-700), var(--color-neutral-300));
        background-color: light-dark(var(--color-neutral-25), var(--color-neutral-920));
    }

    button, a, [role="button"] {
        touch-action: manipulation;
    }

    h1, h2, h3, h4, h5, h6 {
        font-family: var(--font-chicago), serif;
        letter-spacing: var(--tracking-tightest);
        @media (width >= 40rem) {
            letter-spacing: var(--tracking-tight);
        }
    }

    a, a * {
        text-decoration-thickness: 0.125em;
        text-underline-offset: 0.25em;
    }
}

/* ─── Components ───────────────────────────────────────────────────────── */
@layer components {
    /* Card — neutral background, thin border, rounded corners.
       Variants tweak corner radius: .xs / .sm / .lg / .xl (default = md). */
    .card {
        background: light-dark(var(--color-neutral-25), var(--color-neutral-910));
        border: 1px solid light-dark(var(--color-neutral-200), var(--color-neutral-800));
        border-radius: var(--radius-md);

        &.xs {
            border-radius: var(--radius-xs);
        }

        &.sm {
            border-radius: var(--radius-sm);
        }

        &.lg {
            border-radius: var(--radius-lg);
        }

        &.xl {
            border-radius: var(--radius-xl);
        }
    }

    /* Demo window chrome — border, title bar with dots + label, content padding.
       Ported from input.css lines 442–502. @variant dark blocks rewritten as light-dark(). */
    .demo-container {
        position: relative;
        margin-block: 2rem;
        padding: 1.5rem;
        padding-top: calc(2rem + 1.5rem); /* title bar + content gutter */
        border: 1px solid light-dark(var(--color-neutral-200), var(--color-neutral-850));
        border-radius: var(--radius-lg);
        background: light-dark(white, var(--color-neutral-930));
        overflow: hidden;

        /* Title bar */

        &::before {
            content: 'DEMO';
            position: absolute;
            inset: 0 0 auto 0;
            height: 2rem;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: var(--font-sans);
            font-size: 0.675rem;
            font-weight: 500;
            letter-spacing: 0.1em;
            color: light-dark(
                    var(--color-neutral-500),
                    color-mix(in srgb, var(--color-neutral-500) 80%, transparent)
            );
            background: light-dark(var(--color-neutral-50), var(--color-neutral-920));
            border-bottom: 1px solid light-dark(var(--color-neutral-100), var(--color-neutral-900));
        }

        /* Traffic-light dots */

        &::after {
            content: '';
            position: absolute;
            top: calc((2rem - 9px) / 2);
            left: 0.75rem;
            width: 9px;
            height: 9px;
            border-radius: 9999px;
            background: light-dark(var(--color-neutral-200), var(--color-neutral-800));
            box-shadow: 15px 0 0 light-dark(var(--color-neutral-200), var(--color-neutral-800)),
            30px 0 0 light-dark(var(--color-neutral-200), var(--color-neutral-800));
        }
    }
}

/* ─── Stretched link (unlayered to override prose table padding) ───────── */
table:has(.stretch-link) {
    border-collapse: separate;
    border-spacing: 0;
}

tr.stretch-link {
    position: relative;

    & td {
        padding-block: 0.75em;
    }

    & td:first-child {
        padding-inline-start: 0.75rem;
    }

    & td:last-child {
        padding-inline-end: 0.75rem;
    }

    & td:first-child a {
        position: static;

        &::after {
            content: '';
            position: absolute;
            inset: 0;
        }
    }

    @media (hover: hover) {
        &:hover td {
            color: light-dark(var(--color-neutral-900), var(--color-neutral-100));
        }
    }

}

/* ─── Docs full-page sticky section headers ───────────────────────────── */
article.sticky-headers > section > h2 {
    position: sticky;
    top: var(--header-height);
    scroll-margin-top: var(--header-height);
    z-index: 20;
    font-size: 1.15em;
    margin-bottom: 0;
    background: light-dark(var(--color-neutral-25), var(--color-neutral-920));
    padding-block: 0.75rem;
    @media (width >= 40rem) {
        padding-block: 1rem;
    }
    margin-inline: -1rem;
    padding-inline: 1rem;
    border-bottom: 1px solid light-dark(var(--color-neutral-200), var(--color-neutral-850));
}

html:has(#construction-banner) article.sticky-headers > section > h2 {
    top: calc(var(--header-height) + var(--construction-banner-height));
    scroll-margin-top: calc(var(--header-height) + var(--construction-banner-height));
}

/* Scroll-driven: show bg/border only when stuck.
   Tracks parent section (not the sticky h2, which never exits the viewport).
   Uses cover range with absolute offset: fires when section top reaches the sticky threshold. */
@supports (animation-timeline: view()) {
    article.sticky-headers > section {
        view-timeline: --section block;
    }

    article.sticky-headers > section > h2 {
        background: transparent;
        border-bottom-color: transparent;
        animation: stick-bg linear both;
        animation-timeline: --section;
        animation-range:
            cover calc(100vh - var(--header-height))
            cover calc(100vh - var(--header-height) + 1px);
    }

    html:has(#construction-banner) article.sticky-headers > section > h2 {
        animation-range:
            cover calc(100vh - var(--header-height) - var(--construction-banner-height))
            cover calc(100vh - var(--header-height) - var(--construction-banner-height) + 1px);
    }

    @keyframes stick-bg {
        to {
            background: light-dark(var(--color-neutral-25), var(--color-neutral-920));
            border-bottom-color: light-dark(var(--color-neutral-200), var(--color-neutral-850));
        }
    }
}

/* ─── Utilities ────────────────────────────────────────────────────────── */
@layer utilities {
    /* `interact` semantic — apply per-element inside scoped <style> blocks:

         .btn {
             color: var(--color-blue-700);
             &:focus-visible, &:active { color: var(--color-blue-600); }
             @media (hover: hover) { &:hover { color: var(--color-blue-600); } }
         }

       No global helper class — replicating the Tailwind variant in vanilla CSS
       would need a preprocessor. Document the pattern, keep it manual. */
    /* Scan lines mask. Dark-mode shifts the gradient stop (light-dark() takes
       colors only, so swap via custom property + @media). */
    .scan-lines {
        --scan-stop: 12.5%;
        mask-size: 100% max(1.5px, 0.02em);
        mask-image: linear-gradient(to bottom, transparent 0%, black var(--scan-stop));
    }

    @media (prefers-color-scheme: dark) {
        .scan-lines {
            --scan-stop: 17.5%;
        }
    }

    /* 3D drop shadow (block).
       Parameterize via inline style:
         <div class="shadow-3d" style="--shadow-color: var(--color-blue-900)"></div>
       Optional --shadow-depth (any <length>, default 0.375cqh). */
    .shadow-3d {
        box-shadow: 0 calc(var(--shadow-depth, 0.375cqh) / 2) 0 color-mix(in srgb, var(--shadow-color) 95%, white),
        0 var(--shadow-depth, 0.375cqh) 0 color-mix(in srgb, var(--shadow-color) 95%, black);
    }

    /* 3D drop shadow (text). Parameterize identically via --shadow-color. */
    .text-shadow-3d {
        text-shadow: 0 2px 0 color-mix(in srgb, var(--shadow-color) 95%, white),
        0 4px 0 color-mix(in srgb, var(--shadow-color) 95%, black);
    }

    /* Subtle scrollbar. */
    .scrollbar-subtle {
        scrollbar-width: thin;
        scrollbar-color: light-dark(var(--color-neutral-300), var(--color-neutral-700)) transparent;

        &::-webkit-scrollbar {
            width: 6px;
        }

        &::-webkit-scrollbar-track {
            background: transparent;
        }

        &::-webkit-scrollbar-thumb {
            background: light-dark(var(--color-neutral-300), var(--color-neutral-700));
            border-radius: 3px;

            &:hover {
                background: light-dark(var(--color-neutral-400), var(--color-neutral-600));
            }
        }
    }

    /* Screen-reader only. */
    .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;
    }
}
