:root {
  color-scheme: light dark;
}

:root {
  --green-back: #baffc9;
  --green-border: #a9eeb8;
  --blue-back: #bae1ff;
  --blue-border: #0a538c;
  --orange-back: #ffdfba;
  --orange-back-light: #fff4e7;
  --orange-border: #eecea9;
  --orange-text: #4a2a07;
  --orange-peach-gradient: conic-gradient(
    from 0deg at 0% 0%,
    light-dark(hsl(32 100% 83% / 1), hsl(32, 91%, 14%)) 0grad,
    light-dark(hsl(38 90% 92% / 1), hsl(37, 94%, 12%)) 160grad,
    light-dark(hsl(32 67% 75% / 1), hsl(31, 86%, 6%)) 360grad
  );
  --orange-peach-gradient-switch: conic-gradient(
    from 280deg at 0% 0%,
    light-dark(hsl(32 100% 83% / 1), hsl(32, 94%, 21%)) 0grad,
    light-dark(hsl(38 90% 92% / 1), hsl(37, 88%, 24%)) 160grad,
    light-dark(hsl(32 67% 75% / 1), hsl(32, 87%, 15%)) 360grad
  );
  --orange-peach-gradient-small: conic-gradient(
    from 0deg at 0% 0%,
    light-dark(hsl(32 100% 87% / 1), hsl(32, 91%, 14%)) 0grad,
    light-dark(hsl(38 90% 92% / 1), hsl(37, 91%, 21%)) 160grad,
    light-dark(hsl(32 67% 83% / 1), hsl(32, 93%, 12%)) 360grad
  );
  --orange-light-gradient-small: conic-gradient(
    from 0deg at 0% 0%,
    light-dark(hsl(32, 83%, 91%), hsl(32, 100%, 11%)) 0grad,
    light-dark(hsl(35, 100%, 96%), hsl(36, 97%, 12%)) 160grad,
    light-dark(hsl(33, 73%, 84%), hsl(33, 95%, 9%)) 360grad
  );
  --brown-gradient-small: conic-gradient(
    from 0deg at 0% 0%,
    hsl(32, 75%, 35%) 0grad,
    hsl(38, 69%, 21%) 160grad,
    hsl(32, 32%, 60%) 360grad
  );
  --link-back: #cccccc1a;
  --yellow-border: #eeeea9;
  --yellow-text: #9e9e00;
  --base-back: #fff9c6;
  --yellow-back: #fff9c6;
  --base-grey: #fafaef;
  --base-border: #e2e2d7;
  --link: #375575;
  --link: light-dark(#375575, var(--blue-back));
  --visited: #b0014e;
  --visited: light-dark(#b0014e, var(--yellow-back));
  --hover: light-dark(#620, var(--yellow-back));
  --link-border: #0079d6;
  --visited-border: #b0014d7c;
  --visited-border: light-dark(#b0014d7c, var(--yellow-back));
  --faded-yellow: #f8f7f2;
  --background-color-post: var(--base-grey);
  --postCard-border-color: var(--base-border);
}

:root {
  --background-color: var(--orange-back);
  --border-color: var(--orange-border);
  --text-color: var(--orange-text);
  --heading-color: var(--orange-text);
  --background-color-light: var(--orange-back-light);
  --border-color: light-dark(var(--orange-border), #2d1a04);
  --background-color: light-dark(var(--orange-back), var(--orange-text));
  --text-color: light-dark(var(--orange-text), white);
  --heading-color: light-dark(var(--orange-text), var(--orange-back-light));
  --base-back: light-dark(#fff9c6, var(--orange-text));
  --background-color-light: light-dark(
    var(--orange-back-light),
    var(--orange-text)
  );
  --light-post-back: radial-gradient(
      ellipse at center,
      light-dark(white, black) 0,
      light-dark(white, black) 50%,
      transparent 100%
    ),
    conic-gradient(
      from 0deg at -50% 50%,
      var(--base-back) 0deg,
      light-dark(white, black) 70deg,
      var(--base-back) 200deg
    );
    --buy-back: light-dark(white, black);
    --buy-front: var(--link);
  --post-back: var(--light-post-back);
  --background-gradient: var(--orange-peach-gradient);
  --background-gradient-small: var(--orange-peach-gradient-small);
  --background-gradient-light-small: var(--orange-light-gradient-small);
}

.BaseBack {
  background-color: var(--base-back);
}
.GreyBack {
  background-color: var(--base-grey);
}