/* =========================================================
   Social Modern UI — LIGHT (Mastodon) — Admin → Custom CSS
   Target: Mastodon 4.5.x web UI
   Notes: designed for light look; works best if users pick a light theme
   ========================================================= */

/* 0) Light tokens */
:root {
  --m-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji";
  --m-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", "Courier New", monospace;

  --m-radius: 18px;
  --m-radius-sm: 14px;
  --m-pill: 999px;

  --m-bg: #f7f8fb;
  --m-surface: rgba(255, 255, 255, 0.92);
  --m-card: rgba(255, 255, 255, 0.98);
  --m-card-hover: rgba(255, 255, 255, 1);

  --m-border: rgba(15, 23, 42, 0.10);
  --m-border-strong: rgba(15, 23, 42, 0.14);

  --m-shadow: 0 12px 28px rgba(15, 23, 42, 0.10);
  --m-shadow-soft: 0 6px 18px rgba(15, 23, 42, 0.08);

  --m-text: rgba(15, 23, 42, 0.92);
  --m-text-soft: rgba(15, 23, 42, 0.74);
  --m-text-muted: rgba(15, 23, 42, 0.58);

  /* Accent (change if you want) */
  --m-accent: #2563eb;        /* modern blue */
  --m-accent-strong: #1d4ed8;
  --m-focus: rgba(37, 99, 235, 0.18);
}

/* 1) Background & base typography */
html, body, .app-holder, .app-body {
  font-family: var(--m-font) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Make the overall canvas feel light */
body {
  background: var(--m-bg) !important;
}

/* Improve readability */
.status__content,
.reply-indicator__content,
.detailed-status__content {
  font-size: 15px !important;
  line-height: 1.58 !important;
  letter-spacing: 0.1px;
  color: var(--m-text) !important;
}

.display-name__account,
.status__relative-time,
.notification__message,
.detailed-status__meta,
.status__prepend {
  color: var(--m-text-muted) !important;
}

code, pre, .code {
  font-family: var(--m-font-mono) !important;
  font-size: 13px !important;
}

/* 2) Modern “cards” for feed items */
.status,
.notification,
.detailed-status,
.reply-indicator,
.announcement,
.announcements__item {
  background: var(--m-card) !important;
  border: 1px solid var(--m-border) !important;
  border-radius: var(--m-radius) !important;
  box-shadow: var(--m-shadow-soft);
}

.status:hover,
.notification:hover,
.detailed-status:hover,
.reply-indicator:hover {
  background: var(--m-card-hover) !important;
  border-color: var(--m-border-strong) !important;
  box-shadow: var(--m-shadow);
}

/* Feed-like spacing */
.status,
.notification {
  margin: 10px 10px !important;
  padding: 12px 12px !important;
}

/* 3) Panels / columns: make them airy */
.column,
.drawer__inner,
.columns-area__panels__pane__inner {
  background: transparent !important;
}

.column-header,
.column-header__collapsible,
.drawer__header {
  border-bottom: 1px solid var(--m-border) !important;
}

/* 4) Avatars + media polish */
.account__avatar,
.status__avatar .account__avatar,
.notification__avatar .account__avatar {
  border-radius: 14px !important;
}

.media-gallery,
.media-gallery__item,
.audio-player,
.video-player,
.attachment-list,
.spoiler-button {
  border-radius: var(--m-radius) !important;
  overflow: hidden;
}

.media-gallery__item a,
.media-gallery__item img {
  border-radius: inherit !important;
}

/* 5) Inputs + compose: clean and modern */
.compose-form,
.compose-form__autosuggest-wrapper,
.compose-form__modifiers,
.compose-panel .search {
  border-radius: var(--m-radius) !important;
}

.compose-form {
  background: var(--m-surface) !important;
  border: 1px solid var(--m-border) !important;
  box-shadow: var(--m-shadow-soft);
}

input, textarea, select,
.compose-form textarea,
.compose-form input,
.search__input {
  border-radius: var(--m-radius-sm) !important;
}

/* 6) Buttons: pill, modern hover */
.button,
.icon-button,
.text-btn,
.compose-form__publish button,
button.button {
  border-radius: var(--m-pill) !important;
}

.button,
button.button,
.compose-form__publish button {
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.10);
  transition: transform 140ms ease, box-shadow 140ms ease, filter 140ms ease;
}

.button:hover,
button.button:hover,
.compose-form__publish button:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.14);
  filter: brightness(1.02);
}

/* Accent-like feel for primary actions */
.compose-form__publish .button,
.compose-form__publish button,
.button.button--block {
  border: 1px solid var(--m-border-strong) !important;
}

/* 7) Focus rings (keyboard friendly) */
.button:focus,
button.button:focus,
.icon-button:focus,
.text-btn:focus,
a:focus,
input:focus,
textarea:focus,
select:focus {
  outline: none !important;
  box-shadow: 0 0 0 4px var(--m-focus) !important;
}

/* 8) Links & accents */
a,
.status__content a,
.detailed-status__content a {
  text-decoration: none !important;
}

a:hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

/* 9) Softer scrollbars (when enabled) */
.custom-scrollbars ::-webkit-scrollbar {
  width: 10px;
}
.custom-scrollbars ::-webkit-scrollbar-thumb {
  border-radius: var(--m-pill);
}

/* 10) Reduce motion if user prefers */
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}