/*
  theme-title: Sunset (light)
  theme-description: Official light orange/yellow theme.
*/

:root {
  /* Define our palette */
  --eggshell: #fff6eb;
  --yellow: #FFAF45;
  --orange: #FB6D48;
  --pink: #D74B76;
  --eggplant1: #5c385e;
  --eggplant2: #523254;
  --eggplant3: #482c49;
  --eggplant4: #29192a;

  /* Restyle basic colors */
  --white1: var(--eggshell);
  --white2: var(--yellow);
  --blue2: var(--eggplant1);
  --blue3: var(--eggplant2);
  --blue4: var(--eggplant3);
  --orange2: var(--pink);

  /* Basic page styling (background + foreground) */
  --bg: linear-gradient(var(--eggplant1), var(--pink), var(--orange), var(--yellow), var(--eggshell));
  --bg-accent: var(--white2);
  --fg: var(--eggplant4);
  --fg-reduced: var(--eggplant3);

  /* Profile page styling (light) */
  --profile-bg: var(--white2);

  /* Buttons */
  --button-bg: var(--blue3);
  --button-fg: var(--white1);

  /* Statuses */
  --status-bg: var(--white1);
  --status-focus-bg: var(--white1);
  --status-info-bg: var(--white2);
  --status-focus-info-bg: var(--white2);

  /* Used around statuses + other items */
  --boxshadow-border: 0.08rem solid var(--orange);
}

/* Scroll bar */
html, body {
  scrollbar-color: var(--pink) var(--eggshell);
}

/* Instance title color */
.page-header a h1 {
  color: var(--eggshell);
}

/* Role and bot badge backgrounds */
.profile .profile-header .basic-info .namerole .role,
.profile .profile-header .basic-info .namerole .bot-username-wrapper .bot-legend-wrapper {
  background: var(--eggshell);
}

/* Profile fields */
.profile .about-user .fields .field {
  border-bottom: 0.1rem solid var(--orange);
}
.profile .about-user .fields .field:first-child {
  border-top: 0.1rem solid var(--orange);
}

/* Status media */
.status .media .media-wrapper {
  border: 0.08rem solid var(--orange);
}
.status .media .media-wrapper details .unknown-attachment .placeholder {
  color: var(--blue3);
}
.status .media .media-wrapper details video.plyr-video {
  background: var(--eggshell);
}

/* Status polls */
.status .text .poll {
  background-color: var(--white2);
}
.status .text .poll .poll-info {
  background-color: var(--white1);
}

/* Code snippets */
pre, pre[class*="language-"],
code, code[class*="language-"] {
  background-color: var(--eggplant4);
  color: var(--white1);
}

/* Block quotes */
blockquote {
  background-color: var(--yellow);
  color: var(--eggplant4);
}