/* MARK: THEMES
*/

/* DARK */
:root {
  color-scheme: light dark;
  accent-color: light-dark(#005A9C, #66CCFF);
  --bg-color: light-dark(0, 0, 0), (19, 20, 23);
  --bg-opacity: 1.0;
  --bg-02-color: 39, 49, 54;
  --bg-02-opacity: 1.0;
  --bg-panel-color: 255, 255, 255;
  --bg-panel-opacity: 0.05;
  --bg-active-color: 255, 255, 255;
  --bg-active-opacity: 0.05;
  --bg-accent-color: 48, 190, 255;
  --bg-accent-opacity: 0.5;
  --bg-grd: linear-gradient(180deg,
      rgba(50, 70, 80, 0.9) 0,
      #0d101b 100%);
  --txt-color: 255, 255, 255;
  --txt-opacity: 0.6;
  --txt-active: 255, 255, 255;
  --txt-active-opacity: 1.0;
  --txt-link: 102, 204, 255;
  --txt-link-opacity: .5;
  --txt-muted: 255, 255, 255;
  --txt-muted-opacity: 0.5;
  --txt-shadow: -1px 1px rgba(var(--txt-shadow-color),
      var(--txt-shadow-opacity));
  --txt-shadow-color: 0, 0, 0;
  --txt-shadow-opacity: 1.0;
  --accent: #005A9C;
  --accent2: 48, 190, 255;

  
  --surface-1: light-dark(oklch(80% 10% 250), oklch(10% 5% 250));
  --surface-2: light-dark(oklch(90% 7% 250), oklch(20% 5% 250));
  --surface-3: light-dark(oklch(100% 8% 250), oklch(30% 5% 250));
  --text-1: light-dark(oklch(10% 5% 250), oklch(90% 5% 250));
  --text-2: light-dark(oklch(20% 5% 250), oklch(80% 5% 250));

  background: radial-gradient(circle in oklab,
      var(--surface-2),
      var(--surface-1)) fixed;
  color: var(--text-1);
}


/* Light */
@media (prefers-color-scheme: dark) {
  :root:has(header label:last-of-type input:checked) {
    --bg-color: 0, 0, 0;
    --bg-opacity: 0.8;
    --bg-02-color: 0, 0, 0;
    --bg-02-opacity: 0.5;
    --bg-panel-color: 255, 255, 255;
    --bg-panel-opacity: 0.2;
    --bg-active-color: 255, 255, 255;
    --bg-active-opacity: 0.2;
    --bg-grd: linear-gradient(180deg,
        rgba(255, 255, 255, 0.7) 0,
        rgba(255, 255, 255, 0.4) 100%);
    --txt-color: 54, 54, 77;
    --txt-opacity: 1.0;
    --txt-link: 41, 41, 169;
    --txt-link-opacity: .5;
    --txt-active: 0, 0, 0;
    --txt-active-opacity: 1.0;
    --txt-muted: 0, 0, 0;
    --txt-muted-opacity: 0.5;
    --txt-shadow: -1px 1px 0 rgba(var(--txt-shadow-color),
        var(--txt-shadow-opacity));
    --txt-shadow-color: 255, 255, 255;
    --txt-shadow-opacity: 0.3;
    --accent: rgb(102, 204, 255);
    --accent2: 48, 190, 255;
  }
}

/* MARK: LOOK/FEEL
*/
body {
  background-color: rgba(var(--bg-color), var(--bg-opacity));

  &::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 100dvh;
    background-attachment: initial;
    background-color: transparent;
    background-image: url('../images/app/ui/pattern.png');
    background-size: 4.6875rem;
    background-repeat: repeat;
    z-index: -5;
  }
}

html::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 100dvh;
  z-index: -5;
  background: var(--bg-grd);
}



/* html:after {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: -10;
  height: 100dvh;
  background-color: rgba(var(--bg-02-color), var(--bg-02-opacity));
  background-image: url('../images/brand/logos/logo.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: inherit; */
/* background-size: cover; */
/* background-size: 75% 75%;
} */

/* MARK: ALL PANELS
*/
app-container > * {
  background-color: rgba(var(--bg-panel-color), var(--bg-panel-opacity));
}

[role="button"],
button {
  --bg-panel-opacity: 0.1;
}

/* MARK: FORMS
*/
form fieldset label:focus {
  color: rgba(var(--txt-color), 1.0)
}

/*
div {
background: */
/* cover */
/* linear-gradient(var(--bg-panel-color) 33%,
      rgba(var(--bg-panel-color), 0.0)),
    linear-gradient(rgba(var(--bg-panel-color), 0.0),
      var(--bg-panel-color) 66%) 0 100%, */
/* drop-shadow */
/* radial-gradient(farthest-side at 50% 0,
      rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.0)),
    radial-gradient(farthest-side at 50% 100%,
      rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.0)) 0 100%;
  background-color: rgba(var(--bg-panel-color), var(--bg-panel-opacity));
  background-repeat: no-repeat;
  background-attachment: local, local, scroll, scroll;
  background-size: 100% 36px, 100% 36px, 100% 5px, 100% 5px;
}
*/