:root, ::backdrop,
:root[data-theme="light"], :root[data-theme="light"]
 {
  --logo-red: var(--salmon-06);
  --logo-green: var(--green-06);
  --logo-sand: var(--sand-04);

  --computer-screen-color: var(--green-06);
  --roof-color: var(--logo-red);
}

.logo svg #computer-screen {
  transition-duration: 0.5s;
}

@media(prefers-color-scheme: dark) {
  :root:not([data-theme="light"]), :root:not([data-theme="light"]) ::backdrop {
    --logo-red: oklch(53.34% 0.187 27.02);
    --logo-green: var(--green-04);
    --logo-sand: var(--sand-04);

    --computer-screen-color: var(--blue-04);
    --roof-color: var(--logo-red);
  }

  .logo svg #computer-screen {
    transition-delay: 250ms;
    transition-duration: 1.3s;
  }
}


:root[data-theme="dark"], :root[data-theme="dark"] ::backdrop {
  --logo-red: oklch(53.34% 0.187 27.02);
  --logo-green: var(--green-04);
  --logo-sand: var(--sand-04);

  --computer-screen-color: var(--blue-04);
  --roof-color: var(--logo-red);

  .logo svg #computer-screen {
    transition-delay: 250ms;
    transition-duration: 1.3s;
  }
}


.logo svg #logo-text,
.logo svg #chimney-and-roof,
.logo svg #message-dots,
.logo svg #power-button,
.logo svg #status-bar {
  fill: var(--logo-red);
}

.logo svg #leaves,
.logo svg #mouse-background,
.logo svg #computer-background,
.logo svg #message-background {
  fill: var(--logo-green);
}

.logo svg #computer-face,
.logo svg #mouse-face,
.logo svg #message-face {
  fill: var(--logo-sand);
}

.logo svg #computer-screen {
  fill: var(--computer-screen-color);
}

.logo svg {
  transition: fill 0.5s
}

.logo svg #computer-screen {
  transition: fill 1.2s cubic-bezier(.34, -0.95, .21, 1.89);;
}