/* @hraness/design-kit paper-theme.css, portable contract 1.
 * Generated by scripts/generate-paper-theme.ts from src/palettes.ts.
 * Opt in with data-hraness-theme="paper". Import after existing theme rules.
 * No imports, asset requests, resets, layout recipes, or runtime dependencies.
 * Appearance uses inherited color-scheme; set data-theme on the boundary for
 * an explicit island. A root without a mode follows the operating system.
 * A non-paper data-palette on the boundary retains its selected colors.
 * Requires CSS light-dark() (Chrome 123+, Firefox 120+, Safari 17.5+).
 */

[data-hraness-theme="paper"] {
  --font-text: "Nebula Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-heading: var(--font-text);
  --font-sans: var(--font-text);
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, Monaco, Consolas, monospace;
  --ui-font-sans: var(--font-text);
  --ui-font-heading: var(--font-heading);
  --ui-font-mono: var(--font-mono);
  --text-body: 1rem;
  --text-caption: .75rem;
  --text-label: .875rem;
  --font-weight-regular: 400;
  --font-weight-medium: 550;
  --font-weight-bold: 700;
  --radius-sm: .375rem;
  --radius-md: .625rem;
  --radius-lg: .875rem;
  --ui-radius: .875rem;
  --control-radius: .625rem;
  --hraness-paper-heading-size: clamp(1.75rem, 3vw, 2.375rem);
  --hraness-paper-section-heading-size: clamp(1.25rem, 2.2vw, 1.75rem);
  --hraness-paper-summary-size: 1rem;
  --hraness-paper-heading-leading: 1.15;
  --hraness-paper-heading-tracking: -.035em;
  --hraness-marketing-measure: 80rem;
  --hraness-marketing-copy-measure: 40rem;
  --hraness-marketing-prose-measure: 68ch;
  --hraness-marketing-gutter: clamp(1.25rem, 4vw, 3rem);
  --hraness-marketing-radius: .625rem;
  --hraness-marketing-frame-radius: .875rem;
  --hraness-marketing-heading-weight: 550;
  --hraness-marketing-heading-tracking: -.025em;
  --hraness-marketing-section-space: clamp(3rem, 7vw, 6rem);
  --hraness-marketing-action-height: 2.75rem;
  font-family: var(--font-text);
}

/* Existing marketing roles declare defaults directly, so inherit this
 * opt-in rhythm at each role boundary without replacing component recipes. */
[data-hraness-theme="paper"] :where(.hraness-marketing-page, .hraness-marketing-header, .hraness-marketing-hero, .hraness-marketing-pillars, .hraness-marketing-install, .hraness-marketing-section, .hraness-marketing-primitives, .hraness-marketing-stats, .hraness-marketing-interfaces, .hraness-marketing-trust, .hraness-marketing-quotes, .hraness-marketing-pricing, .hraness-marketing-questions, .hraness-marketing-maker, .hraness-marketing-cta, .hraness-marketing-proof-frame) {
  --hraness-marketing-measure: inherit;
  --hraness-marketing-copy-measure: inherit;
  --hraness-marketing-prose-measure: inherit;
  --hraness-marketing-gutter: inherit;
  --hraness-marketing-radius: inherit;
  --hraness-marketing-frame-radius: inherit;
  --hraness-marketing-heading-weight: inherit;
  --hraness-marketing-heading-tracking: inherit;
  --hraness-marketing-section-space: inherit;
  --hraness-marketing-action-height: inherit;
}

:root[data-hraness-theme="paper"]:where(:not([data-theme]):not(.dark), [data-theme="system"]) { color-scheme: light dark; }
[data-hraness-theme="paper"]:where([data-theme="dark"], .dark:not([data-theme="light"])) { color-scheme: dark; }
[data-hraness-theme="paper"][data-theme="light"] { color-scheme: light; }

/* Opted-in shared headers retain their layout and receive the shared paint
 * contract, including snapshots used with older component releases. */
@layer components.hraness-design-kit.legacy {
/* Keep the browser aliases in separate feature queries: CSS optimizers can
 * collapse adjacent aliases to the prefixed property and lose Chromium blur. */
:where([data-hraness-theme="paper"]) .hraness-marketing-header, .hraness-marketing-header:where([data-hraness-theme="paper"]) {
  --hraness-marketing-header-background: var(--hraness-marketing-background);
  --hraness-marketing-header-backdrop: none;
  background: var(--hraness-marketing-header-background);
}

@supports (-webkit-backdrop-filter: blur(1px)) {
  :where([data-hraness-theme="paper"]) .hraness-marketing-header, .hraness-marketing-header:where([data-hraness-theme="paper"]) {
    --hraness-marketing-header-background: color-mix(in oklch, var(--hraness-marketing-background) 82%, transparent);
    --hraness-marketing-header-backdrop: blur(14px) saturate(1.4);
    -webkit-backdrop-filter: var(--hraness-marketing-header-backdrop);
  }
}

@supports (backdrop-filter: blur(1px)) {
  :where([data-hraness-theme="paper"]) .hraness-marketing-header, .hraness-marketing-header:where([data-hraness-theme="paper"]) {
    --hraness-marketing-header-background: color-mix(in oklch, var(--hraness-marketing-background) 82%, transparent);
    --hraness-marketing-header-backdrop: blur(14px) saturate(1.4);
    backdrop-filter: var(--hraness-marketing-header-backdrop);
  }
}

@media (prefers-reduced-transparency: reduce), (forced-colors: active) {
  :where([data-hraness-theme="paper"]) .hraness-marketing-header, .hraness-marketing-header:where([data-hraness-theme="paper"]) {
    --hraness-marketing-header-background: var(--hraness-marketing-background);
    --hraness-marketing-header-backdrop: none;
  }
}
}

:root[data-hraness-theme="paper"]:where(:not([data-palette]), [data-palette="paper"]),
[data-hraness-theme="paper"]:where(:not([data-palette]), [data-palette="paper"]) {
  --background: light-dark(#f8f7f4, #12100f);
  --foreground: light-dark(#1c1917, #f5f2ed);
  --muted: light-dark(#6c665f, #aaa29a);
  --faint: light-dark(#6c665f, #aaa29a);
  --grid: light-dark(#dfdcd6, #302b27);
  --line: light-dark(#b9b3ab, #514a44);
  --control-border: light-dark(#8a8177, #827a72);
  --surface: light-dark(#fffefa, #1d1a18);
  --surface-raised: light-dark(#fffefa, #211d1a);
  --surface-hover: light-dark(#ebe8e3, #292522);
  --card: light-dark(#fffefa, #1d1a18);
  --card-foreground: light-dark(#1c1917, #f5f2ed);
  --popover: light-dark(#fffefa, #211d1a);
  --popover-foreground: light-dark(#1c1917, #f5f2ed);
  --primary: light-dark(#1e5ae1, #8fb0ff);
  --primary-foreground: light-dark(#f8f7f4, #12100f);
  --primary-soft: light-dark(#dee5f3, #21232c);
  --secondary: light-dark(#ebe8e3, #292522);
  --secondary-foreground: light-dark(#1c1917, #f5f2ed);
  --accent: light-dark(#dee5f3, #21232c);
  --accent-foreground: light-dark(#1c1917, #f5f2ed);
  --focus: light-dark(#1e5ae1, #8fb0ff);
  --scrim: light-dark(#00000070, #000000b8);
  --disabled: light-dark(#fffefa, #211d1a);
  --disabled-foreground: light-dark(#6c665f, #aaa29a);
  --inverse: light-dark(#1c1917, #f5f2ed);
  --inverse-foreground: light-dark(#f8f7f4, #12100f);
  --danger: light-dark(#b23c34, #ef8c82);
  --danger-foreground: light-dark(#f8f7f4, #12100f);
  --danger-soft: light-dark(#f0e1dd, #2d1f1d);
  --warning: light-dark(#975600, #efae55);
  --warning-foreground: light-dark(#f8f7f4, #12100f);
  --warning-soft: light-dark(#eee5d7, #2d2317);
  --success: light-dark(#227445, #5fc98b);
  --success-foreground: light-dark(#f8f7f4, #12100f);
  --success-soft: light-dark(#dfe9e0, #1b261e);
  --info: light-dark(#1e5ae1, #8fb0ff);
  --info-foreground: light-dark(#f8f7f4, #12100f);
  --info-soft: light-dark(#dee5f3, #21232c);
  --chart1: light-dark(#a24a64, #db91aa);
  --chart2: light-dark(#227445, #5fc98b);
  --chart3: light-dark(#1e5ae1, #8fb0ff);
  --chart4: light-dark(#975600, #efae55);
  --chart5: light-dark(#7858a3, #b7a0dc);
  --ui-background: var(--background);
  --ui-foreground: var(--foreground);
  --ui-card: var(--card);
  --ui-card-foreground: var(--card-foreground);
  --ui-popover: var(--popover);
  --ui-popover-foreground: var(--popover-foreground);
  --ui-primary: var(--primary);
  --ui-primary-foreground: var(--primary-foreground);
  --ui-secondary: var(--secondary);
  --ui-secondary-foreground: var(--secondary-foreground);
  --ui-muted: var(--secondary);
  --ui-muted-foreground: var(--muted);
  --ui-accent: var(--accent);
  --ui-accent-foreground: var(--accent-foreground);
  --ui-destructive: var(--danger);
  --ui-destructive-foreground: var(--danger-foreground);
  --ui-destructive-soft: var(--danger-soft);
  --ui-border: var(--line);
  --ui-input: var(--control-border);
  --ui-ring: var(--focus);
  --ui-success: var(--success);
  --ui-success-foreground: var(--success-foreground);
  --ui-success-soft: var(--success-soft);
  --ui-warning: var(--warning);
  --ui-warning-foreground: var(--warning-foreground);
  --ui-warning-soft: var(--warning-soft);
  --ui-info: var(--info);
  --ui-info-foreground: var(--info-foreground);
  --ui-info-soft: var(--info-soft);
  --ui-chart-1: var(--chart1);
  --ui-chart-2: var(--chart2);
  --ui-chart-3: var(--chart3);
  --ui-chart-4: var(--chart4);
  --ui-chart-5: var(--chart5);
  --hraness-site-accent: var(--primary);
  --hraness-site-accent-ink: var(--primary-foreground);
  --plain-background: var(--background);
  --plain-foreground: var(--foreground);
  --plain-muted: var(--muted);
  --plain-line: var(--grid);
  --plain-surface: var(--secondary);
  --plain-link: var(--primary);
  --plain-syntax-keyword: var(--warning);
  --plain-syntax-string: var(--success);
  --plain-syntax-number: var(--danger);
  --plain-syntax-name: var(--info);
  --elevation-low: 0 1px 2px light-dark(rgb(33 25 18 / 8%), rgb(0 0 0 / 24%));
  --elevation-raised: 0 8px 24px -12px light-dark(rgb(33 25 18 / 22%), rgb(0 0 0 / 48%));
  --elevation-overlay: 0 18px 54px light-dark(rgb(33 25 18 / 20%), rgb(0 0 0 / 58%));
}

@media (forced-colors: active) {
  :root[data-hraness-theme="paper"]:where(:not([data-palette]), [data-palette="paper"]),
[data-hraness-theme="paper"]:where(:not([data-palette]), [data-palette="paper"]) {
    --background: Canvas;
    --foreground: CanvasText;
    --muted: CanvasText;
    --faint: CanvasText;
    --surface: Canvas;
    --surface-raised: Canvas;
    --surface-hover: Canvas;
    --card: Canvas;
    --card-foreground: CanvasText;
    --popover: Canvas;
    --popover-foreground: CanvasText;
    --secondary: Canvas;
    --secondary-foreground: CanvasText;
    --grid: CanvasText;
    --line: CanvasText;
    --control-border: ButtonText;
    --primary: Highlight;
    --primary-foreground: HighlightText;
    --plain-link: LinkText;
    --accent: Highlight;
    --accent-foreground: HighlightText;
    --focus: Highlight;
    --inverse: CanvasText;
    --inverse-foreground: Canvas;
    --disabled: Canvas;
    --disabled-foreground: GrayText;
    --elevation-low: none;
    --elevation-raised: none;
    --elevation-overlay: none;
  }
}