package main

// scifiCleanInputCSS is appended to the host Tailwind input.css via CSSManifest.
//
// Contents:
//   1. CSS-variable fallback stacks for --font-heading / --font-body / --font-mono.
//      Per docs/FONTS.md (wave-1 policy), the theme bundles no fonts and consumes
//      fonts exclusively via these variables. The fallback stacks intentionally
//      already approximate Sci-Fi Clean's aesthetic so the theme looks right
//      before the admin picks any Google Fonts.
//   2. .hairline utility — exactly border: 1px solid hsl(var(--border)).
//      UAT §13.5 mandates 1px width; do not raise.
//   3. .bg-grid utility — translucent blueprint grid as a CSS gradient.
//      Uses currentColor + opacity to track --foreground.
//   4. .tabular-nums / .mono-numerals helpers — UAT §13.7 wants
//      font-variant-numeric: tabular-nums on every mission_stat value.
//   5. .scrim utility — required scrim layer for full-bleed hero text (UAT §6).
//
// The literal substrings 'Space Grotesk', 'JetBrains Mono', '.hairline', '.bg-grid'
// must appear here verbatim (UAT §13.4).
const scifiCleanInputCSS = `
/* === Sci-Fi Clean: font-family fallback variables ===
 * The site admin assigns real fonts via the typography settings; until then,
 * the variables fall through to the stacks below. 'Space Grotesk', 'Inter',
 * and 'JetBrains Mono' are spec §5 recommendations, available in the Google
 * Fonts picker.
 */
:root {
    --font-heading: "Space Grotesk", "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --font-body: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* === Sci-Fi Clean: utilities ===
 * Hairline rules and a translucent blueprint grid are the two utility classes
 * the theme uses heavily. Tailwind's defaults cover everything else.
 */
.hairline {
    border: 1px solid hsl(var(--border));
}

.hairline-t {
    border-top: 1px solid hsl(var(--border));
}

.hairline-b {
    border-bottom: 1px solid hsl(var(--border));
}

.bg-grid {
    background-color: hsl(var(--background));
    background-image:
        linear-gradient(to right, hsl(var(--border) / 0.6) 1px, transparent 1px),
        linear-gradient(to bottom, hsl(var(--border) / 0.6) 1px, transparent 1px);
    background-size: 32px 32px;
}

.mono-numerals {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
}

.tabular-nums {
    font-variant-numeric: tabular-nums;
}

.scrim {
    position: relative;
}

.scrim::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: hsl(var(--background) / 0.65);
    pointer-events: none;
}

.scrim > * {
    position: relative;
    z-index: 1;
}

/* === Sci-Fi Clean: focus rings ===
 * Use the --ring token (a precise technical blue) for all focus states so
 * the keyboard cursor is visible against either preset.
 */
.scifi-focus:focus-visible {
    outline: 2px solid hsl(var(--ring));
    outline-offset: 2px;
}

/* === Sci-Fi Clean: chevron ===
 * Right-arrow chevron used in ScifiButtonBlock; encoded as Unicode so it
 * never breaks across renderers (UAT §13.14).
 */
.scifi-chevron::after {
    content: " \2192";
    font-family: var(--font-mono);
    margin-left: 0.5rem;
}

/* === Sci-Fi Clean: heading family ===
 * The host shadcn layer doesn't apply --font-heading by default; wire it
 * up here for the four heading levels we render.
 */
.scifi-h1, .scifi-h2, .scifi-h3, .scifi-h4 {
    font-family: var(--font-heading);
    font-feature-settings: "ss01" on;
}

.scifi-body {
    font-family: var(--font-body);
}

.scifi-mono {
    font-family: var(--font-mono);
}
`