/* aren.dev Element Web branding */

/* ============ COMPOUND DESIGN TOKEN OVERRIDES ============ */
/* These override Element's design system at the root level */
:root, body, .cpd-theme-dark {
  /* Backgrounds */
  --cpd-color-bg-canvas-default: #1a1714 !important;
  --cpd-color-bg-canvas-disabled: #1f1c16 !important;
  --cpd-color-bg-subtle-primary: #242019 !important;
  --cpd-color-bg-subtle-secondary: #1f1c16 !important;
  --cpd-color-bg-action-primary-rest: #c4956a !important;
  --cpd-color-bg-action-primary-hovered: #d4a87a !important;
  --cpd-color-bg-action-primary-pressed: #b8895e !important;
  --cpd-color-bg-action-primary-disabled: #6a5a48 !important;
  --cpd-color-bg-action-secondary-rest: #1a1714 !important;
  --cpd-color-bg-action-secondary-hovered: #242019 !important;
  --cpd-color-bg-action-secondary-pressed: #2e2a24 !important;
  --cpd-color-bg-action-tertiary-hovered: #242019 !important;
  --cpd-color-bg-action-tertiary-rest: transparent !important;
  --cpd-color-bg-action-tertiary-selected: #242019 !important;
  --cpd-color-bg-accent-rest: #c4956a !important;
  --cpd-color-bg-accent-hovered: #d4a87a !important;
  --cpd-color-bg-accent-pressed: #b8895e !important;
  --cpd-color-bg-accent-selected: rgba(196, 149, 106, 0.15) !important;
  --cpd-color-bg-badge-accent: rgba(196, 149, 106, 0.25) !important;
  --cpd-color-bg-badge-default: rgba(154, 144, 130, 0.25) !important;
  --cpd-color-bg-info-subtle: rgba(196, 149, 106, 0.1) !important;
  --cpd-color-bg-success-subtle: rgba(106, 196, 130, 0.1) !important;

  /* Text */
  --cpd-color-text-primary: #e8e0d4 !important;
  --cpd-color-text-secondary: #9a9082 !important;
  --cpd-color-text-disabled: #6a6258 !important;
  --cpd-color-text-action-primary: #e8e0d4 !important;
  --cpd-color-text-action-accent: #c4956a !important;
  --cpd-color-text-link-external: #c4956a !important;
  --cpd-color-text-on-solid-primary: #1a1714 !important;
  --cpd-color-text-badge-accent: #c4956a !important;

  /* Borders */
  --cpd-color-border-interactive-primary: #2e2a24 !important;
  --cpd-color-border-interactive-secondary: #3e3a34 !important;
  --cpd-color-border-interactive-hovered: #c4956a !important;
  --cpd-color-border-disabled: #2e2a24 !important;
  --cpd-color-border-focused: #c4956a !important;
  --cpd-color-border-accent-subtle: rgba(196, 149, 106, 0.3) !important;

  /* Icons */
  --cpd-color-icon-primary: #e8e0d4 !important;
  --cpd-color-icon-secondary: #9a9082 !important;
  --cpd-color-icon-tertiary: #6a6258 !important;
  --cpd-color-icon-accent-primary: #c4956a !important;
  --cpd-color-icon-accent-tertiary: rgba(196, 149, 106, 0.4) !important;
  --cpd-color-icon-on-solid-primary: #1a1714 !important;
  --cpd-color-icon-disabled: #4a4238 !important;
  --cpd-color-icon-primary-alpha: rgba(232, 224, 212, 0.9) !important;
  --cpd-color-icon-secondary-alpha: rgba(154, 144, 130, 0.9) !important;
  --cpd-color-icon-tertiary-alpha: rgba(106, 98, 88, 0.9) !important;

  /* Legacy theme variable */
  --cpd-color-theme-bg: #1a1714 !important;

  /* Gray scale - warm tinted */
  --cpd-color-gray-100: #1a1714 !important;
  --cpd-color-gray-200: #1f1c16 !important;
  --cpd-color-gray-300: #242019 !important;
  --cpd-color-gray-400: #2e2a24 !important;
  --cpd-color-gray-500: #3e3a34 !important;
  --cpd-color-gray-600: #4a4238 !important;
  --cpd-color-gray-700: #5a5248 !important;
  --cpd-color-gray-800: #6a6258 !important;
  --cpd-color-gray-900: #9a9082 !important;
  --cpd-color-gray-1000: #aaa294 !important;
  --cpd-color-gray-1100: #beb6a8 !important;
  --cpd-color-gray-1200: #d4ccc0 !important;
  --cpd-color-gray-1300: #e0d8cc !important;
  --cpd-color-gray-1400: #e8e0d4 !important;

  /* Alpha grays - warm tinted */
  --cpd-color-alpha-gray-200: rgba(232, 224, 212, 0.04) !important;
  --cpd-color-alpha-gray-300: rgba(232, 224, 212, 0.08) !important;
  --cpd-color-alpha-gray-400: rgba(232, 224, 212, 0.12) !important;
  --cpd-color-alpha-gray-500: rgba(232, 224, 212, 0.16) !important;
  --cpd-color-alpha-gray-600: rgba(232, 224, 212, 0.2) !important;
  --cpd-color-alpha-gray-800: rgba(232, 224, 212, 0.32) !important;
  --cpd-color-alpha-gray-900: rgba(232, 224, 212, 0.46) !important;
  --cpd-color-alpha-gray-1000: rgba(232, 224, 212, 0.58) !important;
  --cpd-color-alpha-gray-1100: rgba(232, 224, 212, 0.7) !important;
  --cpd-color-alpha-gray-1200: rgba(232, 224, 212, 0.82) !important;
  --cpd-color-alpha-gray-1300: rgba(232, 224, 212, 0.9) !important;
  --cpd-color-alpha-gray-1400: rgba(232, 224, 212, 0.97) !important;

  /* Green accent → amber accent */
  --cpd-color-green-100: #2a2218 !important;
  --cpd-color-green-200: #332a1c !important;
  --cpd-color-green-300: #3d3220 !important;
  --cpd-color-green-400: rgba(196, 149, 106, 0.15) !important;
  --cpd-color-green-500: rgba(196, 149, 106, 0.25) !important;
  --cpd-color-green-600: rgba(196, 149, 106, 0.35) !important;
  --cpd-color-green-700: #8a7050 !important;
  --cpd-color-green-800: #a08060 !important;
  --cpd-color-green-900: #c4956a !important;
  --cpd-color-green-1000: #d4a87a !important;
  --cpd-color-green-1100: #b8895e !important;
  --cpd-color-green-1200: #e0c0a0 !important;
  --cpd-color-green-1300: #e8d0b0 !important;
  --cpd-color-green-1400: #f0e0c8 !important;

  --cpd-color-alpha-green-300: rgba(196, 149, 106, 0.1) !important;
  --cpd-color-alpha-green-400: rgba(196, 149, 106, 0.15) !important;
  --cpd-color-alpha-green-500: rgba(196, 149, 106, 0.25) !important;
  --cpd-color-alpha-green-600: rgba(196, 149, 106, 0.35) !important;
}

/* ============ FONT OVERRIDES ============ */
body,
.mx_Dialog,
.mx_RoomView,
.mx_LeftPanel,
.mx_RoomHeader,
.mx_MessageComposer,
.mx_UserMenu,
.mx_SpacePanel,
.mx_AuthPage,
.mx_AuthBody,
.mx_SearchBar,
.mx_Toast_toast,
.mx_ContextMenu,
.mx_GenericEventListSummary,
[data-viewport-type],
[role="search"],
input,
textarea,
select,
button {
  font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

/* Mono font for code, tech, and specific UI elements */
code,
pre,
.mx_EventTile_body code,
.mx_EventTile_body pre,
.mx_Pill,
.mx_TextualEvent,
.mx_SenderProfile_name,
kbd {
  font-family: 'Geist Mono', 'SF Mono', 'Fira Code', monospace !important;
}

/* ============ GLOBAL COLOR OVERRIDES ============ */
::selection {
  background: #c4956a !important;
  color: #1a1714 !important;
}

/* Scrollbar styling */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

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

::-webkit-scrollbar-thumb {
  background: #2e2a24;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: #3e3a34;
}

/* ============ AUTH PAGE ============ */

/* Background */
.mx_AuthPage {
  background: #1a1714 !important;
  min-height: 100vh;
  padding: 0 !important;
}

/* Hide the default Element logo on auth page */
.mx_AuthPage .mx_AuthHeader .mx_AuthHeaderLogo,
.mx_AuthPage .mx_AuthHeader img,
.mx_AuthHeader img[alt="Element"],
.mx_AuthHeader img[alt="Matrix"] {
  display: none !important;
}

/* Insert custom branding text via the header */
.mx_AuthHeader {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 32px 0 16px !important;
}

.mx_AuthHeader::after {
  content: 'aren.dev';
  font-family: 'Geist Mono', monospace;
  font-size: 1.25rem;
  font-weight: 500;
  color: #e8e0d4;
  letter-spacing: -0.02em;
}

/* Auth modal/card styling */
.mx_AuthPage_modal,
.mx_AuthPage_modalBlur {
  background: #1a1714 !important;
  box-shadow: none !important;
  max-width: 100% !important;
}

.mx_AuthBody {
  background: #242019 !important;
  border: 1px solid #2e2a24 !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  padding: 28px !important;
  max-width: 100% !important;
}

/* Auth input fields */
.mx_AuthBody input[type="text"],
.mx_AuthBody input[type="password"],
.mx_AuthBody .mx_Field input,
.mx_AuthBody .mx_Field textarea {
  background: #1a1714 !important;
  border: 1px solid #2e2a24 !important;
  color: #e8e0d4 !important;
  border-radius: 3px !important;
  font-family: 'Geist', sans-serif !important;
  font-size: 16px !important;
}

.mx_AuthBody input:focus,
.mx_AuthBody .mx_Field input:focus {
  border-color: #c4956a !important;
  box-shadow: none !important;
  outline: none !important;
}

.mx_AuthBody .mx_Field label {
  color: #9a9082 !important;
  font-family: 'Geist', sans-serif !important;
}

/* Primary buttons - accent color */
.mx_AuthBody .mx_Login_submit,
.mx_Login_submit,
.mx_AccessibleButton_kind_primary,
.mx_Dialog_primary {
  background-color: #c4956a !important;
  color: #1a1714 !important;
  border: none !important;
  border-radius: 3px !important;
  font-family: 'Geist', sans-serif !important;
  font-weight: 500 !important;
  transition: background-color 0.15s ease !important;
}

.mx_Login_submit:hover,
.mx_AccessibleButton_kind_primary:hover,
.mx_Dialog_primary:hover {
  background-color: #d4a87a !important;
}

/* Hide "powered by Matrix" footer */
.mx_AuthFooter,
.mx_AuthPage_footer {
  display: none !important;
}

/* Auth page links */
.mx_AuthBody a,
.mx_AuthBody .mx_AccessibleButton_kind_link {
  color: #9a9082 !important;
}

.mx_AuthBody a:hover,
.mx_AuthBody .mx_AccessibleButton_kind_link:hover {
  color: #c4956a !important;
}

/* Server picker on auth page */
.mx_ServerPicker {
  background: transparent !important;
  border-color: #2e2a24 !important;
}

.mx_ServerPicker_server {
  color: #e8e0d4 !important;
}

/* Registration token field */
.mx_AuthBody .mx_RegistrationToken input {
  background: #1a1714 !important;
  border-color: #2e2a24 !important;
  color: #e8e0d4 !important;
}

/* Auth page welcome/info text */
.mx_AuthBody h1,
.mx_AuthBody h2,
.mx_AuthBody h3 {
  color: #e8e0d4 !important;
  font-family: 'Geist', sans-serif !important;
}

.mx_AuthBody p,
.mx_AuthBody span,
.mx_AuthBody .mx_Login_type_container {
  color: #9a9082 !important;
}

/* Tab bar on auth (sign in / create account) */
.mx_AuthBody .mx_AuthBody_loginRegister {
  color: #9a9082 !important;
}

.mx_AuthBody .mx_AuthBody_loginRegister a {
  color: #c4956a !important;
}

/* ============ MAIN APP OVERRIDES ============ */

/* Left panel / sidebar */
.mx_LeftPanel,
.mx_SpacePanel {
  background-color: #161411 !important;
}

.mx_LeftPanel_filterContainer {
  background-color: #161411 !important;
}

/* Room list hover */
.mx_RoomTile:hover {
  background-color: #242019 !important;
}

.mx_RoomTile_selected,
.mx_RoomTile[aria-selected="true"] {
  background-color: #242019 !important;
}

/* Room header */
.mx_RoomHeader {
  border-bottom: 1px solid #2e2a24 !important;
}

/* Message composer */
.mx_MessageComposer {
  border-top: 1px solid #2e2a24 !important;
}

.mx_BasicMessageComposer_input,
.mx_SendMessageComposer {
  font-family: 'Geist', sans-serif !important;
}

/* Message content */
.mx_EventTile_body {
  font-family: 'Geist', sans-serif !important;
}

/* Links in chat */
.mx_EventTile_body a {
  color: #c4956a !important;
}

/* Notification badges */
.mx_NotificationBadge {
  background-color: #c4956a !important;
}

/* ============ DIALOG OVERRIDES ============ */
.mx_Dialog {
  background: #242019 !important;
  border: 1px solid #2e2a24 !important;
  border-radius: 4px !important;
}

.mx_Dialog_background {
  background-color: rgba(0, 0, 0, 0.6) !important;
}

/* ============ MISC ============ */

/* Remove heavy box-shadows everywhere */
.mx_AuthBody,
.mx_Dialog,
.mx_ContextMenu,
.mx_Toast_toast {
  box-shadow: none !important;
}

/* Tooltips */
.mx_Tooltip {
  background: #242019 !important;
  border: 1px solid #2e2a24 !important;
  color: #e8e0d4 !important;
  border-radius: 3px !important;
  box-shadow: none !important;
}

/* User info panel */
.mx_RightPanel {
  border-left: 1px solid #2e2a24 !important;
}

/* Timeline separator lines */
.mx_TimelineSeparator {
  color: #9a9082 !important;
}

/* Settings */
.mx_TabbedView_tabPanel {
  background: #1a1714 !important;
}

/* Toast notifications */
.mx_Toast_toast {
  background: #242019 !important;
  border: 1px solid #2e2a24 !important;
}

/* Typing indicator */
.mx_WhoIsTypingTile {
  color: #9a9082 !important;
}

/* Search */
.mx_SearchBar input {
  background: #1a1714 !important;
  border-color: #2e2a24 !important;
  color: #e8e0d4 !important;
}

.mx_SearchBar input:focus {
  border-color: #c4956a !important;
}

/* Empty room placeholder */
.mx_RoomView_MessageList_empty {
  color: #9a9082 !important;
}

/* ============ MOBILE / RESPONSIVE ============ */
@media (max-width: 768px) {

  /* Auth page - full bleed on mobile */
  .mx_AuthPage {
    padding: 0 !important;
    background: #1a1714 !important;
  }

  .mx_AuthPage_modal,
  .mx_AuthPage_modalBlur {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    border-radius: 0 !important;
    background: #1a1714 !important;
  }

  .mx_AuthHeader {
    padding: 24px 0 12px !important;
  }

  .mx_AuthHeader::after {
    font-size: 1.125rem;
  }

  .mx_AuthBody {
    margin: 0 16px !important;
    padding: 20px !important;
    border-radius: 4px !important;
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* Prevent horizontal overflow on auth form */
  .mx_AuthBody form,
  .mx_AuthBody .mx_Field,
  .mx_AuthBody input,
  .mx_AuthBody button,
  .mx_AuthBody .mx_Login_submit,
  .mx_AuthBody .mx_ServerPicker {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .mx_AuthBody .mx_Login_submit,
  .mx_AuthBody button[type="submit"] {
    width: 100% !important;
    padding: 12px !important;
    font-size: 0.9375rem !important;
  }

  /* Server picker compact on mobile */
  .mx_ServerPicker {
    margin: 0 0 16px 0 !important;
  }

  /* Main app - sidebar full screen on mobile */
  .mx_LeftPanel,
  .mx_SpacePanel {
    background-color: #161411 !important;
  }

  /* Room view fills screen */
  .mx_RoomView {
    background: #1a1714 !important;
  }

  /* Composer input - comfortable touch target */
  .mx_MessageComposer .mx_BasicMessageComposer_input {
    font-size: 16px !important;
    min-height: 40px !important;
  }

  /* Room header compact */
  .mx_RoomHeader {
    padding: 8px 12px !important;
  }

  /* Dialog full-width on mobile */
  .mx_Dialog {
    margin: 12px !important;
    max-width: calc(100vw - 24px) !important;
    max-height: calc(100vh - 24px) !important;
    border-radius: 4px !important;
  }

  /* Toast at top, full width */
  .mx_Toast_toast {
    max-width: calc(100vw - 32px) !important;
  }

  /* Settings page scrollable */
  .mx_TabbedView {
    overflow-y: auto !important;
  }

  /* Right panel full screen on mobile */
  .mx_RightPanel {
    border-left: none !important;
    background: #1a1714 !important;
  }
}

@media (max-width: 480px) {

  .mx_AuthHeader {
    padding: 20px 0 8px !important;
  }

  .mx_AuthHeader::after {
    font-size: 1rem;
  }

  .mx_AuthBody {
    margin: 0 12px !important;
    padding: 16px !important;
  }

  .mx_AuthBody h2 {
    font-size: 1.125rem !important;
  }

  /* Tighter spacing on small phones */
  .mx_AuthBody .mx_Field {
    margin-bottom: 12px !important;
  }

  .mx_Dialog {
    margin: 8px !important;
    max-width: calc(100vw - 16px) !important;
    padding: 16px !important;
  }
}