Honeyed Twilight

dark

• Primary#c4943a
• Secondary#6b5a42
• Background#1a1410
• Text#e8dcca
• Danger#d94848
• Success#4aad5c
• Warning#d4992e
• Speech#d4a246
• Thoughts#9e8668

/* ═══════════════════════════════════════════════════════════
   HONEYED TWILIGHT
   Warm frosted glass, app UI typography, drawers, modals, inputs.
   BubbleMessage and SpindleFloatWidget rules are scoped in separate component CSS.
   FONTS: Nunito - chat, Manrope - UI, JetBrains Mono - metadata.
   ═══════════════════════════════════════════════════════════ */

/* --------------------------------------------------------------------------
   THEME CONTROLS

   Controls are grouped by typography, non-colour effects, and colour palette.
   Colour transparency can be adjusted by changing the final alpha value.

    Example:
    hsla(26, 28%, 8%, 0.55)
                         ↑
                  alpha value
            lower = more transparent
            higher = more solid
            
   Transparency guide:
   0.00 = invisible, 0.25 = very transparent, 0.55 = glassy/readable,
   0.75 = mostly solid, 0.90 = nearly opaque, 1.00 = fully solid.
-------------------------------------------------------------------------- */

:root {
  /* ─────────────────────────────────────────────────────────
     TYPOGRAPHY
     ───────────────────────────────────────────────────────── */
     
  /* Fonts
     UI = app chrome, drawers, modals, controls.
     Chat = BubbleMessage + dialogue widget body.
     Mono = code, metadata, counters, tokens. */
  --ht-font-chat: "Nunito", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ht-font-ui: "Manrope", "Nunito", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ht-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Font scale
     Relative multipliers. These stack with Lumiverse's global fontScale.
     1 = follow Lumiverse exactly. */
  --ht-chat-font-scale: 1;
  --ht-chat-input-font-scale: 1;
  --ht-meta-font-scale: 0.78;
  
  /* ─────────────────────────────────────────────────────────
     NON-COLOUR EFFECTS
     ───────────────────────────────────────────────────────── */
     
  /* Header image / frost intensity
     Header artwork opacity and backdrop blur. Increase blur for heavier glass;
     decrease blur for clearer header image visibility. */
  --ht-header-image-opacity: 0.30;
  --ht-blur: 16px;
 
 /* ─────────────────────────────────────────────────────────
    COLOUR PALETTE
    Everything below this line controls theme colour values.
    ───────────────────────────────────────────────────────── */
    
  /* Core accent colour
     Main accent helper for effects that should follow Lumiverse primary.
     You can also replace any component value below with a direct rgba()/hsla(). */
  --ht-accent-fallback: #c4943a;
  --ht-accent: var(--lumiverse-primary, var(--ht-accent-fallback));

  /* Drawer / sidebar colours
     Main side drawer, icon strip, and toggle button.
     Transparency: edit the final number in hsla(..., alpha). */
  --ht-drawer-panel: hsla(26, 28%, 8%, 0.65);
  --ht-drawer-icon-strip: hsla(26, 28%, 6%, 0.70);
  --ht-drawer-toggle-button: hsla(26, 28%, 6%, 0.52);

  /* Glass panels and inner cards colours
     Nested panels, cards, tab interiors, empty states, and soft glassy containers. */
  --ht-glass-tint: hsla(26, 28%, 8%, 0.55);
  --ht-glass-tint-hover: hsla(26, 28%, 10%, 0.60);

  /* Tabs / settings nav colours
     Active and hover states for tab rows, nav items, settings menus, and drawer controls. */
  --ht-tab-active: hsla(30, 35%, 15%, 0.35);
  --ht-tab-hover: hsla(30, 30%, 15%, 0.25);
  --ht-settings-nav-hover: hsla(26, 28%, 15%, 0.50);
  --ht-settings-nav-active: hsla(26, 28%, 18%, 0.60);

  /* Modal colours
     Settings modal, regeneration dialog, popups, overlay panels, and backdrops.
     Modal transparency: edit --ht-modal. Backdrop transparency: edit --ht-modal-backdrop. */
  --ht-modal: hsla(30, 35%, 10%, 0.85);
  --ht-modal-backdrop: hsla(26, 28%, 4%, 0.30);
  --ht-modal-border: hsla(36, 40%, 40%, 0.15);

  /* Chat message colours
     Bubble accent edge, quote/code tinting, link underline, and card depth.
     Full BubbleMessage rules live in the separate BubbleMessage CSS file. */
  --ht-message-accent: color-mix(in srgb, var(--ht-accent) 20%, transparent);
  --ht-message-card-border: hsla(36, 40%, 40%, 0.15);
  --ht-message-quote-bg: color-mix(in srgb, var(--ht-accent) 7%, transparent);
  --ht-message-quote-border: color-mix(in srgb, var(--ht-accent) 65%, transparent);
  --ht-message-code-bg: color-mix(in srgb, var(--ht-accent) 12%, transparent);
  --ht-message-code-border: color-mix(in srgb, var(--ht-accent) 18%, transparent);
  --ht-message-link-underline: color-mix(in srgb, var(--ht-accent) 55%, transparent);
  --ht-message-shadow-soft: rgba(0, 0, 0, 0.12);
  --ht-message-shadow-medium: rgba(0, 0, 0, 0.20);

  /* Input area colours
     Bottom composer/chat input glass, border, and text scale. */
  --ht-input-bg: hsla(26, 28%, 8%, 0.55);
  --ht-input-border: hsla(36, 40%, 40%, 0.15);

  /* Scrollbar + text selection colours
     Accent-tinted scrollbar thumb and selection highlight. */
  --ht-scrollbar: color-mix(in srgb, var(--ht-accent) 35%, transparent);
  --ht-scrollbar-hover: color-mix(in srgb, var(--ht-accent) 50%, transparent);
  --ht-text-selection: color-mix(in srgb, var(--ht-accent) 30%, transparent);

}

/* ═════════════════════════════════════════════════════════
   EVERYTHING BELOW USES THE VARIABLES ABOVE.
   ═════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────
   LOADED FONTS
   ───────────────────────────────────────────────────────── */

@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./assets/nunito-regular.woff2") format("woff2");
}

@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("./assets/nunito-medium.woff2") format("woff2");
}

@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("./assets/nunito-bold.woff2") format("woff2");
}

@font-face {
  font-family: "Nunito";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("./assets/nunito-italic.woff2") format("woff2");
}

@font-face {
  font-family: "Nunito";
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("./assets/nunito-mediumitalic.woff2") format("woff2");
}

@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("./assets/manrope-variable.woff2") format("woff2");
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./assets/jetbrainsmono-regular.woff2") format("woff2");
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("./assets/jetbrainsmono-bold.woff2") format("woff2");
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("./assets/jetbrainsmono-italic.woff2") format("woff2");
}

:root {
  /* Default Lumiverse text should feel like the app UI. Conversational regions override this to Nunito. */
  --lumiverse-font-family: var(--ht-font-ui);
}

/* Broad UI default: Manrope */
:root,
body,
#root,
[data-theme],
[class*="_app_"],
[class*="_shell_"],
[class*="_layout_"],
[class*="_modal_"],
[class*="_drawer_"],
[class*="_panel_"],
[class*="_menu_"],
[class*="_popover_"],
[class*="_tooltip_"],
button,
input,
select,
label {
  font-family: var(--ht-font-ui) !important;
}

/* Headings/titles: same UI face, with display treatment */
h1, h2, h3, h4, h5, h6,
[class*="_title_"],
[class*="_heading_"],
[class*="_headerTitle_"],
[class*="_panelTitle_"],
[class*="_modalTitle_"],
[class*="_sectionTitle_"],
[class*="_panelHeader_"] {
  font-family: var(--ht-font-ui) !important;
  font-weight: 800 !important;
  letter-spacing: -0.025em;
}

strong, b {
  font-weight: 700 !important;
}

/* Technical UI text: JetBrains Mono */
[class*="_meta_"],
[class*="_metaPill_"],
[class*="_metaSegment_"],
[class*="_counter_"],
[class*="_token_"] {
  font-family: var(--ht-font-mono) !important;
}

/* Expanded text editor: mono font
   Only change the font family. Let Lumiverse keep its own size, line-height,
   wrapping, and scroll metrics. */
[class*="_highlightPre_"],
[class*="_textareaHighlighted_"] {
  font-family: var(--ht-font-mono) !important;
}

/* ─────────────────────────────────────────────────────────
   VIEWPORT DRAWER: Frosted glass
   ───────────────────────────────────────────────────────── */

/* Outermost wrapper — transparent, overrides glass tokens */
[class*="_wrapper_"]:has([data-spindle-mount="sidebar"]) {
  background: transparent;
  --lcs-glass-bg: var(--ht-glass-tint);
  --lcs-glass-bg-hover: var(--ht-glass-tint-hover);
}

/* Drawer flex container — transparent pass-through */
[class*="_drawer_"]:has([data-spindle-mount="sidebar"]) {
  background: transparent;
}

/* Drawer toggle tab — translucent with frost */
[class*="_drawerTab_"] {
  background: var(--ht-drawer-toggle-button);
  backdrop-filter: blur(var(--ht-blur));
  -webkit-backdrop-filter: blur(var(--ht-blur));
}

/* Icon strip sidebar — frosted glass */
[data-spindle-mount="sidebar"] {
  background: var(--ht-drawer-icon-strip);
  backdrop-filter: blur(var(--ht-blur));
  -webkit-backdrop-filter: blur(var(--ht-blur));
}

/* Tab buttons — themed active/hover */
[data-spindle-mount="sidebar"] [class*="_tabBtnActive_"][class*="_tabBtnActive_"] {
  background: var(--ht-tab-active);
}

[data-spindle-mount="sidebar"] [class*="_tabBtn_"]:hover {
  background: var(--ht-tab-hover);
}

/* Drawer content panel — frosted glass */
[class*="_drawer_"]:has([data-spindle-mount="sidebar"]) > [class*="_panel_"] {
  background: var(--ht-drawer-panel);
  backdrop-filter: blur(var(--ht-blur));
  -webkit-backdrop-filter: blur(var(--ht-blur));
}

/* Panel content scroll area — transparent */
[class*="_panelContent_"],
[class*="_panelContentFull_"] {
  background: transparent;
}


/* ─────────────────────────────────────────────────────────
   INNER TAB PANELS: Selective transparency
   ───────────────────────────────────────────────────────── */

/* Tab panel roots */
[class*="_panelContent_"] > div,
[class*="_panelContentFull_"] > div {
  background: transparent;
}

/* LoomBuilder structural layers */
[class*="_panelContent_"] [class*="_layout_"],
[class*="_panelContentFull_"] [class*="_layout_"],
[class*="_panelContent_"] [class*="_scrollArea_"],
[class*="_panelContentFull_"] [class*="_scrollArea_"] {
  background: transparent;
}

/* Section/group/card containers — transparent */
[class*="_panelContent_"] [class*="_section_"],
[class*="_panelContent_"] [class*="_group_"],
[class*="_panelContent_"] [class*="_card_"],
[class*="_panelContent_"] [class*="_emptyState_"],
[class*="_panelContentFull_"] [class*="_section_"],
[class*="_panelContentFull_"] [class*="_group_"],
[class*="_panelContentFull_"] [class*="_card_"],
[class*="_panelContentFull_"] [class*="_emptyState_"] {
  background: transparent;
}

/* Loom accordion sections */
[class*="_accordionSection_"],
[class*="_accordionBody_"],
[class*="_accordionBodyGen_"] {
  background: transparent;
}

/* ─────────────────────────────────────────────────────────
   MODALS: Frosted glass
   ───────────────────────────────────────────────────────── */

/* All modals — frosted glass */
[class*="_modal_"] {
  background: var(--ht-modal);
  border-color: var(--ht-modal-border);
}

/* Backdrops/overlays — tint + blur lives HERE only */
[class*="_overlay_"],
[class*="_backdrop_"] {
  background: var(--ht-modal-backdrop);
  backdrop-filter: blur(var(--ht-blur));
  -webkit-backdrop-filter: blur(var(--ht-blur));
}

/* Settings modal internals — transparent */
[class*="_modal_"]:has(> [class*="_body_"] > nav[class*="_sidebar_"]) [class*="_header_"],
[class*="_modal_"]:has(> [class*="_body_"] > nav[class*="_sidebar_"]) nav[class*="_sidebar_"],
[class*="_modal_"]:has(> [class*="_body_"] > nav[class*="_sidebar_"]) > [class*="_body_"] > [class*="_content_"] {
  background: transparent;
}

/* Settings nav — themed hover/active highlights */
[class*="_modal_"]:has(> [class*="_body_"] > nav[class*="_sidebar_"]) [class*="_navBtn_"]:hover {
  background: var(--ht-settings-nav-hover);
}

[class*="_modal_"]:has(> [class*="_body_"] > nav[class*="_sidebar_"]) [class*="_navBtnActive_"][class*="_navBtnActive_"],
[class*="_modal_"]:has(> [class*="_body_"] > nav[class*="_sidebar_"]) [class*="_navBtnActive_"][class*="_navBtnActive_"]:hover {
  background: var(--ht-settings-nav-active);
}


/* ─────────────────────────────────────────────────────────
   PANEL HEADER
   To change the header image, upload a replacement asset named drawerpanel.webp.
   ───────────────────────────────────────────────────────── */

[class*="_drawer_"]:has([data-spindle-mount="sidebar"]) [class*="_panelHeader_"] {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

[class*="_drawer_"]:has([data-spindle-mount="sidebar"]) [class*="_panelHeader_"]::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("./assets/drawerpanel.webp");
  background-position: center 10%;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: var(--ht-header-image-opacity);
  z-index: 0;
  pointer-events: none;
}

[class*="_drawer_"]:has([data-spindle-mount="sidebar"]) [class*="_panelTitle_"],
[class*="_drawer_"]:has([data-spindle-mount="sidebar"]) [class*="_panelHeader_"] button,
[class*="_drawer_"]:has([data-spindle-mount="sidebar"]) [class*="_panelHeader_"] svg {
  position: relative;
  z-index: 1;
}

/* ─────────────────────────────────────────────────────────
   CHAT INPUT AREA: Glass to match drawer
   ───────────────────────────────────────────────────────── */

[data-component="InputArea"] {
  --lcs-glass-bg: var(--ht-input-bg);
  border-color: var(--ht-input-border);
}

[data-component="InputArea"] textarea,
[data-component="InputArea"] input {
  font-size: calc(1em * var(--ht-chat-input-font-scale));
}


/* ─────────────────────────────────────────────────────────
   SCROLLBAR: Accent-tinted thin scrollbar
   ───────────────────────────────────────────────────────── */

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--ht-scrollbar);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--ht-scrollbar-hover);
}

/* ─────────────────────────────────────────────────────────
   TEXT SELECTION: Accent highlight
   ───────────────────────────────────────────────────────── */

::selection {
  background: var(--ht-text-selection) !important;
  color: inherit !important;
}

/* ─────────────────────────────────────────────────────────
   OPTIONAL PERSONAL TWEAKS
   Place custom CSS below
   ───────────────────────────────────────────────────────── */