/* ===================================================================
   Mac OS 9 "Platinum" theme for Mastodon — sharpened edition
   - Variable-driven palette (edit values in one place)
   - Adapts to light/dark via prefers-color-scheme
   - Contrast tuned for WCAG AA readability
   =================================================================== */

/* ---------- Palette: Platinum Day (light) ---------- */
:root {
  --desktop:      #6b7a91;   /* window-manager backdrop            */
  --window:       #dcdcdc;   /* chrome / panels                    */
  --content:      #f4f4f4;   /* reading surface (statuses, forms)  */
  --titlebar:     #cfcfcf;   /* column / drawer headers            */
  --field:        #ffffff;   /* text inputs                        */

  --ink:          #1a1a1a;   /* primary text                       */
  --ink-strong:   #000000;   /* bold text / titles                 */
  --ink-muted:    #4a4a4a;   /* timestamps, secondary text (AA)    */
  --ink-on-desk:  #f2f4f7;   /* text sitting on the desktop bg     */

  --link:         #14428f;   /* links (AA on --content)            */
  --link-name:    #0d3578;   /* display names                      */
  --accent:       #1a50a1;   /* selection / active accent          */
  --accent-ink:   #ffffff;

  /* Bevels — softened from pure black for a cleaner edge */
  --border:       #6f6f6f;
  --bevel-light:  #ffffff;
  --bevel-dark:   #8a8a8a;
  --scrollbar:    #cccccc;
  --scroll-thumb: #dcdcdc;
}

/* ---------- Palette: Platinum Night (dark) ---------- */
@media (prefers-color-scheme: dark) {
  :root {
    --desktop:      #23272f;
    --window:       #3a3f47;
    --content:      #30343b;
    --titlebar:     #454b55;
    --field:        #21242a;

    --ink:          #e9eaec;
    --ink-strong:   #ffffff;
    --ink-muted:    #aab2bd;   /* AA on --content                 */
    --ink-on-desk:  #e9eaec;

    --link:         #82b4ff;   /* light blue, AA on dark          */
    --link-name:    #9cc4ff;
    --accent:       #2e6bd6;
    --accent-ink:   #ffffff;

    --border:       #14171c;
    --bevel-light:  rgba(255, 255, 255, 0.14);
    --bevel-dark:   rgba(0, 0, 0, 0.55);
    --scrollbar:    #2b2f36;
    --scroll-thumb: #454b55;
  }
}

/* ---------- Base ---------- */
body {
  background-color: var(--desktop) !important;
  background-image: none !important;
  color: var(--ink) !important;
  font-family: "Lucida Grande", "Segoe UI", Tahoma, sans-serif !important;
}

.ui__header__logo {
  filter: grayscale(100%) opacity(0.85) !important;
}

.columns-area,
.columns-area__panels__main,
.columns-area__panels__pane__inner {
  background: transparent !important;
}

/* ---------- Windows / Columns ---------- */
.column,
.drawer,
.tabs-bar__wrapper,
.search,
.modal-root__modal {
  background-color: var(--window) !important;
  color: var(--ink) !important;
  border: 1px solid var(--border) !important;
  box-shadow: inset 1px 1px 0 var(--bevel-light),
              inset -1px -1px 0 var(--bevel-dark) !important;
  margin-right: 5px !important;
  border-radius: 0 !important;
}

/* ---------- Title bars ---------- */
.column-header,
.drawer__header,
.tabs-bar {
  background-color: var(--titlebar) !important;
  border-bottom: 1px solid var(--border) !important;
  color: var(--ink-strong) !important;
  border-radius: 0 !important;
  box-shadow: inset 1px 1px 0 var(--bevel-light) !important;
}

.column-header__title,
.column-header > button,
.drawer__header a {
  background-color: var(--titlebar) !important;
  color: var(--ink-strong) !important;
  padding: 5px 15px !important;
  font-weight: bold !important;
  border: none !important;
  text-shadow: none !important;
}

.column-header__buttons button,
.column-header__back-button {
  background-color: var(--window) !important;
  border: 1px solid var(--border) !important;
  box-shadow: inset 1px 1px 0 var(--bevel-light),
              inset -1px -1px 0 var(--bevel-dark) !important;
  color: var(--ink) !important;
  margin: 2px !important;
  border-radius: 0 !important;
}

/* ---------- Posts / Statuses ---------- */
.status {
  border-bottom: 1px solid var(--border) !important;
  background-color: var(--content) !important;
  color: var(--ink) !important;
}
.status__content,
.status__content p,
.reply-indicator__content {
  color: var(--ink) !important;
}
.status__display-name,
.display-name__html,
.account__display-name strong {
  color: var(--link-name) !important;
}
.status__relative-time,
.display-name__account,
.status__display-name .display-name__account {
  color: var(--ink-muted) !important;
}

/* Notifications & account rows share the reading surface */
.notification,
.account,
.account__section-headline,
.dropdown-menu {
  background-color: var(--content) !important;
  color: var(--ink) !important;
}

/* ---------- Text and links ---------- */
a,
.status__content a,
.reply-indicator__content a {
  color: var(--link) !important;
  text-decoration: none !important;
}
a:hover {
  text-decoration: underline !important;
}
.status__content a.mention,
.status__content a.hashtag {
  color: var(--link) !important;
  font-weight: bold !important;
}

/* ---------- Buttons ---------- */
.button,
.btn,
button.icon-button {
  background-color: var(--window) !important;
  color: var(--ink) !important;
  border: 1px solid var(--border) !important;
  box-shadow: inset 1px 1px 0 var(--bevel-light),
              inset -1px -1px 0 var(--bevel-dark) !important;
  border-radius: 0 !important;
  font-weight: bold !important;
  text-shadow: none !important;
  padding: 5px 10px !important;
}
.button:hover,
.btn:hover {
  background-color: var(--titlebar) !important;
}
.button:active,
.btn:active {
  box-shadow: inset 1px 1px 0 var(--bevel-dark),
              inset -1px -1px 0 var(--bevel-light) !important;
  background-color: var(--titlebar) !important;
}
/* Primary action button (Publish) gets the accent */
.button.button--block,
.compose-form .button.button--block {
  background-color: var(--accent) !important;
  color: var(--accent-ink) !important;
}

/* ---------- Inputs ---------- */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
textarea,
.search__input,
.compose-form .autosuggest-textarea__textarea {
  background-color: var(--field) !important;
  color: var(--ink) !important;
  border: 1px solid var(--border) !important;
  box-shadow: inset 1px 1px 0 var(--bevel-dark),
              inset -1px -1px 0 var(--bevel-light) !important;
  border-radius: 0 !important;
}
::placeholder {
  color: var(--ink-muted) !important;
}

/* ---------- Compose form ---------- */
.compose-form {
  background-color: var(--window) !important;
  color: var(--ink) !important;
  padding: 10px !important;
}

/* ---------- Navigation & tabs ---------- */
.tabs-bar__link {
  color: var(--ink) !important;
  border-right: 1px solid var(--border) !important;
  box-shadow: inset 1px 0 0 var(--bevel-light) !important;
}
.tabs-bar__link.active {
  background-color: var(--content) !important;
  color: var(--ink-strong) !important;
  border-bottom: 2px solid var(--accent) !important;
}

/* ---------- Modals ---------- */
.modal-root__modal {
  box-shadow: inset 1px 1px 0 var(--bevel-light),
              inset -1px -1px 0 var(--bevel-dark),
              4px 4px 12px rgba(0, 0, 0, 0.5) !important;
}

/* ---------- Scrollbars ---------- */
::-webkit-scrollbar {
  width: 16px !important;
  background-color: var(--scrollbar) !important;
  border-left: 1px solid var(--border) !important;
}
::-webkit-scrollbar-thumb {
  background-color: var(--scroll-thumb) !important;
  border: 1px solid var(--border) !important;
  box-shadow: inset 1px 1px 0 var(--bevel-light),
              inset -1px -1px 0 var(--bevel-dark) !important;
}