/* ================================
   IMPORT GOOGLE FONT: SORA
   ================================ */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700&display=swap');

/* ================================
   APPLY FONT GLOBALLY
   ================================ */
html, body,
button, input, textarea,
.column, .drawer, .status,
.compose-form__publish-button,
.column-header__title,
.status__display-name,
.navigation-panel,
.drawer__header,
.account__header,
.notification__message {
  font-family: "Sora", system-ui, -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
}

/* Make sure toot content also uses Sora */
.status__content,
.status__content p,
.status__content span {
  font-family: "Sora", sans-serif !important;
}

/* ================================
   COLOR VARIABLES
   ================================ */
:root {
  --brand-red: #C8102E;
  --brand-blue: #00205B;
}

/* ================================
   LINKS
   ================================ */
a {
  color: var(--brand-blue) !important;
}
a:hover {
  color: var(--brand-red) !important;
}

/* ================================
   HEADERS & TITLES
   ================================ */
.column-header__title,
.drawer__header,
.status__display-name strong {
  color: var(--brand-blue) !important;
}

/* ================================
   BUTTONS
   ================================ */
.button,
.compose-form__publish-button {
  background: var(--brand-red) !important;
  color: #ffffff !important;
  border: none !important;
}

.button:hover,
.compose-form__publish-button:hover {
  background: #e01f3c !important; /* slightly brighter red */
}

/* Secondary buttons */
.button--secondary {
  background: var(--brand-blue) !important;
  color: #ffffff !important;
}

.button--secondary:hover {
  background: #003b8f !important;
}

/* ================================
   INTERACTION ICONS
   ================================ */
.icon-button--favourite.active {
  color: var(--brand-red) !important;
}

.icon-button--boost.active {
  color: var(--brand-blue) !important;
}

/* ================================
   INPUT FIELDS (keep light, add accents)
   ================================ */
input:focus,
textarea:focus {
  border-color: var(--brand-blue) !important;
  box-shadow: 0 0 0 2px rgba(0, 32, 91, 0.25) !important;
}

/* ================================
   BORDERS & HIGHLIGHTS
   ================================ */
.column,
.drawer,
.status {
  border-color: rgba(0, 32, 91, 0.15) !important;
}

.column-header {
  border-bottom: 2px solid var(--brand-blue) !important;
}