/**
 * Canonical design tokens for every server-rendered HTML page Neotoma ships.
 *
 * Single source of truth for the colors, fonts, and radii that bundled-page
 * surfaces (root landing, bundled product docs, OAuth UI, future pages) inline
 * into their own `<style>` blocks. Mirrors the canonical registry in
 * [docs/ui/design_system/color_palette.md](../../../docs/ui/design_system/color_palette.md);
 * the design-system validator (`scripts/validate_design_system.js`) checks
 * parity and refuses to merge drift unless the consumer is registered under
 * `palette_divergences` in
 * [docs/ui/design_system/dependencies.yaml](../../../docs/ui/design_system/dependencies.yaml).
 *
 * Server-rendered HTML cannot consume Tailwind utilities or React tokens, so
 * each entry exposes both the HSL triple (for `hsl(var(--token))` CSS variable
 * declarations consistent with the React stack) and a pre-computed `#rrggbb`
 * (for direct interpolation). Importers should reach for `.hsl` when they
 * declare CSS variables and `.hex` when they emit a literal color value.
 */
/**
 * Brand + status palette. Mirrors `docs/ui/design_system/color_palette.md`'s
 * canonical registry. Touch both files together — the validator enforces it.
 */
export const BUNDLED_PAGE_PALETTE = {
    background: {
        light: { hsl: "38 22% 98%", hex: "#fbfaf7" },
        dark: { hsl: "222 47% 11%", hex: "#0f172a" },
    },
    foreground: {
        light: { hsl: "28 22% 18%", hex: "#38301f" },
        dark: { hsl: "210 40% 95%", hex: "#f1f5f9" },
    },
    card: {
        light: { hsl: "35 20% 96%", hex: "#f6f1ea" },
        dark: { hsl: "217 33% 18%", hex: "#1e293b" },
    },
    card_foreground: {
        light: { hsl: "28 22% 18%", hex: "#38301f" },
        dark: { hsl: "210 40% 95%", hex: "#f1f5f9" },
    },
    popover: {
        light: { hsl: "38 22% 98%", hex: "#fbfaf7" },
        dark: { hsl: "222 47% 11%", hex: "#0f172a" },
    },
    popover_foreground: {
        light: { hsl: "28 22% 18%", hex: "#38301f" },
        dark: { hsl: "210 40% 95%", hex: "#f1f5f9" },
    },
    primary: {
        light: { hsl: "12 48% 38%", hex: "#903c2f" },
        dark: { hsl: "217 91% 60%", hex: "#3b82f6" },
    },
    primary_foreground: {
        light: { hsl: "0 0% 100%", hex: "#ffffff" },
        dark: { hsl: "0 0% 100%", hex: "#ffffff" },
    },
    secondary: {
        light: { hsl: "35 18% 94%", hex: "#f1ece3" },
        dark: { hsl: "217 33% 25%", hex: "#334155" },
    },
    secondary_foreground: {
        light: { hsl: "28 22% 18%", hex: "#38301f" },
        dark: { hsl: "210 40% 95%", hex: "#f1f5f9" },
    },
    muted: {
        light: { hsl: "35 18% 94%", hex: "#f1ece3" },
        dark: { hsl: "217 33% 25%", hex: "#334155" },
    },
    muted_foreground: {
        light: { hsl: "28 14% 44%", hex: "#807162" },
        dark: { hsl: "215 20% 65%", hex: "#94a3b8" },
    },
    accent: {
        light: { hsl: "35 18% 92%", hex: "#ece7dd" },
        dark: { hsl: "217 33% 25%", hex: "#334155" },
    },
    accent_foreground: {
        light: { hsl: "28 22% 18%", hex: "#38301f" },
        dark: { hsl: "210 40% 95%", hex: "#f1f5f9" },
    },
    destructive: {
        light: { hsl: "0 65% 50%", hex: "#d33333" },
        dark: { hsl: "0 72% 51%", hex: "#dd4b4b" },
    },
    destructive_foreground: {
        light: { hsl: "0 0% 100%", hex: "#ffffff" },
        dark: { hsl: "0 0% 100%", hex: "#ffffff" },
    },
    success: {
        light: { hsl: "152 45% 40%", hex: "#389470" },
        dark: { hsl: "142 76% 36%", hex: "#16a34a" },
    },
    warning: {
        light: { hsl: "32 85% 48%", hex: "#e29013" },
        dark: { hsl: "43 96% 56%", hex: "#fbbf24" },
    },
    info: {
        light: { hsl: "175 35% 42%", hex: "#468f8f" },
        dark: { hsl: "213 94% 68%", hex: "#60a5fa" },
    },
    border: {
        light: { hsl: "32 18% 88%", hex: "#e2dbd0" },
        dark: { hsl: "217 33% 25%", hex: "#334155" },
    },
    input: {
        light: { hsl: "32 18% 88%", hex: "#e2dbd0" },
        dark: { hsl: "217 33% 25%", hex: "#334155" },
    },
    divider: {
        light: { hsl: "30 16% 82%", hex: "#d7cec1" },
        dark: { hsl: "215 20% 35%", hex: "#475569" },
    },
    ring: {
        light: { hsl: "12 48% 38%", hex: "#903c2f" },
        dark: { hsl: "217 91% 60%", hex: "#3b82f6" },
    },
    warning_soft: {
        light: { hsl: "48 100% 92%", hex: "#fef6ce" },
        dark: { hsl: "32 70% 16%", hex: "#3e2c0a" },
    },
    warning_soft_foreground: {
        light: { hsl: "32 85% 22%", hex: "#693b0a" },
        dark: { hsl: "43 96% 70%", hex: "#fbd365" },
    },
    success_soft: {
        light: { hsl: "152 76% 96%", hex: "#ecfdf3" },
        dark: { hsl: "152 70% 14%", hex: "#0a3a26" },
    },
    success_soft_foreground: {
        light: { hsl: "152 70% 22%", hex: "#11542f" },
        dark: { hsl: "142 76% 60%", hex: "#4ade80" },
    },
    info_soft: {
        light: { hsl: "200 95% 96%", hex: "#ecf7fe" },
        dark: { hsl: "217 91% 18%", hex: "#0b275a" },
    },
    info_soft_foreground: {
        light: { hsl: "217 91% 28%", hex: "#0b3a8a" },
        dark: { hsl: "213 94% 78%", hex: "#9bc6fc" },
    },
    destructive_soft: {
        light: { hsl: "0 95% 96%", hex: "#feecec" },
        dark: { hsl: "0 60% 18%", hex: "#491212" },
    },
    destructive_soft_foreground: {
        light: { hsl: "0 70% 32%", hex: "#8b1818" },
        dark: { hsl: "0 92% 80%", hex: "#fc9b9b" },
    },
    notice_background: {
        light: { hsl: "35 20% 95%", hex: "#f4f0ea" },
        dark: { hsl: "24 34% 20%", hex: "#43301f" },
    },
    notice_border: {
        light: { hsl: "32 85% 75%", hex: "#f4c898" },
        dark: { hsl: "32 65% 32%", hex: "#86601e" },
    },
    notice_foreground: {
        light: { hsl: "24 55% 32%", hex: "#7f4424" },
        dark: { hsl: "42 95% 72%", hex: "#fad176" },
    },
    accent_marketing: {
        light: { hsl: "152 70% 40%", hex: "#1faa6e" },
        dark: { hsl: "152 76% 50%", hex: "#22e283" },
    },
    accent_marketing_foreground: {
        light: { hsl: "0 0% 100%", hex: "#ffffff" },
        dark: { hsl: "222 47% 11%", hex: "#0f172a" },
    },
};
/**
 * Typography stacks — kept as constants so every bundled-page surface picks
 * the same fonts whether or not it imports the React app's CSS.
 */
export const BUNDLED_PAGE_TYPOGRAPHY = {
    fontFamilySans: `-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif`,
    fontFamilyMono: `"JetBrains Mono", "Fira Code", "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace`,
    fontSizeBase: "15px",
    lineHeightBase: "1.55",
    fontSizeSmall: "13px",
    fontSizeMicro: "11.5px",
};
/**
 * Radii — same values as the React stack's `--radius` token (`0.5rem`).
 */
export const BUNDLED_PAGE_RADII = {
    sm: "4px",
    md: "6px",
    lg: "8px",
    pill: "999px",
};
/**
 * Prose typography contract for server-rendered Markdown surfaces.
 *
 * Mirrors {@link
 * ../../../frontend/src/components/design-system/MarkdownContent.tsx} so
 * bundled docs and the SPA-rendered docs feel like the same surface.
 *
 * Heading sizes track Tailwind's text-* scale:
 *   - h1 → text-3xl (1.875rem)
 *   - h2 → text-2xl (1.5rem)
 *   - h3 → text-lg  (1.125rem)
 *   - h4 → text-base (1rem)
 *
 * Margins match the spacing built into MarkdownContent.tsx (`mt-8 mb-4` on h1,
 * `mt-8 mb-3` on h2, `mt-6 mb-2` on h3, `mt-4 mb-1` on h4).
 */
export const BUNDLED_PAGE_PROSE = {
    heading: {
        h1: { fontSize: "1.875rem", marginTop: "2rem", marginBottom: "1rem", lineHeight: "1.2" },
        h2: { fontSize: "1.5rem", marginTop: "2rem", marginBottom: "0.75rem", lineHeight: "1.25" },
        h3: { fontSize: "1.125rem", marginTop: "1.5rem", marginBottom: "0.5rem", lineHeight: "1.3" },
        h4: { fontSize: "1rem", marginTop: "1rem", marginBottom: "0.25rem", lineHeight: "1.35" },
    },
    paragraph: {
        marginBottom: "0.875rem",
    },
    list: {
        paddingLeft: "1.375rem",
        itemGap: "0.25rem",
    },
    blockquote: {
        borderLeftWidth: "3px",
        paddingLeft: "0.75rem",
    },
    code: {
        inlinePadding: "1px 5px",
        inlineRadius: "4px",
        blockPadding: "12px 14px",
        blockRadius: "8px",
    },
    hr: {
        margin: "1.75rem 0",
    },
};
/**
 * Helper: emit a CSS-variable declaration block (without the `:root {}`
 * wrapper) so each surface can compose the variables it actually uses without
 * dragging in unused tokens.
 */
export function bundledPageCssVariables(theme, tokens = Object.keys(BUNDLED_PAGE_PALETTE)) {
    return tokens
        .map((name) => {
        const cssName = name.replace(/_/g, "-");
        const value = BUNDLED_PAGE_PALETTE[name][theme];
        return `  --${cssName}: ${value.hsl};`;
    })
        .join("\n");
}
/**
 * Convenience: read the light-mode hex for a token. Useful for inline-CSS
 * surfaces that do not declare CSS variables.
 */
export function lightHex(name) {
    return BUNDLED_PAGE_PALETTE[name].light.hex;
}
/**
 * Convenience: read the dark-mode hex for a token.
 */
export function darkHex(name) {
    return BUNDLED_PAGE_PALETTE[name].dark.hex;
}
//# sourceMappingURL=tokens.js.map