<% if (theme) { %>
<style>
  :root {
    --ink: <%= theme.light.text %>;
    --ink-soft: <%= theme.light.muted %>;
    --sea: <%= theme.light.accent %>;
    --sun: <%= theme.light.accentAlt %>;
    --rose: <%= theme.light.danger %>;
    --card: <%= theme.light.surface %>;
    --surface-2: <%= theme.light.surface2 %>;
    --surface-3: <%= theme.light.surface3 %>;
    --border: <%= theme.light.border %>;
    --bg-1: <%= theme.light.bg1 %>;
    --bg-2: <%= theme.light.bg2 %>;
    --bg-3: <%= theme.light.bg3 %>;
    --lumi-success: <%= theme.light.success %>;
    --lumi-warning: <%= theme.light.warning %>;
    --lumi-info: <%= theme.light.info %>;
    --lumi-link: <%= theme.light.link %>;
    --lumi-button-bg: <%= theme.light.buttonBg %>;
    --lumi-button-text: <%= theme.light.buttonText %>;
    --lumi-button-hover: <%= theme.light.buttonHover %>;
    --lumi-input-bg: <%= theme.light.inputBg %>;
    --lumi-input-border: <%= theme.light.inputBorder %>;
    --lumi-input-text: <%= theme.light.inputText %>;
    --lumi-focus: <%= theme.light.focusRing %>;
    --lumi-radius: <%= theme.metrics.radius %>px;
    --lumi-shadow-strength: <%= theme.metrics.shadowStrength %>;
    --lumi-space-scale: <%= theme.metrics.spacingScale %>;
    --lumi-font-body: <%- theme.typography.bodyFontStack %>;
    --lumi-font-display: <%- theme.typography.displayFontStack %>;
    --lumi-font-mono: <%- theme.typography.monoFontStack %>;
    --lumi-font-size-base: <%= theme.typography.baseSize %>px;
    --lumi-heading-scale: <%= theme.typography.headingScale %>;
    --lumi-control-scale: <%= theme.typography.controlScale %>;
    --role-public: <%= theme.role.public %>;
    --role-mod: <%= theme.role.mod %>;
    --role-admin: <%= theme.role.admin %>;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-color-scheme="light"]) {
      --ink: <%= theme.dark.text %>;
      --ink-soft: <%= theme.dark.muted %>;
      --sea: <%= theme.dark.accent %>;
      --sun: <%= theme.dark.accentAlt %>;
      --rose: <%= theme.dark.danger %>;
      --card: <%= theme.dark.surface %>;
      --surface-2: <%= theme.dark.surface2 %>;
      --surface-3: <%= theme.dark.surface3 %>;
      --border: <%= theme.dark.border %>;
      --bg-1: <%= theme.dark.bg1 %>;
      --bg-2: <%= theme.dark.bg2 %>;
      --bg-3: <%= theme.dark.bg3 %>;
      --lumi-success: <%= theme.dark.success %>;
      --lumi-warning: <%= theme.dark.warning %>;
      --lumi-info: <%= theme.dark.info %>;
      --lumi-link: <%= theme.dark.link %>;
      --lumi-button-bg: <%= theme.dark.buttonBg %>;
      --lumi-button-text: <%= theme.dark.buttonText %>;
      --lumi-button-hover: <%= theme.dark.buttonHover %>;
      --lumi-input-bg: <%= theme.dark.inputBg %>;
      --lumi-input-border: <%= theme.dark.inputBorder %>;
      --lumi-input-text: <%= theme.dark.inputText %>;
      --lumi-focus: <%= theme.dark.focusRing %>;
    }
  }
  :root[data-color-scheme="dark"] {
    color-scheme: dark;
    --ink: <%= theme.dark.text %>;
    --ink-soft: <%= theme.dark.muted %>;
    --sea: <%= theme.dark.accent %>;
    --sun: <%= theme.dark.accentAlt %>;
    --rose: <%= theme.dark.danger %>;
    --card: <%= theme.dark.surface %>;
    --surface-2: <%= theme.dark.surface2 %>;
    --surface-3: <%= theme.dark.surface3 %>;
    --border: <%= theme.dark.border %>;
    --bg-1: <%= theme.dark.bg1 %>;
    --bg-2: <%= theme.dark.bg2 %>;
    --bg-3: <%= theme.dark.bg3 %>;
    --lumi-success: <%= theme.dark.success %>;
    --lumi-warning: <%= theme.dark.warning %>;
    --lumi-info: <%= theme.dark.info %>;
    --lumi-link: <%= theme.dark.link %>;
    --lumi-button-bg: <%= theme.dark.buttonBg %>;
    --lumi-button-text: <%= theme.dark.buttonText %>;
    --lumi-button-hover: <%= theme.dark.buttonHover %>;
    --lumi-input-bg: <%= theme.dark.inputBg %>;
    --lumi-input-border: <%= theme.dark.inputBorder %>;
    --lumi-input-text: <%= theme.dark.inputText %>;
    --lumi-focus: <%= theme.dark.focusRing %>;
  }
  :root[data-color-scheme="light"] {
    color-scheme: light;
  }
</style>
<% } %>
