/* Helios One brand — tokens + lockup component.
   One mark, one wordmark; only ink changes between themes.
   Muted values are literal — never derived via opacity/color-mix.
   Green is status only and never appears in the logo. */
:root {
  --hl-bg:        #0A0D0C;
  --hl-surface:   #0A0D0C;
  --hl-surface-2: #0F1412;  /* raised surface: inputs, wells */
  --hl-ink:       #F2F4F3;  /* mark + "Helios" */
  --hl-muted:     #7C867F;  /* " One", inactive nav */
  --hl-hairline:  #1C2321;
  --hl-status:    #35D68F;  /* armed */
  --hl-mint:      #35D68F;  /* interactive accent (buttons, focus) */
  --hl-danger:    #E5484D;
}
[data-theme="light"], .hl-theme-light {
  --hl-bg:        #F7F7F5;
  --hl-surface:   #FFFFFF;
  --hl-surface-2: #FFFFFF;
  --hl-ink:       #0A0D0C;
  --hl-muted:     #5F6763;
  --hl-hairline:  #DEDED8;
  --hl-status:    #1F8F65;
  --hl-mint:      #1F8F65;
  --hl-danger:    #B3261E;
}
.hl-theme-dark {
  --hl-bg:        #0A0D0C;
  --hl-surface:   #0A0D0C;
  --hl-surface-2: #0F1412;
  --hl-ink:       #F2F4F3;
  --hl-muted:     #7C867F;
  --hl-hairline:  #1C2321;
  --hl-status:    #35D68F;
  --hl-mint:      #35D68F;
  --hl-danger:    #E5484D;
}

/* Component. Sizing custom props are set inline by the lockup() macro. */
.helios-lockup {
  display: inline-flex;
  align-items: center;
  gap: var(--hl-gap);
  color: var(--hl-ink);
  line-height: 1;
  white-space: nowrap;
  /* clear space: 14% of mark width on all sides */
  padding: calc(var(--hl-mark) * 0.14);
  user-select: none;
}
.helios-lockup--stacked { flex-direction: column; }
.helios-lockup .hl-mark {
  width: var(--hl-mark);
  height: var(--hl-mark);   /* always square, never stretched */
  display: block;
  flex: none;
}
.hl-word {
  font-family: 'Instrument Sans', -apple-system, system-ui, sans-serif;
  font-weight: 600;
  font-size: var(--hl-word);
  letter-spacing: var(--hl-ls);
  color: var(--hl-ink);
  line-height: 1;
}
.hl-one {
  font-weight: 500;
  color: var(--hl-muted);
}

/* Brand header slot: 56px tall, hairline below, 20px horizontal padding */
.hl-header {
  display: flex;
  align-items: center;
  height: 56px;
  padding: 0 20px;
  border-bottom: 1px solid var(--hl-hairline);
}