@layer reset, base, theme, layout;

@property --header-hue {
  syntax: '<number>';
  inherits: false;
  initial-value: 100;
}

@property --base-color-light {
  syntax: '<color>';
  inherits: false;
  initial-value: oklch(43.7% 0.075 224);
}

@property --base-color-dark {
  syntax: '<color>';
  inherits: false;
  initial-value: oklch(89.2% 0.069 224);
}

@layer theme {
  html {
    /* colors */
    --base-color: light-dark(var(--base-color-light), var(--base-color-dark));
    --base-color-darkened: oklch(from var(--base-color) calc(l * 0.85) c h);
    --base-color-bright-light: oklch(from var(--base-color) calc(l + 0.25) 0.202 h);
    --base-color-bright-dark: oklch(from var(--base-color) 80% 0.202 h);

    --base-mix-grey-50: color-mix(in oklab, var(--base-color), grey);
    --background-mix-base-80: color-mix(in oklab,
        var(--background-color) 90%,
        var(--base-color));

    --triadic-color-primary: oklch(from var(--base-color) l c calc(h + 120));
    --triadic-color-secondary: oklch(from var(--base-color) l c calc(h - 120));

    --complement-color: oklch(from var(--base-color) l c calc(h + 180));


    --action-color: var(--base-color-darkened);
    --action-color-light: oklch(from var(--action-color) calc(l * 1.15) c h);
    --action-color-dark: oklch(from var(--action-color) calc(l * 0.9) c h);

    --accent-color: var(--triadic-color-primary);
    --highlight-color: var(--triadic-color-secondary);
    --active-color: light-dark(var(--action-color-light),
        var(--action-color-dark));

    --background-color: light-dark(oklch(95.5% 0 162),
        oklch(22.635% 0.01351 291.83));
    --surface-feature: light-dark(var(--base-color-bright-light),
        var(--base-color-bright-dark));
    --surface-light: var(--background-mix-base-80);

    --text-color: canvasText;
    --border-color: var(--base-mix-grey-50);
    --border-color-bright: oklch(from var(--border-color) l calc(c + 0.1) h);
    --border-highlight: var(--complement-color);

    color-scheme: light dark;
    accent-color: var(--accent-color);

    &[data-scheme="light"] {
      color-scheme: light;
    }

    &[data-scheme="dark"] {
      color-scheme: dark;
    }

    &[data-scheme="green"] {
      --base-color-light: oklch(48.052% 0.11875 151.945);
      --base-color-dark: oklch(92.124% 0.13356 151.558);

      color-scheme: light dark;
    }
  }
}



[data-playlist-item] {
  align-items: center;
  border-inline-start: max(2cqi, 2ch) solid color-mix(in oklab, var(--song-color) 80%, var(--background-color));
  column-gap: calc(var(--gap) / 4);
  display: grid;
  grid-template:
    "song" auto
    "artist" auto
    "rating" auto/ 100%;
  font-size: var(--text-small);
  justify-items: start;
  padding: calc(var(--gap) / 2);

  @container (width > 30em) {
    grid-template:
      "song rating" auto
      "artist artist" auto / minmax(0, auto) 1fr;
  }

  p {
    margin: 0;
  }

  [data-song] {
    font-family: var(--sans-serif-font);
    font-weight: bold;
    grid-area: song;
  }

  .top-pick {
    background: var(--surface-light);
    border-inline-start: 4px solid var(--highlight-color);
    font-family: var(--sans-serif-font);
    font-size: var(--text-xsmall);
    font-weight: bold;
    padding: 0.25cqi 0.5cqi;
    grid-area: rating;
  }

  .artist {
    font-size: var(--text-small);
    grid-area: artist;
  }
}

[data-playlist-item~="red"] {
  --song-color: oklch(0.5466 0.2208 26.67);
}

[data-playlist-item~="yellow"] {
  --song-color: oklch(0.9815 0.0884 107.23);
}

[data-playlist-item~="orange"] {
  --song-color: oklch(0.7927 0.141 70.67);
}

[data-playlist-item~="indigo"] {
  --song-color: oklch(0.4738 0.3005 273.86);
}

[data-playlist-item~="blue"] {
  --song-color: oklch(0.476 0.275 264.05);
}

[data-playlist-item~="purple"] {
  --song-color: oklch(0.5045 0.1487 277.84);
}

[data-playlist-item~="green"] {
  --song-color: oklch(0.561 0.1813 141.97);
}

[data-playlist-item~="pink"] {
  --song-color: color-mix(in oklab, oklch(54.66% 0.225 340), white);
}

[data-playlist-item~="black"] {
  --song-color: oklch(0.7% 0.007 333);
}

[data-playlist-item~="white"] {
  --song-color: oklch(99.5% 0 333);
}

@layer layout {
  body {
    container: body / inline-size;
    display: grid;
    grid-template:
      "header" auto
      "main" 1fr
      "footer" auto / minmax(min-content, 1fr);
  }

  .page-header {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap);
    grid-area: header;
    align-content: center;
    container: header / inline-size;
    padding: var(--gap);

    @container (width > 20em) {
      justify-content: end;
    }
  }

  [data-nav] {
    display: var(--nav-display, block);
    align-items: center;
  }

  [data-nav~="footer"] {
    align-items: center;

    @container (width > 30em) {
      --navlist-direction: column;
    }
  }

  [data-navlist] {
    align-items: var(--navlist-align);
    display: flex;
    flex-direction: var(--navlist-direction);
    flex-wrap: wrap;
    font-family: var(--sans-serif-font);
    gap: var(--gap);
    justify-content: var(--nav-justify);
    margin-block-end: 0;
  }

  [data-navlist~="site"] {
    --navlist-align: center;

    @container header (width > 20em) {
      --nav-justify: end;
    }

    a {
      padding: calc(var(--gap) / 2);
    }

  }

  [data-button] {
    align-items: center;
    background: var(--btn-bg, var(--action-color));
    border: medium solid var(--btn-border, transparent);
    color: var(--btn-text, var(--background-color));
    cursor: pointer;
    display: inline-flex;
    font-size: inherit;
    font-weight: 600;
    justify-content: center;
    padding: var(--btn-padding, 0.25em var(--gap));
    transition: background var(--transition-timing-fast) ease-in;

    &:hover,
    &:focus {
      --btn-bg: var(--active-color);
      --btn-border: var(--accent-color);
    }

    &[aria-pressed="true"] {
      --btn-bg: var(--highlight-color);
      --btn-border: var(--border-color-bright);
    }
  }

  details {
    border: 1px solid var(--border-highlight);
    font-family: var(--sans-serif-font);
    font-size: var(--text-small);
    position: relative;

    &::details-content {
      opacity: var(--show-details, 0);
      block-size: var(--details-block, 0);
      transition:
        content-visibility var(--transition-timing-slow) allow-discrete,
        opacity var(--transition-timing-slow),
        block-size var(--transition-timing-slow) ease-in;
    }

    &[open]::details-content {
      --show-details: 1;
      --details-block: auto;
    }

    [data-button~="summary"] {
      display: list-item;
    }

    .dropdown {
      background: var(--surface-light);
      border: thin solid var(--border-color);
      padding: var(--gap);
      position: absolute;

      @container header (width > 20em) {
        inset-inline-end: 0;
      }

      fieldset {
        border-color: var(--border-color);
      }
    }

    [data-options~="theme"] {
      display: grid;
      font-size: var(--text-small);
      gap: calc(var(--gap) / 2);
    }
  }

  main {
    container: main-content / inline-size;
    display: grid;
    gap: var(--gap);
    grid-area: main;
    grid-template:
      "header" auto
      "playlist" auto/ 100%;
    margin: var(--gap);

    @container body (width > 25em) {
      --heading-margin-block-end: 0;
      --summary-text-align: end;
      grid-template:
        "header playlist" auto
        / 50vw 1fr;
    }
  }

  .content-header {
    font-family: var(--sans-serif-font);
    grid-area: header;
    margin: var(--content-header-margin-block, var(--gap)) 0;

    @container body (width > 25em) {
      --content-header-margin-block: 3lh;
      align-content: start;
      display: grid;
      justify-items: end;
    }
  }

  .main-heading {
    background: linear-gradient(in oklch 90deg, var(--text-color) 50%, oklch(from var(--base-color) l c var(--header-hue)));
    background-clip: text;
    color: transparent;
    margin-block-end: var(--heading-margin-block-end, 0.15lh);
    animation: header-hue-switch 5s ease-in-out infinite alternate;
  }

  .summary {
    text-align: var(--summary-text-align, start);
    margin-block: 0;
    text-wrap: balance;
  }

  .playlist {
    @container body (width < 25em) {
      --list-padding: calc(var(--gap) * 2);
    }
  }

  [data-layout="footer"] {
    display: grid;
    font-family: var(--sans-serif-font);
    gap: calc(var(--gap) * 2);
    grid-area: footer;
    grid-template:
      "contact" 1fr
      "footer" auto / 100%;
    padding: calc(var(--gap) * 2);

    @container (width > 30em) {
      grid-template:
        "contact footer" auto
        / 1fr 1fr;
    }
  }

  [data-layout="contact-form"] {
    background: var(--surface-light);
    border: thin solid var(--border-highlight);
    font-size: var(--text-small);
    padding: var(--gap);
  }

  [data-form] {
    display: grid;
    gap: var(--gap);

    .field-group {
      display: grid;
      gap: var(--gap);
      grid-template-columns: repeat(auto-fit, minmax(12em, 1fr));
    }

    [data-input*="text"] {
      --focus-ring: transparent;
      border: 2px solid var(--input-border, var(--border-color));
      padding: calc(var(--gap) / 4);

      &:focus {
        --input-border: transparent;
        --outline-offset: 0;
        --focus-ring: var(--border-color-bright);
      }

      &:user-invalid:not(:active, :focus) {
        --input-border: red;
      }
    }

    [data-field] {
      display: grid;
      grid-template:
        "label" auto
        "input" auto / 100%;
    }
  }

  .main-footer {
    align-items: center;
    display: grid;
    grid-area: footer;

    @container (width > 30em) {
      text-align: end;

      .legal {
        align-self: end;
        margin: 0;
      }
    }
  }
}

@layer theme {
  html {
    interpolate-size: allow-keywords;

    /* sizing */
    --text-xsmall: clamp(0.748rem, 0.624rem + 0.254cqi, 1.25rem);
    --text-small: clamp(0.938rem, 0.824rem + 0.568cqi, 1.25rem);
    --text-normal: clamp(1.25rem, 1.023rem + 1.136cqi, 1.875rem);
    --text-large: clamp(1.35rem, 0.818rem + 2.659cqi, 2.813rem);
    --text-xlarge: clamp(1.7rem, 0.784rem + 4.58cqi, 4.219rem);
    --gap: clamp(2cqi, 0.5lh, 5cqi);

    /* Fonts, via https://modernfontstacks.com/ */
    --serif-font: "Nimbus Mono PS", "Courier New", monospace;
    --sans-serif-font: Bahnschrift, "DIN Alternate", "Franklin Gothic Medium", "Nimbus Sans Narrow",
      sans-serif-condensed, sans-serif;

    /* timing */
    --transition-timing: 250ms;
    --transition-timing-fast: 150ms;
    --transition-timing-slow: 500ms;
  }

  body {
    background-color: var(--background-color);
    color: var(--text-color);
    font-family: var(--serif-font);
    transition:
      background var(--transition-timing) linear,
      color var(--transition-timing) linear;
  }

  h1 {
    font-family: var(--sans-serif-font);
    font-size: var(--text-xlarge);
    text-wrap: balance;
  }

  :focus-visible {
    outline: 3px solid var(--focus-ring, canvasText);
    outline-offset: var(--outline-offset, 0.15em);
  }

  :any-link {
    color: var(--link-color, var(--action-color));
    text-decoration: underline;
    text-decoration-color: var(--underline-color, var(--accent-color));
    text-decoration-thickness: var(--underline-thickness, 0.1em);
    text-underline-offset: var(--underline-offset, 0.15em);
    transition:
      color var(--transition-timing-fast),
      text-decoration-color var(--transition-timing-fast),
      text-decoration-thickness var(--transition-timing-fast) ease-out;

    &:hover,
    &:focus {
      --link-color: var(--accent-color);
      --underline-thickness: 0.25em;
    }
  }

  @keyframes header-hue-switch {
    from {
      --header-hue: 26.67;
    }

    to {
      --header-hue: 277;
    }
  }
}

@layer base {
  body {
    font-size: var(--text-normal);
    line-height: 1.2;
    overflow-wrap: break-word;
  }
}

@layer reset {
  * {
    box-sizing: border-box;
  }

  html {
    block-size: 100%;
  }

  body {
    margin: unset;
    min-block-size: 100%;
  }

  picture {
    display: contents;
  }

  img {
    display: block;
  }

  img,
  svg {
    max-inline-size: 100%;
  }

  input,
  button,
  textarea,
  select {
    font: inherit;
  }

  ul,
  ol {
    list-style: none;
    margin-block-start: 0;
    padding-inline-start: var(--list-padding, 0);
  }
}