html.stranger-than-heaven {
  * { box-sizing: border-box; }

  &:root {
    /* Brand Palette — Crown */
    --sth-primary: #bb2f05;
    --sth-secondary: #dfbe31;
    --sth-tertiary: #60160a;
    --sth-quaternary: #476ec2;
    --sth-quinary: #242436;
    --sth-light: #ffffff;
    --sth-dark: #090909;
    --sth-grey: #252525;
    --sth-supplemental: #c14700;

    /* RGB triplets for alpha composition */
    --sth-rgb-primary:       187 47 5;
    --sth-rgb-supplemental:  193 71 0;
    --sth-rgb-secondary:     223 190 49;
    --sth-rgb-light:         255 255 255;
    --sth-rgb-dark:          9 9 9;

    /* Per-network brand colours */
    --net-twitch:    #9146ff;
    --net-youtube:   #ff0000;
    --net-x:         #ffffff;
    --net-tiktok:    #fe2c55;
    --net-instagram: #dd2a7b;
    --net-ea:        #ffffff;
    --net-gamesight: #4f46e5;

    /* Variable Overrides */
    --color-palette-branding-normal: var(--sth-primary);
    --color-palette-branding-lucent: var(--sth-tertiary);
    --app-styling-background: var(--sth-dark);
    --app-styling-slate-level-1: var(--sth-grey);
    --card--background: var(--sth-quinary);
    --card--color: var(--sth-light);
    --header--background: var(--sth-dark);
    --input-buttons-primary-bg-default: var(--sth-primary);
    --input-buttons-primary-text-default: var(--sth-light);
    --input-buttons-primary-bg-hover: var(--sth-supplemental);
    --input-buttons-primary-text-hover: var(--sth-light);

    /* Fonts (Adobe Fonts / Typekit) */
    --font-display: 'arteria-std-compress', 'Futura PT', system-ui, sans-serif;
    --font-body: 'futura-pt', system-ui, sans-serif;
    --primary-font-family: var(--font-body);

    /* Signature button motif — 10° horizontal shear */
    --sth-button-skew: -10deg;
  }

  & body {
    font-family: var(--font-body);
    color: var(--sth-light);

    & h1, & h2, & h3, & h4, & h5, & h6,
    & .font-display {
      font-family: var(--font-display);
      font-weight: 800;
      letter-spacing: 0.02em;
    }

    /* ── Form labels — Arteria, uppercase ──────────────────────── */
    & label,
    & .form-field__label,
    & .UFormField label {
      font-family: var(--font-display);
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      font-size: 0.95rem;
      color: var(--sth-secondary);
      margin-bottom: 0.45rem;
    }

    /* ── Form fields — LIGHT theme (page sets light="input-only") ─
       Light surface, dark text, brand-orange accent border + focus
       ring. Targets text-like inputs only — radio/checkbox kept
       separately so their custom appearance below isn't broken. */
    & :where(input[type="text"], input[type="email"], input[type="tel"],
             input[type="url"], input[type="search"], input[type="number"],
             input[type="password"], input[type="date"], textarea) {
      border-radius: 0 !important;
      border: 1px solid rgb(var(--sth-rgb-primary) / 0.45) !important;
      min-height: 54px;
      padding: 12px 18px !important;
      font-size: 1rem;
      transition: border-color 0.2s ease-out, box-shadow 0.2s ease-out;

      &:hover {
        border-color: rgb(var(--sth-rgb-primary) / 0.7) !important;
      }
      &:focus,
      &:focus-visible {
        outline: none !important;
        border-color: var(--sth-primary) !important;
        box-shadow: 0 0 0 3px rgb(var(--sth-rgb-primary) / 0.25) !important;
      }
    }

    /* Custom UISelect trigger — match light input theme */
    & .ui-select-trigger {
      background: #f5f5f5 !important;
      color: #0a0a0a !important;
      border: 1px solid rgb(var(--sth-rgb-primary) / 0.45) !important;
      border-radius: 0 !important;
      min-height: 54px !important;
      padding: 8px 18px !important;
      font-family: var(--font-body);
    }
    & .ui-select-trigger:hover:not(.ui-select-trigger--disabled) {
      border-color: rgb(var(--sth-rgb-primary) / 0.7) !important;
    }
    & .ui-select-trigger:focus,
    & .ui-select-trigger--open {
      border-color: var(--sth-primary) !important;
      box-shadow: 0 0 0 3px rgb(var(--sth-rgb-primary) / 0.25) !important;
    }
    & .ui-select-display { color: #0a0a0a !important; }
    & .ui-select-placeholder { color: #6b6b6b !important; }
    & .ui-select-chevron,
    & .ui-select-clear { color: #4a4a4a !important; }

    /* UISelect dropdown panel — light to match trigger */
    & .ui-select-dropdown {
      background: #f5f5f5 !important;
      border: 1px solid rgb(var(--sth-rgb-primary) / 0.45) !important;
      border-radius: 0 !important;
    }
    & .ui-select-search-input {
      background: #ffffff !important;
      color: #0a0a0a !important;
      border: 1px solid rgb(var(--sth-rgb-primary) / 0.3) !important;
      border-radius: 0 !important;
      &::placeholder { color: #6b6b6b !important; }
      &:focus {
        border-color: var(--sth-primary) !important;
        box-shadow: none !important;
      }
    }
    & .ui-select-option { color: #0a0a0a !important; padding: 10px 18px !important; }
    & .ui-select-option:hover {
      background: rgb(var(--sth-rgb-primary) / 0.12) !important;
    }
    & .ui-select-option--selected {
      background: rgb(var(--sth-rgb-primary) / 0.2) !important;
      color: var(--sth-primary) !important;
    }
    & .ui-select-option--focused {
      background: rgb(var(--sth-rgb-primary) / 0.12) !important;
      color: #0a0a0a !important;
    }
    & .ui-select-option-check { color: var(--sth-primary) !important; }
    & .ui-select-tag {
      background: rgb(var(--sth-rgb-primary) / 0.18) !important;
      color: #0a0a0a !important;
      border: 1px solid rgb(var(--sth-rgb-primary) / 0.4) !important;
      border-radius: 0 !important;
    }
    & .ui-select-tag-remove { color: #0a0a0a !important; }
    & .ui-select-tag-remove:hover {
      background: rgb(var(--sth-rgb-primary) / 0.3) !important;
    }

    /* BaseFormSocialSelector "Add" button — primary fill */
    & .BaseFormSocialSelector button:not([type="submit"]) {
      background: var(--sth-primary) !important;
      color: var(--sth-light) !important;
      border: 0;
      border-radius: 0 !important;
      padding: 0 1.75rem !important;
      min-height: 54px;
      font-family: var(--font-display);
      font-weight: 800;
      font-size: 1rem;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      cursor: pointer;
      transition: filter 0.2s ease-out, background-color 0.2s ease-out;
    }
    & .BaseFormSocialSelector button:not([type="submit"]):hover {
      background: var(--sth-supplemental) !important;
      filter: brightness(1.05);
    }

    /* Per-field validation message — scoped to UFormField so the
       page's "cannot submit yet" Tailwind alert keeps its native
       text-yellow-800 contrast. */
    & .UFormField [role="alert"] {
      color: var(--sth-primary);
      font-family: var(--font-body);
      font-size: 0.9rem;
    }

    /* Helper text under each field label — Nuxt UI ships a cyan
       muted colour by default that clashes with the brand palette.
       Tone it down to a soft off-white and unset the body font so it
       doesn't compete with the Arteria label above it. */
    & .UFormField .UFormDescription {
      color: rgb(var(--sth-rgb-light) / 0.65);
      font-family: var(--font-body);
      font-size: 0.85rem;
      font-weight: 400;
      letter-spacing: 0;
      text-transform: none;
      margin-top: -0.25rem;
      margin-bottom: 0.4rem;
    }

    /* Input placeholders — neutral grey on the light input surface */
    & :where(input, textarea)::placeholder {
      color: #8a8a8a !important;
      font-style: normal;
      opacity: 1;
    }
  }

  /* ──────────────────────────────────────────────────────────────
   * Social / OAuth buttons (BaseSocialButton)
   *
   * Default: skewed parallelogram, dark fill, NETWORK-COLOUR border,
   *   white text + icon. Children counter-skewed for upright glyphs.
   * Hover: NETWORK-COLOUR fill + matching glow.
   * ─────────────────────────────────────────────────────────── */
  & .social-button {
    position: relative;
    background: rgba(0, 0, 0, 0.55) !important;
    border: 2px solid var(--sth-primary) !important;
    border-radius: 0 !important;
    color: var(--sth-light) !important;
    padding: 0.85rem 2.5rem !important;
    min-height: 56px;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.05rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    transform: skewX(var(--sth-button-skew));
    transition:
      background-color 0.2s ease-out,
      border-color 0.2s ease-out,
      box-shadow 0.2s ease-out,
      transform 0.2s ease-out,
      filter 0.2s ease-out;
  }

  /* Counter-skew children so glyphs read upright */
  & .social-button > *,
  & .social-button > * > * {
    transform: skewX(calc(-1 * var(--sth-button-skew)));
  }

  & .social-button:hover:not(:disabled) {
    transform: skewX(var(--sth-button-skew)) translateY(-1px);
    filter: brightness(1.05);
  }
  & .social-button:active:not(:disabled) {
    transform: skewX(var(--sth-button-skew)) translateY(1px);
  }
  & .social-button:focus-visible {
    outline: 3px solid var(--sth-secondary);
    outline-offset: 3px;
  }
  & .social-button:disabled,
  & .social-button[disabled] {
    opacity: 0.4;
    cursor: not-allowed;
  }

  /* Per-network borders (resting) */
  & .social-twitch    { border-color: var(--net-twitch)    !important; }
  & .social-youtube   { border-color: var(--net-youtube)   !important; }
  & .social-x         { border-color: var(--net-x)         !important; }
  & .social-tiktok    { border-color: var(--net-tiktok)    !important; }
  & .social-instagram { border-color: var(--net-instagram) !important; }
  & .social-ea        { border-color: var(--net-ea)        !important; }
  & .social-gamesight { border-color: var(--net-gamesight) !important; }

  /* Per-network hover fills + matching glow */
  & .social-twitch:hover:not(:disabled) {
    background: var(--net-twitch) !important;
    box-shadow: 0 0 24px 2px rgb(145 70 255 / 0.55);
  }
  & .social-youtube:hover:not(:disabled) {
    background: var(--net-youtube) !important;
    box-shadow: 0 0 24px 2px rgb(255 0 0 / 0.55);
  }
  & .social-x:hover:not(:disabled) {
    background: #000000 !important;
    box-shadow: 0 0 24px 2px rgb(255 255 255 / 0.35);
  }
  & .social-tiktok:hover:not(:disabled) {
    background: linear-gradient(135deg, #25f4ee 0%, #fe2c55 100%) !important;
    box-shadow: 0 0 24px 2px rgb(254 44 85 / 0.55);
  }
  & .social-instagram:hover:not(:disabled) {
    background: linear-gradient(135deg, #f58529 0%, #dd2a7b 50%, #8134af 100%) !important;
    box-shadow: 0 0 24px 2px rgb(221 42 123 / 0.6);
  }
  & .social-ea:hover:not(:disabled) {
    background: #01081d !important;
    box-shadow: 0 0 24px 2px rgb(255 255 255 / 0.3);
  }
  & .social-gamesight:hover:not(:disabled) {
    background: var(--net-gamesight) !important;
    box-shadow: 0 0 24px 2px rgb(79 70 229 / 0.5);
  }
}