/* Generated by marketing:generate from canonical Regel tokens. Do not edit. */
/* Shared REGEL font assets: complete consumers do not need application-owned font setup. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("./fonts/InterVariable.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("./fonts/InterVariable-Italic.woff2") format("woff2");
}
@font-face {
  font-family: "Inter Tight";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("./fonts/InterTight-VariableFont_wght.woff2") format("woff2");
}
@font-face {
  font-family: "Inter Tight";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("./fonts/InterTight-Italic-VariableFont_wght.woff2") format("woff2");
}


/* Font roles imported from the approved REGEL typography trial. */
:root { --regel-font-body: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --regel-font-heading: "Inter Tight", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif; }
:root body { --font-sans: var(--regel-font-body); font-family: var(--regel-font-body); }
:root :is(h1,h2,h3,h4,h5,h6,.regel-type-display-lg,.regel-type-display-md,.regel-type-display-sm,.regel-type-heading-lg,.regel-type-heading-md,.regel-type-heading-sm,.regel-type-heading-xs,.web-type-hero,.web-type-h1,.web-type-h2,.web-type-h3,.web-type-h4,.web-type-h5,.web-type-h6,.web-type-card-title,.prototype-header-brand,.prototype-footer-brand,.svea-partnership-brand) { font-family: var(--regel-font-heading); }
:root :is(.regel-type-body-lg,.regel-type-body-md,.regel-type-body-sm,.regel-type-label-lg,.regel-type-label-md,.regel-type-label-sm,.web-type-body-lg,.web-type-body,.web-type-body-sm,.web-type-label-lg,.web-type-label,.web-type-label-sm,.web-type-caption,.web-type-lead,.web-type-eyebrow,button,input,select,textarea,label) { font-family: var(--regel-font-body); }
/* REGEL branded theme, available to every consumer of the shared UI stylesheet. */
:root:has([data-regel-theme="brand"]) {
  --white: #ffffff;
  --black: #171717;
  --neutral-50: #fafafa;
  --neutral-100: #f5f5f5;
  --neutral-200: #e5e5e5;
  --neutral-300: #d4d4d4;
  --neutral-400: #a1a1a1;
  --neutral-500: #737373;
  --neutral-600: #525252;
  --neutral-700: #404040;
  --neutral-800: #262626;
  --neutral-900: #171717;
  --neutral-950: #0a0a0a;
  --blue-50: rgb(47 91 235 / 8%);
  --blue-100: rgb(47 91 235 / 12%);
  --blue-200: rgb(47 91 235 / 18%);
  --blue-300: rgb(47 91 235 / 28%);
  --blue-400: #1c6fee;
  --blue-500: #2f5beb;
  --blue-600: #2449c4;
  --blue-700: #1d3a9d;
  --blue-800: #172f7f;
  --blue-900: #132764;
  --blue-950: #0d1b48;
  --green-50: rgb(0 201 80 / 16%);
  --green-100: rgb(0 201 80 / 20%);
  --green-200: rgb(0 201 80 / 24%);
  --green-300: #66d693;
  --green-400: #00c950;
  --green-500: #00c950;
  --green-600: #00a63e;
  --green-700: #008236;
  --green-800: #016630;
  --green-900: #0d542b;
  --green-950: #052e16;
  --red-50: rgb(251 44 54 / 16%);
  --red-100: rgb(251 44 54 / 20%);
  --red-200: rgb(251 44 54 / 28%);
  --red-300: #f27e8b;
  --red-400: #fb2c36;
  --red-500: #fb2c36;
  --red-600: #e7000b;
  --red-700: #c10007;
  --red-800: #9f0712;
  --red-900: #82181a;
  --red-950: #460809;
  --orange-50: rgb(240 177 0 / 20%);
  --orange-100: rgb(240 177 0 / 24%);
  --orange-200: rgb(240 177 0 / 32%);
  --orange-300: #f3b55d;
  --orange-400: #f0b100;
  --orange-500: #f0b100;
  --orange-600: #d08700;
  --orange-700: #a65f00;
  --orange-800: #894b00;
  --orange-900: #733e0a;
  --orange-950: #432004;
  --bg-base: #ffffff;
  --bg-subtle: #f5f5f5;
  --bg-overlay: #eeeeee;
  --bg-inverse: #171717;
  --surface-default: #ffffff;
  --surface-sunken: #f5f5f5;
  --surface-sunken-hover: #eeeeee;
  --surface-raised: #ffffff;
  --surface-overlay: #ffffff;
  --border-default: #e5e5e5;
  --border-strong: #a1a1a1;
  --border-focus: #171717;
  --border-error: #fb2c36;
  --border-inverse: #404040;
  --text-primary: #171717;
  --text-secondary: #666666;
  --text-tertiary: #a1a1a1;
  --text-disabled: #a1a1a1;
  --text-inverse: #ffffff;
  --text-link: #2f5beb;
  --text-link-hover: #2449c4;
  --text-error: #c10007;
  --text-success: #006d2c;
  --text-warning: #8a4b00;
  --interactive-default: #171717;
  --interactive-hover: #404040;
  --interactive-active: #262626;
  --interactive-subtle: #f5f5f5;
  --interactive-subtle-hover: #eeeeee;
  --interactive-disabled: #e5e5e5;
  --interactive-disabled-text: #a1a1a1;
  --success-bg: rgb(0 201 80 / 16%);
  --success-border: rgb(0 201 80 / 24%);
  --success-text: #006d2c;
  --success-icon: #00c950;
  --error-bg: rgb(251 44 54 / 16%);
  --error-border: rgb(251 44 54 / 28%);
  --error-text: #c10007;
  --error-icon: #fb2c36;
  --warning-bg: rgb(240 177 0 / 20%);
  --warning-border: rgb(240 177 0 / 32%);
  --warning-text: #8a4b00;
  --warning-icon: #f0b100;
  --info-bg: rgb(47 91 235 / 8%);
  --info-border: rgb(47 91 235 / 22%);
  --info-text: #2f5beb;
  --info-icon: #2f5beb;
  --background: #ffffff;
  --foreground: #171717;
  --card: #ffffff;
  --card-foreground: #171717;
  --popover: #ffffff;
  --popover-foreground: #171717;
  --primary: #171717;
  --primary-foreground: #ffffff;
  --secondary: #f5f5f5;
  --secondary-foreground: #171717;
  --muted: #f5f5f5;
  --muted-hover: #eeeeee;
  --muted-foreground: #666666;
  --accent: #f5f5f5;
  --accent-foreground: #171717;
  --destructive: #fb2c36;
  --destructive-foreground: #ffffff;
  --border: #e5e5e5;
  --input: #e5e5e5;
  --ring: #171717;
  --radius: 1rem;
  --toast-shadow: 0 1px 2px rgb(0 0 0 / 4%), 0 4px 16px rgb(0 0 0 / 5.5%);
}

:root {
  /* Generated from the canonical branded token scope. */
  --regel-text-primary: #171717;
  --regel-text-secondary: #666666;
  --regel-text-inverse: #ffffff;
  --regel-text-disabled: #a1a1a1;
  --regel-surface: #ffffff;
  --regel-surface-subtle: #f5f5f5;
  --regel-surface-subtle-hover: #eeeeee;
  --regel-border: #e5e5e5;
  --regel-border-strong: #a1a1a1;
  --regel-primary-hover: #404040;
  --regel-primary-pressed: #262626;
  --regel-action: #2f5beb;
  --regel-action-hover: #2449c4;
  --regel-button-outline-hover-border: #d4d4d4;
  --regel-button-pressed-overlay: rgba(23, 23, 23, 0.1);
  --regel-button-active-filter: brightness(0.96);
  --regel-nav-active: #e8e8e8;
  --regel-nav-active-hover: #dedede;
  --regel-nav-item-height: 36px;
  --regel-nav-item-radius: 8px;
  --regel-nav-item-padding: 12px;
  --regel-shadow-md: 0 1px 2px rgb(0 0 0 / 5%), 0 4px 16px rgb(0 0 0 / 5.5%);
  --regel-space-1: 4px;
  --regel-space-2: 8px;
  --regel-space-3: 12px;
  --regel-space-4: 16px;
  --regel-space-5: 20px;
  --regel-space-6: 24px;
  --regel-space-8: 32px;
  --regel-button-height-small: 32px;
  --regel-button-height-default: 36px;
  --regel-button-height-large: 40px;
  --regel-button-height-xl: 48px;
  --regel-button-radius: 9999px;
  --regel-button-padding-small: 16px;
  --regel-button-padding-default: 20px;
  --regel-button-padding-large: 24px;
  --regel-button-padding-xl: 32px;
  --regel-button-icon-size: 16px;
  --regel-button-type-small-size: 12px;
  --regel-button-type-small-line: 16px;
  --regel-button-type-default-size: 14px;
  --regel-button-type-default-line: 20px;
  --regel-button-type-large-size: 16px;
  --regel-button-type-large-line: 22px;
  --regel-button-type-weight: 500;
  --regel-field-height: 36px;
  --regel-field-radius: 12px;
  --regel-field-focus-opacity: 8%;
  --regel-field-padding-inline: var(--regel-space-4);
  --regel-learn-more-height: 21px;
  --regel-link-underline-offset: 3px;
  --regel-display-lg-size: 64px;
  --regel-display-lg-line: 64px;
  --regel-display-lg-tracking: -1px;
  --regel-display-md-size: 48px;
  --regel-display-md-line: 50px;
  --regel-display-md-tracking: -0.5px;
  --regel-display-sm-size: 40px;
  --regel-display-sm-line: 44px;
  --regel-display-sm-tracking: -0.3px;
  --regel-heading-lg-size: 32px;
  --regel-heading-lg-line: 38px;
  --regel-heading-lg-tracking: -0.3px;
  --regel-heading-md-size: 24px;
  --regel-heading-md-line: 30px;
  --regel-heading-md-tracking: -0.2px;
  --regel-heading-sm-size: 20px;
  --regel-heading-sm-line: 24px;
  --regel-heading-sm-tracking: -0.1px;
  --regel-heading-xs-size: 16px;
  --regel-heading-xs-line: 22px;
  --regel-heading-xs-tracking: 0px;
  --regel-body-lg-size: 16px;
  --regel-body-lg-line: 24px;
  --regel-body-lg-tracking: 0px;
  --regel-body-md-size: 14px;
  --regel-body-md-line: 22px;
  --regel-body-md-tracking: 0px;
  --regel-body-sm-size: 12px;
  --regel-body-sm-line: 18px;
  --regel-body-sm-tracking: 0.12px;
  --regel-label-lg-size: 16px;
  --regel-label-lg-line: 24px;
  --regel-label-lg-tracking: 0px;
  --regel-label-md-size: 14px;
  --regel-label-md-line: 22px;
  --regel-label-md-tracking: 0px;
  --regel-label-sm-size: 12px;
  --regel-label-sm-line: 18px;
  --regel-label-sm-tracking: 0.12px;
  --regel-caption-size: 12px;
  --regel-caption-line: 16px;
  --regel-caption-tracking: 0.2px;
  --regel-subtitle-size: 20px;
  --regel-subtitle-line: 28px;
  --regel-subtitle-tracking: 0px;
  --regel-overline-size: 12px;
  --regel-overline-line: 16px;
  --regel-overline-tracking: 0.2px;
  --regel-code-size: 12px;
  --regel-code-line: 20px;
  --regel-code-tracking: 0px;
  --regel-type-display-weight: 500;
  --regel-type-heading-weight: 600;
  --regel-type-body-weight: 400;
  --regel-type-label-weight: 500;
  --regel-type-caption-weight: 400;
  --regel-type-subtitle-weight: 400;
  --regel-type-overline-weight: 500;
  --regel-type-code-weight: 400;
  --regel-card-padding: 24px;
  --regel-card-radius: 16px;
  --regel-card-border: #f5f5f5;
  --regel-card-shadow: 0 1px 3px rgb(0 0 0 / 8%);
  --regel-text-hover-overlay: rgb(23 23 23 / 6%);
  --regel-skeleton-line-height: 16px;
  --regel-motion-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --regel-button-type-small-tracking: 0.12px;
  --regel-button-type-default-tracking: 0px;
  --regel-button-type-large-tracking: 0px;
}

/* Website names alias REGEL values. HTML element choice stays semantic. */
:root :is(.regel-type-display-lg, .web-type-h1) {
  font-size: var(--regel-display-lg-size);
  line-height: var(--regel-display-lg-line);
  letter-spacing: var(--regel-display-lg-tracking);
  font-weight: var(--regel-type-display-weight);
}

:root :is(.regel-type-display-md, .web-type-h2) {
  font-size: var(--regel-display-md-size);
  line-height: var(--regel-display-md-line);
  letter-spacing: var(--regel-display-md-tracking);
  font-weight: var(--regel-type-display-weight);
}

:root :is(.regel-type-display-sm, .web-type-h3) {
  font-size: var(--regel-display-sm-size);
  line-height: var(--regel-display-sm-line);
  letter-spacing: var(--regel-display-sm-tracking);
  font-weight: var(--regel-type-display-weight);
}

:root :is(.regel-type-heading-lg, .web-type-h4) {
  font-size: var(--regel-heading-lg-size);
  line-height: var(--regel-heading-lg-line);
  letter-spacing: var(--regel-heading-lg-tracking);
  font-weight: var(--regel-type-heading-weight);
}

:root :is(.regel-type-heading-md, .web-type-h5) {
  font-size: var(--regel-heading-md-size);
  line-height: var(--regel-heading-md-line);
  letter-spacing: var(--regel-heading-md-tracking);
  font-weight: var(--regel-type-heading-weight);
}

:root :is(.regel-type-heading-sm, .web-type-h6) {
  font-size: var(--regel-heading-sm-size);
  line-height: var(--regel-heading-sm-line);
  letter-spacing: var(--regel-heading-sm-tracking);
  font-weight: var(--regel-type-heading-weight);
}

:root :is(.regel-type-heading-xs, .web-type-card-title) {
  font-size: var(--regel-heading-xs-size);
  line-height: var(--regel-heading-xs-line);
  letter-spacing: var(--regel-heading-xs-tracking);
  font-weight: var(--regel-type-heading-weight);
}

:root :is(.regel-type-body-lg, .web-type-body-lg) {
  font-size: var(--regel-body-lg-size);
  line-height: var(--regel-body-lg-line);
  letter-spacing: var(--regel-body-lg-tracking);
  font-weight: var(--regel-type-body-weight);
}

:root :is(.regel-type-body-md, .web-type-body) {
  font-size: var(--regel-body-md-size);
  line-height: var(--regel-body-md-line);
  letter-spacing: var(--regel-body-md-tracking);
  font-weight: var(--regel-type-body-weight);
}

:root :is(.regel-type-body-sm, .web-type-body-sm) {
  font-size: var(--regel-body-sm-size);
  line-height: var(--regel-body-sm-line);
  letter-spacing: var(--regel-body-sm-tracking);
  font-weight: var(--regel-type-body-weight);
}

:root :is(.regel-type-label-lg, .web-type-label-lg) {
  font-size: var(--regel-label-lg-size);
  line-height: var(--regel-label-lg-line);
  letter-spacing: var(--regel-label-lg-tracking);
  font-weight: var(--regel-type-label-weight);
}

:root :is(.regel-type-label-md, .web-type-label) {
  font-size: var(--regel-label-md-size);
  line-height: var(--regel-label-md-line);
  letter-spacing: var(--regel-label-md-tracking);
  font-weight: var(--regel-type-label-weight);
}

:root :is(.regel-type-label-sm, .web-type-label-sm) {
  font-size: var(--regel-label-sm-size);
  line-height: var(--regel-label-sm-line);
  letter-spacing: var(--regel-label-sm-tracking);
  font-weight: var(--regel-type-label-weight);
}

/* Website composition for large headlines; the fixed H1 role remains Display Lg. */
:root .web-type-hero {
  font-size: var(--regel-display-sm-size);
  line-height: var(--regel-display-sm-line);
  letter-spacing: var(--regel-display-sm-tracking);
  font-weight: var(--regel-type-display-weight);
}

@media (min-width: 768px) {
  :root .web-type-hero {
    font-size: var(--regel-display-lg-size);
    line-height: var(--regel-display-lg-line);
    letter-spacing: var(--regel-display-lg-tracking);
    font-weight: var(--regel-type-display-weight);
  }
}

:root .web-type-caption {
  font-size: var(--regel-caption-size);
  line-height: var(--regel-caption-line);
  letter-spacing: var(--regel-caption-tracking);
  font-weight: var(--regel-type-caption-weight);
}

:root .web-type-lead {
  font-size: var(--regel-subtitle-size);
  line-height: var(--regel-subtitle-line);
  letter-spacing: var(--regel-subtitle-tracking);
  font-weight: var(--regel-type-subtitle-weight);
}

:root .web-type-eyebrow {
  font-size: var(--regel-overline-size);
  line-height: var(--regel-overline-line);
  letter-spacing: var(--regel-overline-tracking);
  font-weight: var(--regel-type-overline-weight);
  text-transform: none;
}

:root .web-type-code {
  font-family: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  font-size: var(--regel-code-size);
  line-height: var(--regel-code-line);
  letter-spacing: var(--regel-code-tracking);
  font-weight: var(--regel-type-code-weight);
}

/* REGEL field contract for website forms. */
:root .regel-text-field {
  width: 100%;
  min-width: 0;
  height: var(--regel-field-height);
  padding: 0 var(--regel-field-padding-inline);
  border: 1px solid var(--border-default);
  border-radius: var(--regel-field-radius);
  background: var(--surface-default);
  color: var(--text-primary);
  font-family: inherit;
  font-size: var(--regel-body-md-size);
  line-height: var(--regel-body-md-line);
  letter-spacing: var(--regel-body-md-tracking);
  font-weight: var(--regel-type-body-weight);
  outline: none;
}

:root .regel-text-field::placeholder {
  opacity: 1;
  color: var(--text-tertiary);
}

:root .regel-text-field:hover:not(:disabled) {
  border-color: var(--border-strong);
}

:root .regel-text-field:focus {
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px
    color-mix(in srgb, var(--text-primary) var(--regel-field-focus-opacity), transparent);
}

:root .regel-text-field[aria-invalid="true"] {
  border-color: var(--text-error);
}

:root .regel-text-field:disabled {
  background: var(--surface-sunken);
  color: var(--text-disabled);
  cursor: not-allowed;
}

:root .regel-button {
  --regel-button-current-padding: var(--regel-button-padding-default);
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  gap: var(--regel-space-2);
  height: var(--regel-button-height-default);
  padding: 0 var(--regel-button-padding-default);
  border: 1px solid transparent;
  border-radius: var(--regel-button-radius);
  color: var(--regel-text-inverse);
  background: var(--regel-text-primary);
  font-family: var(--font-sans), "Inter Tight", sans-serif;
  font-size: var(--regel-button-type-default-size);
  line-height: var(--regel-button-type-default-line);
  font-weight: var(--regel-button-type-weight);
  letter-spacing: var(--regel-button-type-default-tracking);
  white-space: nowrap;
  transition:
    background-color 180ms cubic-bezier(0.2, 0.8, 0.2, 1),
    border-color 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

:root .regel-button svg {
  width: var(--regel-button-icon-size);
  height: var(--regel-button-icon-size);
  flex: 0 0 var(--regel-button-icon-size);
}

:root .regel-button[data-regel-size="small"] {
  --regel-button-current-padding: var(--regel-button-padding-small);
  height: var(--regel-button-height-small);
  padding-inline: var(--regel-button-padding-small);
  font-size: var(--regel-button-type-small-size);
  line-height: var(--regel-button-type-small-line);
  letter-spacing: var(--regel-button-type-small-tracking);
}

:root .regel-button[data-regel-size="large"] {
  --regel-button-current-padding: var(--regel-button-padding-large);
  height: var(--regel-button-height-large);
  padding-inline: var(--regel-button-padding-large);
  font-size: var(--regel-button-type-large-size);
  line-height: var(--regel-button-type-large-line);
  letter-spacing: var(--regel-button-type-large-tracking);
}

:root .regel-button[data-regel-size="xl"] {
  --regel-button-current-padding: var(--regel-button-padding-xl);
  height: var(--regel-button-height-xl);
  padding-inline: var(--regel-button-padding-xl);
  font-size: var(--regel-button-type-large-size);
  line-height: var(--regel-button-type-large-line);
  letter-spacing: var(--regel-button-type-large-tracking);
}

:root .regel-button[data-regel-icon-only="true"] {
  width: var(--regel-button-height-default);
  min-width: var(--regel-button-height-default);
  padding: 0;
}

:root .regel-button[data-regel-icon-only="true"][data-regel-size="small"] {
  width: var(--regel-button-height-small);
  min-width: var(--regel-button-height-small);
}

:root .regel-button[data-regel-icon-only="true"][data-regel-size="large"] {
  width: var(--regel-button-height-large);
  min-width: var(--regel-button-height-large);
}

:root .regel-button[data-regel-icon-only="true"][data-regel-size="xl"] {
  width: var(--regel-button-height-xl);
  min-width: var(--regel-button-height-xl);
}

/* REGEL optical inset: keep the selected size, subtract 4px on icon sides. */
:root
.regel-button[data-regel-icon-position]:not(
  [data-regel-icon-only="true"],
  [data-regel-variant="learn-more"]
) {
  padding-inline: var(--regel-button-current-padding);
}

:root
  .regel-button:is([data-regel-icon-position="start"], [data-regel-icon-position="both"]):not(
    [data-regel-icon-only="true"],
    [data-regel-variant="learn-more"]
  ) {
  padding-inline-start: calc(var(--regel-button-current-padding) - var(--regel-space-1));
}

:root
  .regel-button:is([data-regel-icon-position="end"], [data-regel-icon-position="both"]):not(
    [data-regel-icon-only="true"],
    [data-regel-variant="learn-more"]
  ) {
  padding-inline-end: calc(var(--regel-button-current-padding) - var(--regel-space-1));
}

:root .regel-button[data-regel-variant="primary"]:is(:hover, [data-regel-preview-state="hover"]) {
  background: var(--regel-primary-hover);
}

:root
  .regel-button[data-regel-variant="primary"]:is(:active, [data-regel-preview-state="pressed"]) {
  background: var(--regel-primary-pressed);
}

:root .regel-button[data-regel-variant="action"] {
  background: var(--regel-action);
}

:root .regel-button[data-regel-variant="action"]:is(:hover, [data-regel-preview-state="hover"]) {
  background: var(--regel-action-hover);
}

:root .regel-button[data-regel-variant="action"]:is(:active, [data-regel-preview-state="pressed"]) {
  filter: var(--regel-button-active-filter);
}

:root .regel-button[data-regel-variant="secondary"] {
  color: var(--regel-text-primary);
  background: var(--regel-surface-subtle);
}

:root .regel-button[data-regel-variant="secondary"]:is(:hover, [data-regel-preview-state="hover"]) {
  background: var(--regel-surface-subtle-hover);
}

:root
  .regel-button[data-regel-variant="secondary"]:is(:active, [data-regel-preview-state="pressed"]) {
  background: var(--regel-surface-subtle);
  filter: var(--regel-button-active-filter);
}

:root .regel-button[data-regel-variant="outline"] {
  color: var(--regel-text-secondary);
  background: transparent;
  border-color: var(--regel-border);
}

:root .regel-button[data-regel-variant="outline"]:is(:hover, [data-regel-preview-state="hover"]) {
  color: var(--regel-text-primary);
  background: var(--regel-surface-subtle);
  border-color: var(--regel-button-outline-hover-border);
}

:root
  .regel-button[data-regel-variant="outline"]:is(:active, [data-regel-preview-state="pressed"]) {
  color: var(--regel-text-primary);
  background: var(--regel-surface-subtle);
  border-color: var(--regel-button-outline-hover-border);
  filter: var(--regel-button-active-filter);
}

:root .regel-button[data-regel-variant="tertiary"] {
  color: var(--regel-text-primary);
  background: transparent;
}

:root .regel-button[data-regel-variant="tertiary"]:is(:hover, [data-regel-preview-state="hover"]) {
  background: var(--regel-surface-subtle-hover);
}

:root
  .regel-button[data-regel-variant="tertiary"]:is(:active, [data-regel-preview-state="pressed"]) {
  background: var(--regel-surface-subtle-hover);
  filter: var(--regel-button-active-filter);
}

:root .regel-button[data-regel-variant="learn-more"] {
  min-height: var(--regel-learn-more-height);
  height: var(--regel-learn-more-height);
  padding: 0 var(--regel-space-1);
  border: 0;
  border-radius: 0;
  color: var(--regel-action);
  background: transparent;
}

:root
  .regel-button[data-regel-variant="learn-more"]:is(:hover, [data-regel-preview-state="hover"]) {
  color: var(--regel-action-hover);
  text-decoration: underline;
  text-underline-offset: var(--regel-link-underline-offset);
}

:root .regel-button[data-nav="true"] {
  height: var(--regel-nav-item-height);
  padding-inline: var(--regel-nav-item-padding);
  border-radius: var(--regel-nav-item-radius);
  color: var(--regel-text-secondary);
}

:root .regel-button[data-nav-layout="menu"] {
  width: 100%;
  justify-content: flex-start;
}

:root .regel-button[data-regel-variant="tertiary"][data-active="true"] {
  color: var(--regel-text-primary);
  background: var(--regel-nav-active);
}

:root .regel-button[data-regel-variant="tertiary"][data-active="true"]:hover {
  background: var(--regel-nav-active-hover);
}

:root .regel-button:is(:focus-visible, [data-regel-preview-state="focus"]),
:root:has([data-regel-theme="brand"]) [data-slot="select-trigger"]:focus-visible {
  outline: 2px solid var(--regel-text-primary);
  outline-offset: 2px;
}

:root .regel-button[data-regel-variant]:is(:disabled, [data-disabled]) {
  color: var(--text-tertiary);
  background: var(--regel-surface-subtle-hover);
  border-color: transparent;
  cursor: not-allowed;
  filter: none;
  text-decoration: none;
  opacity: 1;
}

:root .regel-button[data-regel-variant="outline"]:is(:disabled, [data-disabled]) {
  color: var(--regel-text-disabled);
  background: transparent;
  border-color: var(--regel-border);
}

:root
  .regel-button:is([data-regel-variant="tertiary"], [data-regel-variant="learn-more"]):is(
    :disabled,
    [data-disabled]
  ) {
  background: transparent;
  opacity: 0.4;
}

:root .regel-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--regel-card-padding);
  padding: var(--regel-card-padding);
  border: 1px solid var(--regel-card-border);
  border-radius: var(--regel-card-radius);
  color: var(--regel-text-primary);
  background: var(--regel-surface);
  box-shadow: var(--regel-card-shadow);
}

:root .regel-navigation-menu {
  border: 1px solid var(--regel-border);
  border-radius: var(--regel-card-radius);
  background: var(--regel-surface);
  box-shadow: var(--regel-shadow-md);
}

:root .regel-skeleton-stack {
  display: grid;
  gap: var(--regel-space-2);
}

:root .regel-skeleton-line {
  height: var(--regel-skeleton-line-height);
  border-radius: var(--regel-button-radius);
  background: linear-gradient(
    90deg,
    var(--regel-surface-subtle),
    var(--regel-surface-subtle-hover),
    var(--regel-surface-subtle)
  );
  background-size: 220% 100%;
  animation: regel-feedback-shimmer 1600ms var(--regel-motion-ease) infinite;
}

:root .regel-skeleton-line[data-width="short"] {
  width: 64%;
}

:root .regel-skeleton-line[data-width="medium"] {
  width: 82%;
}

@keyframes regel-feedback-shimmer {
  from {
    background-position: 120% 0;
  }
  to {
    background-position: -120% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root .regel-skeleton-line {
    animation: none;
  }
}

:root:has([data-regel-theme="brand"]) [data-slot="select-content"] {
  border-radius: 16px;
  box-shadow: var(--regel-shadow-md);
}

:root:has([data-regel-theme="brand"]) [data-slot="select-item"] {
  min-height: 40px;
  border-radius: 8px;
}

/* REGEL TopNav source geometry, with the website's full-width composition. */
:root {
  --regel-top-nav-height: 56px;
  --regel-top-nav-shadow: var(--regel-shadow-md);
  --regel-top-nav-website-inset-desktop: 40px;
}

:root .regel-top-navigation {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--regel-space-4);
  width: 100%;
  min-height: var(--regel-top-nav-height);
  padding-inline: var(--regel-space-4);
  border: 0;
  border-radius: 0;
  color: var(--text-primary);
  background: var(--bg-base);
}

:root .regel-top-navigation[data-scrolled="true"] {
  box-shadow: var(--regel-top-nav-shadow);
}

@media (min-width: 768px) {
  :root .regel-top-navigation {
    padding-inline: var(--regel-space-6);
  }
}

@media (min-width: 1024px) {
  :root .regel-top-navigation {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    padding-inline: var(--regel-top-nav-website-inset-desktop);
  }
}

/* Website media surface, using REGEL's 8px spacing value for its radius. */
:root {
  --regel-media-frame-radius: var(--regel-space-2);
}
.regel-media-frame {
  border: 0;
  border-radius: var(--regel-media-frame-radius);
  overflow: hidden;
}

/* Captions sit below media, with an 8px gap and edge inset. */
.regel-media-caption {
  margin-block-start: var(--regel-space-2);
  padding-inline: var(--regel-space-2);
  text-align: right;
}

/* Proposed website hero badge presentation, preserving Web 2026 geometry. */
:root {
  --regel-hero-problem: #f5320a;
  --regel-hero-solution: #01ba4d;
  --regel-hero-badge-radius: 40px;
}
.regel-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--regel-space-1);
  padding: var(--regel-space-2) var(--regel-space-4) var(--regel-space-2) var(--regel-space-2);
  border-radius: var(--regel-hero-badge-radius);
  vertical-align: middle;
  font-size: var(--regel-heading-sm-size);
  line-height: var(--regel-heading-sm-line);
  font-weight: var(--regel-type-heading-weight);
  letter-spacing: var(--regel-heading-sm-tracking);
  color: var(--regel-hero-badge-color);
  background: color-mix(in srgb, var(--regel-hero-badge-color) 10%, transparent);
}
.regel-hero-badge[data-status="problem"] {
  --regel-hero-badge-color: var(--regel-hero-problem);
}
.regel-hero-badge[data-status="solution"] {
  --regel-hero-badge-color: var(--regel-hero-solution);
}

.regel-hero-badge[data-status="guessing"] {
  --regel-hero-badge-color: var(--info-text);
}
.regel-hero-badge[data-status="knowing"] {
  --regel-hero-badge-color: var(--regel-hero-solution);
}

/* Distinct, soft elevation for website product-preview windows. */
:root {
  --regel-media-shadow: 0 4px 12px rgb(0 0 0 / 8%), 0 16px 40px rgb(0 0 0 / 16%);
}
.regel-media-raised {
  box-shadow: var(--regel-media-shadow);
}

/* Preserved website theme. Dark remains provisional. */
html[data-site-theme="light"] {
  color-scheme: light;
}
/* Branded dark roles from the captured REGEL workbench-tokens.css in platform-preview.css. */
:root {
  --site-media-surface: var(--neutral-50, #fafafa);
  --site-regel-dark-bg: #0a0a0a;
  --site-regel-dark-surface: #121212;
  --site-regel-dark-element: #171717;
  --site-regel-dark-element-hover: #202020;
  --site-regel-dark-border: #2a2a2a;
  --site-regel-dark-text-secondary: #d4d4d4;
  --site-regel-dark-text-tertiary: #a1a1a1;
}
html[data-site-theme="dark"],
html[data-site-theme="dark"] [data-regel-theme="brand"] {
  color-scheme: dark;
  --site-media-surface: var(--site-regel-dark-element);
  --bg-base: var(--site-regel-dark-bg);
  --bg-subtle: var(--site-regel-dark-element);
  --bg-overlay: var(--site-regel-dark-element-hover);
  --bg-inverse: #fafafa;
  --surface-default: var(--site-regel-dark-surface);
  --surface-sunken: var(--site-regel-dark-element);
  --surface-sunken-hover: var(--site-regel-dark-element-hover);
  --surface-raised: var(--site-regel-dark-surface);
  --surface-overlay: var(--site-regel-dark-surface);
  --text-primary: #fafafa;
  --text-secondary: var(--site-regel-dark-text-secondary);
  --text-tertiary: var(--site-regel-dark-text-tertiary);
  --text-inverse: var(--site-regel-dark-bg);
  --border-default: var(--site-regel-dark-border);
  --border-strong: #737373;
  --border-focus: #fff;
  --regel-field-focus-opacity: 14%;
  --interactive-default: #fafafa;
  --interactive-hover: #e5e5e5;
  --interactive-active: #d4d4d4;
  --interactive-subtle: var(--site-regel-dark-element);
  --interactive-subtle-hover: var(--site-regel-dark-element-hover);
  --background: var(--site-regel-dark-bg);
  --foreground: #fafafa;
  --card: var(--site-regel-dark-surface);
  --card-foreground: #fafafa;
  --popover: var(--site-regel-dark-surface);
  --popover-foreground: #fafafa;
  --primary: #fafafa;
  --primary-foreground: var(--site-regel-dark-bg);
  --secondary: var(--site-regel-dark-element);
  --secondary-foreground: #fafafa;
  --muted: var(--site-regel-dark-surface);
  --muted-foreground: var(--site-regel-dark-text-secondary);
  --accent: var(--site-regel-dark-element);
  --accent-foreground: #fafafa;
  --border: var(--site-regel-dark-border);
  --regel-text-primary: #fafafa;
  --regel-text-secondary: var(--site-regel-dark-text-secondary);
  --regel-text-inverse: var(--site-regel-dark-bg);
  --regel-surface: var(--site-regel-dark-surface);
  --regel-surface-subtle: var(--site-regel-dark-element);
  --regel-surface-subtle-hover: var(--site-regel-dark-element-hover);
  --regel-border: var(--site-regel-dark-border);
  --regel-border-strong: #737373;
  --regel-primary-hover: #e5e5e5;
  --regel-primary-pressed: #d4d4d4;
  --regel-button-outline-hover-border: #737373;
  --text-link: #65b5ed;
  --text-link-hover: #8acdf5;
  --text-disabled: #737373;
  --regel-text-disabled: #737373;
  --regel-nav-active: #242424;
  --regel-nav-active-hover: #303030;
  --regel-card-border: var(--site-regel-dark-border);
  --regel-card-shadow: none;
  --regel-shadow-md: none;
  --regel-action: #0f7ac7;
  --regel-action-hover: #1164a6;
  --regel-button-pressed-overlay: rgba(250, 250, 250, 0.14);
  --interactive-disabled: #202020;
  --interactive-disabled-text: #737373;
  --input: var(--site-regel-dark-border);
  --ring: #ffffff;
  --text-error: #f27e8b;
  --text-success: #66d693;
  --text-warning: #f3b55d;
  --success-text: #66d693;
  --error-text: #f27e8b;
  --warning-text: #f3b55d;
  --info-text: #9bd8f8;
  --info-bg: #10283d;
  --info-border: #3b6e91;
}

/* Complete public caption/icon presentation without consumer Tailwind utilities. */
.regel-media-caption.text-text-tertiary {
  color: var(--text-tertiary);
}
.regel-media-caption.text-text-error {
  color: var(--text-error);
}
.regel-hero-badge > svg {
  flex-shrink: 0;
}