// @bun
var e=`/* ============================================
   THEME BASE - Shared utilities for all themes
   ============================================
   This file contains CSS that is IDENTICAL across all themes.
   Individual themes only need to define:
   - Font imports
   - :root palette variables (unique colors)
   - :root semantic variable mappings
   - [data-theme="dark"] overrides
   - Typography styles (heading weights, letter-spacing)
   - Nav/header/logo/toggle light-dark behavior
   - Hero/CTA background patterns
   - Prose dark mode overrides
   - Theme-specific decorative elements

   Layer ordering: theme-base < theme-override
   Base utilities come first; theme-specific styles override.
   ============================================ */

/* Declare layer order \u2014 guarantees cascade regardless of concat order */
@layer theme-base, theme-override;

/* Custom variant: \`light:*\` utilities apply when [data-theme="light"]
   is set on any ancestor (typically <html>). Dark mode is the
   default so there's no matching \`dark:\` variant. */
@custom-variant light ([data-theme="light"] &);

/* ============================================
   @theme inline - Expose CSS variables to Tailwind
   Uses @theme inline for RUNTIME CSS variable resolution.
   The "inline" keyword is essential for dark mode / multi-site theming.
   ============================================ */
@theme inline {
  /* Layout */
  --max-width-layout: var(--layout-max-width);

  /* Brand colors - same color for bg/text/border */
  --color-brand: var(--color-brand);
  --color-brand-dark: var(--color-brand-dark);
  --color-brand-light: var(--color-brand-light);
  --color-accent: var(--color-accent);
  --color-accent-dark: var(--color-accent-dark);

  /* Selection colors */
  --color-selection: var(--color-selection);

  /* Rule colors \u2014 subtle hairlines for dividers, entry borders, footer top */
  --color-rule: var(--color-rule);
  --color-rule-strong: var(--color-rule-strong);

  /* Monospace font \u2014 used by ui-library widgets, code blocks, etc.
     Defined by every theme (or left empty for ranger). Brand-specific
     fonts (\`font-display\`, \`font-body\`, \`font-label\`, \`font-nav\`)
     and the typography scale live in the brand theme that uses them
     so non-brand themes don't ship broken utilities. */
  --font-sans: var(--font-sans);
  --font-heading: var(--font-heading);
  --font-mono: var(--font-mono);

  /* Typography scale \u2014 each entry bundles font-size + line-height +
     letter-spacing via Tailwind v4's --text-name--line-height /
     --text-name--letter-spacing modifiers, so a single utility (e.g.
     \`text-display-lg\`) replaces three (\`text-[clamp(...)]
     leading-[1.1] tracking-[-1px]\`). Themes set the actual values
     in their :root block. */

  /* Display \u2014 fluid headlines */
  --text-display-2xl: var(--text-display-2xl);
  --text-display-2xl--line-height: 0.9;
  --text-display-2xl--letter-spacing: -2px;

  --text-display-xl: var(--text-display-xl);
  --text-display-xl--line-height: 0.95;
  --text-display-xl--letter-spacing: -3px;

  --text-display-lg: var(--text-display-lg);
  --text-display-lg--line-height: 1.1;
  --text-display-lg--letter-spacing: -1px;

  --text-display-md: var(--text-display-md);
  --text-display-md--line-height: 1.1;
  --text-display-md--letter-spacing: -1px;

  --text-display-sm: var(--text-display-sm);
  --text-display-sm--line-height: 1.2;
  --text-display-sm--letter-spacing: -0.5px;

  /* Heading \u2014 subsection labels. Deliberately NO bundled line-height:
     in the rizom mock these elements (eco-title, feature-title,
     problem-title) inherit the body's 1.6 line-height. They're
     emphasized labels, not display headings. Sites that want a tight
     leading override per use site with \`leading-tight\` etc. */
  --text-heading-lg: var(--text-heading-lg);
  --text-heading-md: var(--text-heading-md);
  --text-heading-sm: var(--text-heading-sm);

  /* Body \u2014 paragraphs */
  --text-body-xl: var(--text-body-xl);
  --text-body-xl--line-height: 1.7;
  --text-body-lg: var(--text-body-lg);
  --text-body-lg--line-height: 1.7;
  --text-body-md: var(--text-body-md);
  --text-body-md--line-height: 1.8;
  --text-body-sm: var(--text-body-sm);
  --text-body-sm--line-height: 1.7;
  --text-body-xs: var(--text-body-xs);
  --text-body-xs--line-height: 1.7;

  /* Label \u2014 small uppercase text. Letter-spacing is applied per-use
     (different label kinds have very different tracking). */
  --text-label-md: var(--text-label-md);
  --text-label-sm: var(--text-label-sm);
  --text-label-xs: var(--text-label-xs);

  /* Section spacing \u2014 single fluid token, drives \`py-section\`,
     \`pt-section\`, \`pb-section\`, \`gap-section\`, etc. */
  --spacing-section: var(--spacing-section);

  /* Footer */
  --color-footer: var(--color-footer);
  --color-footer-text: var(--color-footer-text);

  /* Gradient colors */
  --color-gradient-start: var(--color-gradient-start);
  --color-gradient-end: var(--color-gradient-end);

  /* Pattern colors */
  --color-pattern-dot: var(--color-pattern-dot);

  /* Prose/Typography colors - for @tailwindcss/typography plugin */
  --tw-prose-body: var(--color-text);
  --tw-prose-headings: var(--color-heading);
  --tw-prose-links: var(--color-brand);
  --tw-prose-bold: var(--color-text);
  --tw-prose-code: var(--color-text);
  --tw-prose-quotes: var(--color-text-muted);
  --tw-prose-counters: var(--color-text-muted);
  --tw-prose-bullets: var(--color-text-muted);
}

/* ============================================
   Core theme utilities
   These CAN'T be auto-generated by @theme inline because
   different utilities need different variables.
   e.g. bg-theme uses --color-bg, text-theme uses --color-text
   ============================================ */
@layer theme-base {
  /* Theme utilities - bg uses --color-bg, text uses --color-text */
  .bg-theme { background-color: var(--color-bg); }
  .bg-theme-subtle { background-color: var(--color-bg-subtle); }
  .bg-theme-muted { background-color: var(--color-bg-muted); }
  .bg-theme-dark { background-color: var(--color-bg-dark); }
  .bg-surface { background-color: var(--color-bg-subtle); }
  .text-theme { color: var(--color-text); }
  .text-theme-muted { color: var(--color-text-muted); }
  .text-theme-light { color: var(--color-text-light); }
  .text-theme-inverse { color: var(--color-text-inverse); }
  .text-theme-on-dark { color: var(--color-text-on-dark, var(--color-text-inverse)); }
  .text-heading { color: var(--color-heading); }
  .text-selection { color: var(--color-selection); }
  .border-theme { border-color: var(--color-border); }
  .border-theme-light { border-color: var(--color-border-light); }
  .placeholder-theme-muted::placeholder { color: var(--color-text-muted); }

  /* Status badge utilities */
  .bg-status-neutral { background-color: var(--color-status-neutral-bg); }
  .text-status-neutral { color: var(--color-status-neutral-text); }
  .bg-status-info { background-color: var(--color-status-info-bg); }
  .text-status-info { color: var(--color-status-info-text); }
  .bg-status-success { background-color: var(--color-status-success-bg); }
  .text-status-success { color: var(--color-status-success-text); }
  .bg-status-danger { background-color: var(--color-status-danger-bg); }
  .text-status-danger { color: var(--color-status-danger-text); }
  .bg-status-warning { background-color: var(--color-status-warning-bg); }
  .text-status-warning { color: var(--color-status-warning-text); }

  /* Hover states for theme utilities */
  .hover\\:bg-theme-subtle:hover { background-color: var(--color-bg-subtle); }
  .hover\\:bg-brand:hover { background-color: var(--color-brand); }
  .hover\\:bg-brand-dark:hover { background-color: var(--color-brand-dark); }

  /* Complete gradient background - uses full gradient value, not single color */
  .bg-theme-gradient { background: var(--color-bg-gradient); }

  /* Footer text color override */
  .bg-footer .text-theme-inverse {
    color: var(--color-footer-text);
  }

  /* Text selection highlighting */
  ::selection {
    background-color: var(--color-selection-bg);
    color: var(--color-selection-text);
  }

  /* Sticky-footer hygiene for site layouts that use flex-grow mains. */
  body {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
  }

  /* Reusable editorial decoration hooks. Themes provide colors through
     semantic tokens; these classes only define layering and gradients. */
  .hero-decor,
  .cta-decor {
    position: relative;
    overflow: hidden;
    isolation: isolate;
  }

  .hero-decor > *,
  .cta-decor > * {
    position: relative;
    z-index: 1;
  }

  .hero-decor::before,
  .hero-decor::after,
  .cta-decor::before,
  .cta-decor::after {
    content: "";
    position: absolute;
    pointer-events: none;
    z-index: 0;
  }

  .hero-decor::before {
    inset: -30% -20% auto;
    height: 120%;
    background:
      radial-gradient(circle at 50% 20%, rgb(from var(--color-accent) r g b / 0.5), transparent 28%),
      radial-gradient(circle at 68% 38%, rgb(from var(--color-brand-dark) r g b / 0.35), transparent 36%);
    filter: blur(8px);
  }

  .hero-decor::after,
  .cta-decor::before {
    inset: 0;
    opacity: 0.12;
    mix-blend-mode: soft-light;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.65'/%3E%3C/svg%3E");
  }

  .cta-decor::after {
    width: min(48rem, 70vw);
    aspect-ratio: 1;
    right: -18rem;
    bottom: -28rem;
    border-radius: 9999px;
    background: radial-gradient(circle, rgb(from var(--color-brand) r g b / 0.42), transparent 66%);
    filter: blur(6px);
  }

  .pulse-sparkle {
    animation: hero-pulse 2.8s ease-in-out infinite;
  }

  @keyframes hero-pulse {
    0%, 100% {
      opacity: 0.55;
      transform: scale(1);
      box-shadow: 0 0 0 0 rgb(from var(--color-accent) r g b / 0.28);
    }
    50% {
      opacity: 1;
      transform: scale(1.18);
      box-shadow: 0 0 0 10px rgb(from var(--color-accent) r g b / 0);
    }
  }
}

/* ============================================
   Gradient utilities - Tailwind v4 format
   ============================================ */
@layer theme-base {
  .from-gradient-start {
    --tw-gradient-from: var(--color-gradient-start);
    --tw-gradient-to: rgb(from var(--color-gradient-start) r g b / 0);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  }
  .to-gradient-end {
    --tw-gradient-to: var(--color-gradient-end);
  }
  .from-accent {
    --tw-gradient-from: var(--color-accent);
    --tw-gradient-to: rgb(from var(--color-accent) r g b / 0);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  }
  .to-accent-dark {
    --tw-gradient-to: var(--color-accent-dark);
  }
  .from-brand-dark {
    --tw-gradient-from: var(--color-brand-dark);
    --tw-gradient-to: rgb(from var(--color-brand-dark) r g b / 0);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  }
  .from-brand-light {
    --tw-gradient-from: var(--color-brand-light);
    --tw-gradient-to: rgb(from var(--color-brand-light) r g b / 0);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  }
  .to-brand {
    --tw-gradient-to: var(--color-brand);
  }
  .to-theme {
    --tw-gradient-to: var(--color-bg);
  }
}

/* ============================================
   Status colors (warning / success / danger / info) \u2014 SHARED across
   themes. These are universal UI signals (not brand colors) so they
   live here and every theme inherits them. A theme can still override
   individual --color-warning-* values if it wants brand-flavored
   variants, but the sensible defaults are right here.
   ============================================ */
:root {
  --palette-warning:               #CA8A04;  /* base yellow (dark mode bg/border) */
  --palette-warning-text:          #FDE047;  /* dark-mode text */
  --palette-warning-text-emphasis: #FEF08A;  /* dark-mode heavy text */
  --palette-warning-bg-light:      #FEFCE8;  /* light-mode bg */
  --palette-warning-border-light:  #FDE047;  /* light-mode border */
  --palette-warning-text-light:    #854D0E;  /* light-mode text */
  --palette-warning-text-emphasis-light: #92400E;

  /* Dark-mode defaults */
  --color-warning-bg:             rgb(from var(--palette-warning) r g b / 0.2);
  --color-warning-border:         rgb(from var(--palette-warning) r g b / 0.5);
  --color-warning-text:           var(--palette-warning-text);
  --color-warning-text-emphasis:  var(--palette-warning-text-emphasis);
}

[data-theme="light"] {
  --color-warning-bg:             var(--palette-warning-bg-light);
  --color-warning-border:         var(--palette-warning-border-light);
  --color-warning-text:           var(--palette-warning-text-light);
  --color-warning-text-emphasis:  var(--palette-warning-text-emphasis-light);
}

@layer theme-base {
  .bg-warning             { background-color: var(--color-warning-bg); }
  .border-warning         { border-color: var(--color-warning-border); }
  .text-warning           { color: var(--color-warning-text); }
  .text-warning-emphasis  { color: var(--color-warning-text-emphasis); }
}

/* ============================================
   Theme toggle icon visibility
   ============================================ */
@layer theme-base {
  [data-theme="dark"] .sun-icon {
    display: none;
  }
  [data-theme="dark"] .moon-icon {
    display: block;
  }
  [data-theme="light"] .sun-icon {
    display: block;
  }
  [data-theme="light"] .moon-icon {
    display: none;
  }
}
`;function o(t){return e+`

`+t}export{o as composeTheme};

//# debugId=11AD1BC3215EB2DC64756E2164756E21
//# sourceMappingURL=themes.js.map
