/* RefHub Brand Design Tokens
   Source of truth for brand colours, typography, and component styles.
   Use these CSS custom properties throughout the app - never hard-code hex values. */

:root {
  /* Brand palette */
  --brand-navy:       #0E1E40;
  --brand-navy-deep:  #081530;
  --brand-blue:       #1FA8E5;
  --brand-blue-deep:  #1488C0;
  --brand-paper:      #F5F2EB;
  --brand-paper-cool: #EEF1F5;

  /* Type families */
  --brand-font-display: 'Avenir Next', 'Avenir', 'Nunito Sans', system-ui, sans-serif;
  --brand-font-ui:      'Sora', system-ui, sans-serif;
  --brand-font-mono:    'IBM Plex Mono', ui-monospace, monospace;
}

/* Brand Lockup Component */
.brand-lockup {
  --lockup-w: 320px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--lockup-w) * 0.04);
  width: var(--lockup-w);
}

.brand-lockup__mark {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
}

.brand-lockup__divider {
  width: 100%;
  height: max(3px, calc(var(--lockup-w) * 0.012));
  background: var(--brand-blue);
  border-radius: 999px;
}

.brand-lockup__wordmark {
  width: 100%;
  display: flex;
  justify-content: space-between;
  font-family: var(--brand-font-display);
  font-weight: 600;
  font-size: calc(var(--lockup-w) * 0.205);
  line-height: 1;
  text-transform: uppercase;
  color: inherit;
}

/* Solo variant - wordmark only */
.brand-lockup-solo {
  display: inline-block;
  font-family: var(--brand-font-display);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.28em;
  padding-right: 0.28em;
  text-transform: uppercase;
  color: inherit;
}

/* Dot System - brand element for connecting concepts */
.brand-dot {
  display: inline-block;
  width: 0.28em;
  height: 0.28em;
  border-radius: 999px;
  background: var(--brand-blue);
  vertical-align: middle;
  margin: 0 0.5em;
}

.dot-separator::before {
  content: "·";
  color: var(--brand-blue);
  margin: 0 0.4em;
  font-weight: 700;
}

/* Brand Button Styles */
.btn-brand-primary {
  background: var(--brand-blue);
  color: var(--brand-navy);
  font-family: var(--brand-font-ui);
  font-weight: 600;
  padding: 12px 22px;
  border-radius: 6px;
  border: 0;
  cursor: pointer;
  transition: background 120ms ease;
}

.btn-brand-primary:hover {
  background: var(--brand-blue-deep);
  color: var(--brand-paper);
}

.btn-brand-ghost {
  background: transparent;
  color: var(--brand-paper);
  border: 1px solid rgba(245, 242, 235, 0.25);
  font-family: var(--brand-font-ui);
  font-weight: 600;
  padding: 12px 22px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}

.btn-brand-ghost:hover {
  background: rgba(245, 242, 235, 0.1);
  border-color: rgba(245, 242, 235, 0.4);
}

/* Sidebar Collapse Styles */
#sidebar.sidebar-collapsed nav a {
  justify-content: center;
  padding-left: 0;
  padding-right: 0;
}

#sidebar.sidebar-collapsed nav a .sidebar-label {
  display: none;
}

#sidebar.sidebar-collapsed nav a span.flex {
  justify-content: center;
}

#sidebar.sidebar-collapsed .sidebar-section {
  display: none;
}

#sidebar.sidebar-collapsed .sidebar-completion-prompt {
  display: none;
}

/* Badges become small dots positioned on the icon when collapsed */
#sidebar.sidebar-collapsed nav a,
#sidebar.sidebar-collapsed nav a > span.flex {
  position: relative;
}

#sidebar.sidebar-collapsed .sidebar-badge {
  position: absolute;
  top: 4px;
  left: 50%;
  transform: translateX(4px);
  width: 10px;
  height: 10px;
  min-width: 10px;
  padding: 0;
  font-size: 0;
  margin: 0;
  border: 2px solid white;
}