/* Sngine v5 semantic colors ported to the Gameskel/Vikinger palette. */
body.vikinger-theme {
  --font-sans: Rajdhani, sans-serif;
  --default-font-family: Rajdhani, sans-serif;
  --vikinger-ink: #3e3f5e;
  --vikinger-surface: #fff;
  --vikinger-surface-soft: #f8f8fb;
  --vikinger-surface-raised: #dedeea;
  --vikinger-on-ink: #fff;
  /* Component variables consumed by Sngine v5 utilities, aliased to Vikinger. */
  --color-base-100: var(--vikinger-surface);
  --color-base-200: var(--vikinger-surface-soft);
  --color-base-300: var(--vikinger-surface-raised);
  --color-base-content: var(--vikinger-ink);
  --color-neutral: var(--vikinger-ink);
  --color-neutral-content: var(--vikinger-surface);
  --color-primary-content: #fff;
  --color-secondary: #00c7d9;
  --color-secondary-content: #fff;
  --color-accent: #00c7d9;
  --color-accent-content: #fff;
  --color-info: #23d2e2;
  --color-info-content: #fff;
  --color-success: #00c7d9;
  --color-success-content: #fff;
  --color-warning: #ffc750;
  --color-warning-content: #3e3f5e;
  --color-error: #ee4d62;
  --color-error-content: #fff;
  --radius-box: 12px;
  --radius-field: 12px;
  --radius-selector: 12px;
  --radius-2xl: 12px;
  --radius-3xl: 12px;
  --radius-xl: 12px;
  --radius-lg: 10px;
  --radius-md: 8px;
}

html[data-theme$="-dark"] body.vikinger-theme,
body.vikinger-theme.night-mode {
  --vikinger-ink: #e2e8f0;
  --vikinger-surface: #111422;
  --vikinger-surface-soft: #1c2033;
  --vikinger-surface-raised: #272e47;
  --vikinger-on-ink: #0e111a;
  --color-neutral-content: var(--vikinger-surface);
  --color-warning-content: #0e111a;
}

@layer theme {
  html[data-theme="gameskel"],
  html[data-theme="gameskel-dark"],
  html[data-theme="admin"],
  html[data-theme="admin-dark"] {
    --color-primary: #615dfa;
    --color-primary-content: #fff;
  }
}

body.vikinger-theme .font-sans { font-family: Rajdhani, sans-serif; }

body.vikinger-theme [class~="vikinger-bg-surface"] { background-color: var(--vikinger-surface); }
body.vikinger-theme [class~="vikinger-bg-surface-soft"] { background-color: var(--vikinger-surface-soft); }
body.vikinger-theme [class~="vikinger-bg-surface-raised"] { background-color: var(--vikinger-surface-raised); }
body.vikinger-theme [class~="vikinger-bg-surface-35"] { background-color: color-mix(in srgb, var(--vikinger-surface) 35%, transparent); }
body.vikinger-theme [class~="vikinger-bg-surface-45"] { background-color: color-mix(in srgb, var(--vikinger-surface) 45%, transparent); }
body.vikinger-theme [class~="vikinger-bg-surface-60"] { background-color: color-mix(in srgb, var(--vikinger-surface) 60%, transparent); }
body.vikinger-theme [class~="vikinger-bg-surface-70"] { background-color: color-mix(in srgb, var(--vikinger-surface) 70%, transparent); }
body.vikinger-theme [class~="vikinger-bg-surface-70-important"] { background-color: color-mix(in srgb, var(--vikinger-surface) 70%, transparent) !important; }
body.vikinger-theme [class~="vikinger-bg-surface-75"] { background-color: color-mix(in srgb, var(--vikinger-surface) 75%, transparent); }
body.vikinger-theme [class~="vikinger-bg-surface-80"] { background-color: color-mix(in srgb, var(--vikinger-surface) 80%, transparent); }
body.vikinger-theme [class~="vikinger-bg-surface-90"] { background-color: color-mix(in srgb, var(--vikinger-surface) 90%, transparent); }
body.vikinger-theme [class~="vikinger-bg-surface-95"] { background-color: color-mix(in srgb, var(--vikinger-surface) 95%, transparent); }
body.vikinger-theme [class~="vikinger-bg-surface-soft-40"] { background-color: color-mix(in srgb, var(--vikinger-surface-soft) 40%, transparent); }
body.vikinger-theme [class~="vikinger-bg-surface-soft-50"] { background-color: color-mix(in srgb, var(--vikinger-surface-soft) 50%, transparent); }
body.vikinger-theme [class~="vikinger-bg-surface-soft-60"] { background-color: color-mix(in srgb, var(--vikinger-surface-soft) 60%, transparent); }
body.vikinger-theme [class~="vikinger-bg-surface-soft-70"] { background-color: color-mix(in srgb, var(--vikinger-surface-soft) 70%, transparent); }
body.vikinger-theme [class~="vikinger-bg-ink-5"],
body.vikinger-theme [class~="vikinger-bg-ink-5-important"] { background-color: color-mix(in srgb, var(--vikinger-ink) 5%, transparent); }
body.vikinger-theme [class~="vikinger-bg-ink-5-important"] { background-color: color-mix(in srgb, var(--vikinger-ink) 5%, transparent) !important; }
body.vikinger-theme [class~="vikinger-bg-ink-10"] { background-color: color-mix(in srgb, var(--vikinger-ink) 10%, transparent); }
body.vikinger-theme [class~="vikinger-bg-ink-15"] { background-color: color-mix(in srgb, var(--vikinger-ink) 15%, transparent); }
body.vikinger-theme [class~="vikinger-bg-ink-20"] { background-color: color-mix(in srgb, var(--vikinger-ink) 20%, transparent); }

body.vikinger-theme [class~="vikinger-text-surface"] { color: var(--vikinger-surface); }
body.vikinger-theme [class~="vikinger-text-on-ink"] { color: var(--vikinger-on-ink); }
body.vikinger-theme [class~="vikinger-text-ink"] { color: var(--vikinger-ink); }
body.vikinger-theme [class~="vikinger-text-ink-important"] { color: var(--vikinger-ink) !important; }
body.vikinger-theme [class~="vikinger-text-ink-10"] { color: color-mix(in srgb, var(--vikinger-ink) 10%, transparent); }
body.vikinger-theme [class~="vikinger-text-ink-15"] { color: color-mix(in srgb, var(--vikinger-ink) 15%, transparent); }
body.vikinger-theme [class~="vikinger-text-ink-25"] { color: color-mix(in srgb, var(--vikinger-ink) 25%, transparent); }
body.vikinger-theme [class~="vikinger-text-ink-30"] { color: color-mix(in srgb, var(--vikinger-ink) 30%, transparent); }
body.vikinger-theme [class~="vikinger-text-ink-40"],
body.vikinger-theme [class~="vikinger-text-ink-40-important"] { color: color-mix(in srgb, var(--vikinger-ink) 40%, transparent); }
body.vikinger-theme [class~="vikinger-text-ink-40-important"] { color: color-mix(in srgb, var(--vikinger-ink) 40%, transparent) !important; }
body.vikinger-theme [class~="vikinger-text-ink-45"] { color: color-mix(in srgb, var(--vikinger-ink) 45%, transparent); }
body.vikinger-theme [class~="vikinger-text-ink-50"],
body.vikinger-theme [class~="vikinger-text-ink-50-important"] { color: color-mix(in srgb, var(--vikinger-ink) 50%, transparent); }
body.vikinger-theme [class~="vikinger-text-ink-50-important"] { color: color-mix(in srgb, var(--vikinger-ink) 50%, transparent) !important; }
body.vikinger-theme [class~="vikinger-text-ink-55"] { color: color-mix(in srgb, var(--vikinger-ink) 55%, transparent); }
body.vikinger-theme [class~="vikinger-text-ink-60"],
body.vikinger-theme [class~="vikinger-text-ink-60-important"] { color: color-mix(in srgb, var(--vikinger-ink) 60%, transparent); }
body.vikinger-theme [class~="vikinger-text-ink-60-important"] { color: color-mix(in srgb, var(--vikinger-ink) 60%, transparent) !important; }
body.vikinger-theme [class~="vikinger-text-ink-65"] { color: color-mix(in srgb, var(--vikinger-ink) 65%, transparent); }
body.vikinger-theme [class~="vikinger-text-ink-70"],
body.vikinger-theme [class~="vikinger-text-ink-70-important"] { color: color-mix(in srgb, var(--vikinger-ink) 70%, transparent); }
body.vikinger-theme [class~="vikinger-text-ink-70-important"] { color: color-mix(in srgb, var(--vikinger-ink) 70%, transparent) !important; }
body.vikinger-theme [class~="vikinger-text-ink-75"] { color: color-mix(in srgb, var(--vikinger-ink) 75%, transparent); }
body.vikinger-theme [class~="vikinger-text-ink-80"],
body.vikinger-theme [class~="vikinger-text-ink-80-important"] { color: color-mix(in srgb, var(--vikinger-ink) 80%, transparent); }
body.vikinger-theme [class~="vikinger-text-ink-80-important"] { color: color-mix(in srgb, var(--vikinger-ink) 80%, transparent) !important; }
body.vikinger-theme [class~="vikinger-text-ink-85"],
body.vikinger-theme [class~="vikinger-text-ink-85-important"] { color: color-mix(in srgb, var(--vikinger-ink) 85%, transparent); }
body.vikinger-theme [class~="vikinger-text-ink-85-important"] { color: color-mix(in srgb, var(--vikinger-ink) 85%, transparent) !important; }

body.vikinger-theme [class~="vikinger-border-border"] { border-color: var(--vikinger-surface-raised); }
body.vikinger-theme [class~="vikinger-border-border-surface"] { border-color: var(--vikinger-surface); }
body.vikinger-theme [class~="vikinger-border-border-70"] { border-color: color-mix(in srgb, var(--vikinger-surface-raised) 70%, transparent); }
body.vikinger-theme [class~="vikinger-border-border-ink-5"] { border-color: color-mix(in srgb, var(--vikinger-ink) 5%, transparent); }
body.vikinger-theme [class~="vikinger-border-border-ink-10"] { border-color: color-mix(in srgb, var(--vikinger-ink) 10%, transparent); }
body.vikinger-theme [class~="vikinger-border-border-ink-15"] { border-color: color-mix(in srgb, var(--vikinger-ink) 15%, transparent); }
body.vikinger-theme [class~="vikinger-border-border-ink-20"],
body.vikinger-theme [class~="vikinger-border-border-ink-20-important"] { border-color: color-mix(in srgb, var(--vikinger-ink) 20%, transparent); }
body.vikinger-theme [class~="vikinger-border-border-ink-20-important"] { border-color: color-mix(in srgb, var(--vikinger-ink) 20%, transparent) !important; }
body.vikinger-theme [class~="vikinger-border-border-ink-25"] { border-color: color-mix(in srgb, var(--vikinger-ink) 25%, transparent); }
body.vikinger-theme [class~="vikinger-border-border-ink-30"] { border-color: color-mix(in srgb, var(--vikinger-ink) 30%, transparent); }

body.vikinger-theme [class~="vikinger-hover-bg-surface"]:hover { background-color: var(--vikinger-surface); }
body.vikinger-theme [class~="vikinger-hover-bg-surface-60"]:hover { background-color: color-mix(in srgb, var(--vikinger-surface) 60%, transparent); }
body.vikinger-theme [class~="vikinger-hover-bg-surface-soft"]:hover { background-color: var(--vikinger-surface-soft); }
body.vikinger-theme [class~="vikinger-hover-bg-surface-soft-60"]:hover { background-color: color-mix(in srgb, var(--vikinger-surface-soft) 60%, transparent); }
body.vikinger-theme [class~="vikinger-hover-bg-surface-raised"]:hover { background-color: var(--vikinger-surface-raised); }
body.vikinger-theme [class~="vikinger-hover-bg-surface-raised-70"]:hover { background-color: color-mix(in srgb, var(--vikinger-surface-raised) 70%, transparent); }
body.vikinger-theme [class~="vikinger-hover-bg-ink-5"]:hover { background-color: color-mix(in srgb, var(--vikinger-ink) 5%, transparent); }
body.vikinger-theme [class~="vikinger-hover-bg-ink-10"]:hover { background-color: color-mix(in srgb, var(--vikinger-ink) 10%, transparent); }
body.vikinger-theme [class~="vikinger-hover-bg-ink-15"]:hover { background-color: color-mix(in srgb, var(--vikinger-ink) 15%, transparent); }
body.vikinger-theme [class~="vikinger-hover-border-border"]:hover { border-color: var(--vikinger-surface-raised); }
body.vikinger-theme [class~="vikinger-hover-border-border-ink-20"]:hover { border-color: color-mix(in srgb, var(--vikinger-ink) 20%, transparent); }
body.vikinger-theme [class~="vikinger-hover-border-border-ink-25"]:hover { border-color: color-mix(in srgb, var(--vikinger-ink) 25%, transparent); }
body.vikinger-theme [class~="vikinger-hover-text-ink"]:hover { color: var(--vikinger-ink); }
body.vikinger-theme [class~="vikinger-hover-text-ink-important"]:hover { color: var(--vikinger-ink) !important; }

body.vikinger-theme [class~="vikinger-after-bg-surface-raised"]::after,
body.vikinger-theme [class~="vikinger-before-bg-surface-raised"]::before { background-color: var(--vikinger-surface-raised); }
body.vikinger-theme [class~="vikinger-focus-visible-bg-surface-soft"]:focus-visible { background-color: var(--vikinger-surface-soft); }
body.vikinger-theme [class~="vikinger-focus-within-bg-surface"]:focus-within { background-color: var(--vikinger-surface); }
body.vikinger-theme [class~="vikinger-placeholder-text-ink-50"]::placeholder { color: color-mix(in srgb, var(--vikinger-ink) 50%, transparent); }
body.vikinger-theme [class~="vikinger-group-hover-bg-surface-soft"]:is(:hover, :focus-within),
body.vikinger-theme [class~="group"]:is(:hover, :focus-within) [class~="vikinger-group-hover-bg-surface-soft"] { background-color: var(--vikinger-surface-soft); }
body.vikinger-theme [class~="vikinger-group-hover-text-ink"]:is(:hover, :focus-within),
body.vikinger-theme [class~="group"]:is(:hover, :focus-within) [class~="vikinger-group-hover-text-ink"] { color: var(--vikinger-ink); }
body.vikinger-theme [class~="group"]:is(:hover, :focus-within) [class~="vikinger-group-hover-text-ink-60"] { color: color-mix(in srgb, var(--vikinger-ink) 60%, transparent); }
body.vikinger-theme [class~="group"]:is(:hover, :focus-within) [class~="vikinger-group-hover-text-ink-70"] { color: color-mix(in srgb, var(--vikinger-ink) 70%, transparent); }
body.vikinger-theme [class~="group/pin"]:is(:hover, :focus-within) [class~="vikinger-group-hover-pin-text-ink"] { color: var(--vikinger-ink); }
body.vikinger-theme [class~="group/play"]:is(:hover, :focus-within) [class~="vikinger-group-hover-play-bg-ink-15"],
body.vikinger-theme [class~="group/watch"]:is(:hover, :focus-within) [class~="vikinger-group-hover-watch-bg-ink-15"] { background-color: color-mix(in srgb, var(--vikinger-ink) 15%, transparent); }
body.vikinger-theme [class~="dropdown-open"] [class~="vikinger-dropdown-open-bg-surface-soft"],
body.vikinger-theme [aria-expanded="true"][class~="vikinger-dropdown-open-bg-surface-soft"] { background-color: var(--vikinger-surface-soft); }
body.vikinger-theme [class~="dropdown-open"] [class~="vikinger-dropdown-open-bg-ink-10"],
body.vikinger-theme [aria-expanded="true"][class~="vikinger-dropdown-open-bg-ink-10"] { background-color: color-mix(in srgb, var(--vikinger-ink) 10%, transparent); }
body.vikinger-theme [class~="dropdown-open"] [class~="vikinger-dropdown-open-text-ink"],
body.vikinger-theme [aria-expanded="true"][class~="vikinger-dropdown-open-text-ink"] { color: var(--vikinger-ink); }
body.vikinger-theme [class~="collapse-open"][class~="vikinger-collapse-open-bg-ink-10"] { background-color: color-mix(in srgb, var(--vikinger-ink) 10%, transparent); }
body.vikinger-theme .group\/shortcut:has([value="hidden"]:checked) .vikinger-shortcut-muted { color: color-mix(in srgb, var(--vikinger-ink) 40%, transparent); }

body.vikinger-theme [class~="[&_.dropdown-menu]:vikinger-border-border"] .dropdown-menu { border-color: var(--vikinger-surface-raised); }
body.vikinger-theme [class~="[&_.form-table-row]:vikinger-bg-surface-soft-60"] .form-table-row { background-color: color-mix(in srgb, var(--vikinger-surface-soft) 60%, transparent); }
body.vikinger-theme [class~="[&_.publisher-attachments_li]:vikinger-bg-surface-soft"] .publisher-attachments_li { background-color: var(--vikinger-surface-soft); }
body.vikinger-theme [class~="[&_.publisher-meta_select]:vikinger-bg-surface"] .publisher-meta_select { background-color: var(--vikinger-surface); }
body.vikinger-theme [class~="[&_.publisher-meta_select]:vikinger-border-border"] .publisher-meta_select { border-color: var(--vikinger-surface-raised); }
body.vikinger-theme [class~="[&_.publisher-tools-tab:hover]:vikinger-bg-surface-soft"] .publisher-tools-tab:hover { background-color: var(--vikinger-surface-soft); }
body.vikinger-theme [class~="[&_.publisher-tools-tab]:vikinger-text-ink-important"] .publisher-tools-tab { color: var(--vikinger-ink) !important; }
body.vikinger-theme [class~="[&_.text-muted]:vikinger-text-ink-55"] .text-muted { color: color-mix(in srgb, var(--vikinger-ink) 55%, transparent); }
body.vikinger-theme [class~="[&_.x-progress]:vikinger-bg-surface-raised"] .x-progress { background-color: var(--vikinger-surface-raised); }
body.vikinger-theme [class~="[&_blockquote]:vikinger-border-border"] blockquote { border-color: var(--vikinger-surface-raised); }
body.vikinger-theme [class~="[&_pre]:vikinger-bg-surface-soft"] pre { background-color: var(--vikinger-surface-soft); }
body.vikinger-theme [class~="[&.active]:vikinger-text-ink"].active { color: var(--vikinger-ink); }
body.vikinger-theme [class~="[&.active]:vikinger-ring-offset-surface"].active { --tw-ring-offset-color: var(--vikinger-surface); }
html[data-theme="admin-dark"] body.vikinger-theme [class~="[[data-theme=admin-dark]_&]:vikinger-border-border-ink-30"] { border-color: color-mix(in srgb, var(--vikinger-ink) 30%, transparent); }

body.vikinger-theme [class~="vikinger-ring-surface"] { --tw-ring-color: var(--vikinger-surface); }
body.vikinger-theme [class~="vikinger-ring-surface-soft"] { --tw-ring-color: var(--vikinger-surface-soft); }
body.vikinger-theme [class~="vikinger-ring-surface-raised"] { --tw-ring-color: var(--vikinger-surface-raised); }
body.vikinger-theme [class~="vikinger-ring-ink-5"] { --tw-ring-color: color-mix(in srgb, var(--vikinger-ink) 5%, transparent); }
body.vikinger-theme [class~="vikinger-ring-ink-10"] { --tw-ring-color: color-mix(in srgb, var(--vikinger-ink) 10%, transparent); }
body.vikinger-theme [class~="vikinger-ring-offset-surface"] { --tw-ring-offset-color: var(--vikinger-surface); }
body.vikinger-theme [class~="vikinger-divide-surface-raised"] > :not(:last-child) { border-color: var(--vikinger-surface-raised); }
body.vikinger-theme [class~="vikinger-divide-ink-5"] > :not(:last-child) { border-color: color-mix(in srgb, var(--vikinger-ink) 5%, transparent); }
body.vikinger-theme [class~="vikinger-shadow-surface-raised-20"] { --tw-shadow-color: color-mix(in srgb, var(--vikinger-surface-raised) 20%, transparent); }

body.vikinger-theme [class~="vikinger-from-ink-20"] { --tw-gradient-from: color-mix(in srgb, var(--vikinger-ink) 20%, transparent); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); }
body.vikinger-theme [class~="vikinger-from-ink-25"] { --tw-gradient-from: color-mix(in srgb, var(--vikinger-ink) 25%, transparent); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); }
body.vikinger-theme [class~="vikinger-from-surface"] { --tw-gradient-from: var(--vikinger-surface); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); }
body.vikinger-theme [class~="vikinger-from-surface-soft-40"] { --tw-gradient-from: color-mix(in srgb, var(--vikinger-surface-soft) 40%, transparent); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); }
body.vikinger-theme [class~="vikinger-from-surface-soft-55"] { --tw-gradient-from: color-mix(in srgb, var(--vikinger-surface-soft) 55%, transparent); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); }
body.vikinger-theme [class~="vikinger-from-surface-soft-80"] { --tw-gradient-from: color-mix(in srgb, var(--vikinger-surface-soft) 80%, transparent); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); }
body.vikinger-theme [class~="vikinger-from-surface-raised"] { --tw-gradient-from: var(--vikinger-surface-raised); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); }
body.vikinger-theme [class~="vikinger-via-ink-20"] { --tw-gradient-via: color-mix(in srgb, var(--vikinger-ink) 20%, transparent); --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-via-stops); }
body.vikinger-theme [class~="vikinger-via-surface"] { --tw-gradient-via: var(--vikinger-surface); --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-via-stops); }
body.vikinger-theme [class~="vikinger-via-surface-45"] { --tw-gradient-via: color-mix(in srgb, var(--vikinger-surface) 45%, transparent); --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-via-stops); }
body.vikinger-theme [class~="vikinger-via-surface-85"] { --tw-gradient-via: color-mix(in srgb, var(--vikinger-surface) 85%, transparent); --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-via-stops); }
body.vikinger-theme [class~="vikinger-via-surface-soft-80"] { --tw-gradient-via: color-mix(in srgb, var(--vikinger-surface-soft) 80%, transparent); --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-via-stops); }
body.vikinger-theme [class~="vikinger-via-surface-soft-90"] { --tw-gradient-via: color-mix(in srgb, var(--vikinger-surface-soft) 90%, transparent); --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-via-stops); }
body.vikinger-theme [class~="vikinger-to-ink-20"] { --tw-gradient-to: color-mix(in srgb, var(--vikinger-ink) 20%, transparent); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); }
body.vikinger-theme [class~="vikinger-to-ink-25"] { --tw-gradient-to: color-mix(in srgb, var(--vikinger-ink) 25%, transparent); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); }
body.vikinger-theme [class~="vikinger-to-surface"] { --tw-gradient-to: var(--vikinger-surface); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); }
body.vikinger-theme [class~="vikinger-to-surface-10"] { --tw-gradient-to: color-mix(in srgb, var(--vikinger-surface) 10%, transparent); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); }
body.vikinger-theme [class~="vikinger-to-surface-30"] { --tw-gradient-to: color-mix(in srgb, var(--vikinger-surface) 30%, transparent); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); }
body.vikinger-theme [class~="vikinger-to-surface-40"] { --tw-gradient-to: color-mix(in srgb, var(--vikinger-surface) 40%, transparent); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); }
body.vikinger-theme [class~="vikinger-to-surface-soft"] { --tw-gradient-to: var(--vikinger-surface-soft); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); }

body.vikinger-theme [data-seen="true"][class~="data-[seen=true]:vikinger-from-ink-20"] { --tw-gradient-from: color-mix(in srgb, var(--vikinger-ink) 20%, transparent); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); }
body.vikinger-theme [data-seen="true"][class~="data-[seen=true]:vikinger-via-ink-20"] { --tw-gradient-via: color-mix(in srgb, var(--vikinger-ink) 20%, transparent); --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-via-stops); }
body.vikinger-theme [data-seen="true"][class~="data-[seen=true]:vikinger-to-ink-20"] { --tw-gradient-to: color-mix(in srgb, var(--vikinger-ink) 20%, transparent); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); }

html[data-theme$="-dark"] body.vikinger-theme [class~="vikinger-dark-ring-surface-soft"] { --tw-ring-color: var(--vikinger-surface-soft); }
html[data-theme$="-dark"] body.vikinger-theme [class~="vikinger-dark-from-surface-soft-55"] { --tw-gradient-from: color-mix(in srgb, var(--vikinger-surface-soft) 55%, transparent); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); }
html[data-theme$="-dark"] body.vikinger-theme [class~="vikinger-dark-via-surface-soft-80"] { --tw-gradient-via: color-mix(in srgb, var(--vikinger-surface-soft) 80%, transparent); --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-via-stops); }

html[data-theme$="-dark"] body.vikinger-theme [class~="vikinger-dark-bg-surface-soft"],
body.vikinger-theme.night-mode [class~="vikinger-dark-bg-surface-soft"] { background-color: var(--vikinger-surface-soft); }
html[data-theme$="-dark"] body.vikinger-theme [class~="vikinger-dark-bg-surface-raised"],
body.vikinger-theme.night-mode [class~="vikinger-dark-bg-surface-raised"] { background-color: var(--vikinger-surface-raised); }
html[data-theme$="-dark"] body.vikinger-theme [class~="vikinger-dark-hover-bg-surface-raised"]:hover,
body.vikinger-theme.night-mode [class~="vikinger-dark-hover-bg-surface-raised"]:hover { background-color: var(--vikinger-surface-raised); }

@media (min-width: 1024px) {
  body.vikinger-theme [class~="vikinger-lg-border-border-ink-10"] { border-color: color-mix(in srgb, var(--vikinger-ink) 10%, transparent); }
  body.vikinger-theme [class~="vikinger-lg-via-surface-45"] { --tw-gradient-via: color-mix(in srgb, var(--vikinger-surface) 45%, transparent); --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-via-stops); }
  body.vikinger-theme [class~="vikinger-lg-to-surface-10"] { --tw-gradient-to: color-mix(in srgb, var(--vikinger-surface) 10%, transparent); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); }
}
@media (min-width: 640px) {
  body.vikinger-theme [class~="vikinger-sm-border-border"] { border-color: var(--vikinger-surface-raised); }
}
@media (max-width: 639.98px) {
  body.vikinger-theme [class~="vikinger-max-sm-border-border"] { border-color: var(--vikinger-surface-raised); }
}

/* Keep the story composer geometry aligned with Nova while retaining the Vikinger palette. */
body.vikinger-theme .js_composer-stage { border-radius: 0; }
body.vikinger-theme .js_composer[data-step="start"] .js_composer-pick,
body.vikinger-theme .js_composer[data-step="start"] .js_composer-text-story { border-radius: 24px; }
body.vikinger-theme .js_composer[data-step="start"] .js_composer-pick > span:first-child,
body.vikinger-theme .js_composer[data-step="start"] .js_composer-text-story > span:first-child { border-radius: 20px; }
@media (min-width: 640px) {
  body.vikinger-theme .js_composer-stage { border-radius: 24px; }
}