@layer reset, base, theme, components, utilities;

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

  * {
    margin: 0;
    padding: 0;
    font: inherit;
  }

  html {
    height: 100%;
  }

  body {
    display: flex;
    flex-direction: column;

    min-height: 100%;
    /* TODO Set a default value */
    background-color: var(--bg-base);

    line-height: 1.5rem;
  }

  svg, video, picture {
    display: block;
    max-width: 100%;
  }

  img {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
    font-style: italic;
    background-repeat: no-repeat;
    background-size: cover;
    shape-margin: 0.75rem; /* or any other default value */
  }

  code, kbd, samp, pre {
    font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;
    font-size: 1em;
  }
}

@layer base {
  :root {
    /* Semantic tokens */
    --text-base: var(--clr-base-800);
    --text-base-soft: var(--clr-base-500);
    --text-inverted: var(--clr-inverted-100);
    --text-accent: var(--clr-accent-500);
          
    --bg-base: var(--clr-inverted-100);
    --bg-secondary: var(--clr-base-500);
    --bg-primary: var(--clr-primary-500);

    --divide-base: var(--clr-base-800);
    --stroke-base: var(--clr-base-800);
    --fill-base: var(--clr-base-800);
    --fill-primary: var(--clr-primary-500);

    --primary-shadow: var(--clr-base-500);
    
    /* Radii */ 
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;

    /* TODO move this to README or styling guide documentation */
    /* Breakpoint for reference only because they don't work in media queries */
    --breakpoint-sm: 640px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 1024px;
    --breakpoint-xl: 1280px;
    --breakpoint-2xl: 1536px;

    /* Global styles */
    color: var(--text-base);
    scroll-behavior: smooth;
  }

  body {
    font-family: var(--font-text, sans-serif);
  }

  h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading, sans-serif);
  }

  h1, h2, h3, h4, h5, h6, p, ul, ol, li, blockquote > footer {
    max-width: 60ch; 
  }

  h1 {
    font-size: 2.25rem;
    line-height: 2.5rem;
    font-weight: 700;
    margin-block-end: 1.5rem;
  }

  h2 {
    font-size: 1.5rem;
    line-height: 2rem;

    font-weight: 700;
    margin-block-end: 0.75rem;
  }

  ul, ol, li, p, blockquote > footer {
    /* This default looked better for the font I picked */
    font-size: 1.125rem;
  }

  ol {
    list-style-type: decimal;
    list-style-position: inside;
  }

  ul {
    list-style-type: disc;
    list-style-position: inside;
  }

  ul > li::marker {
    color: var(--clr-accent-500); 
  }

  a {
    font-weight: 700;
    color: var(--text-base);
    transition: color 150ms ease-in-out;
  }

  .sr-only {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
  }

  /* TODO Consider switching to variable fonts with clamp */
  @media(min-width: 768px) {
    h1 {
      font-size: 3rem;
      line-height: 1;
      margin-block-end: 2rem;
    }

    h2 {
      font-size: 1.875rem;
      line-height: 2.25rem;
      margin-block-end: 1rem;
    }
  }
}

@layer theme {
  :root {
    /* Primitive tokens */
    /* Colors */
    /* Picked with the help of https://oklch.com */
    /* TODO These are semantic tokens and they can be simplified */
    --clr-primary-100: oklch(97% 0.013 66.29); 
    --clr-primary-200: oklch(94.11% 0.04 66.29); 
    --clr-primary-300: oklch(88.67% 0.08 66.29); 
    --clr-primary-500: oklch(83.52% 0.1213 66.29); 
    --clr-accent-500: oklch(65.02% 0.211 24.96); 
    --clr-base-800: oklch(27.49% 0.019 258.37);
    --clr-base-500: oklch(35.49% 0.019 258.37);
    --clr-inverted-100: oklch(98% 0 0);

    --clr-red-500: oklch(0.61 0.2313 22.61);
    --clr-blue-500: oklch(0.53 0.108 240.19);

    /* TODO Rethink fonts */
    --font-heading: "Lilita One", sans-serif;
    --font-text: 'Quicksand', sans-serif;

    /* Semantic tokens */
    --clr-shadow: #212121;
    --clr-border: #212121;
    --border: var(--border-thickness) solid var(--clr-border);
    --border-radius: 0.8rem;
    --border-thickness: 3px;
    --shadow-default: 0.15rem 0.15rem var(--clr-shadow);
    --shadow-pressed: 0 0 var(--clr-shadow);
  }

  blockquote > p::before {
    content: open-quote;
  }

  blockquote > p::after {
    content: close-quote;
  }

  blockquote > p {
    --_quote-border-thickness: 0.25rem;
    padding-inline: 1rem;
    padding-block: 1rem;
    border-left: var(--_quote-border-thickness) solid var(--text-base-soft);
    border-radius: var(--_quote-border-thickness) 0 0 var(--_quote-border-thickness);
  }

  @media(prefers-color-scheme: dark) {
    /* --clr-primary-100: oklch(94.11% 0.04 66.29);  */
    /* --clr-primary-300: oklch(88.67% 0.08 66.29);  */
    /* --clr-primary-500: oklch(83.52% 0.1213 66.29);  */
    /* --clr-accent-500: oklch(65.02% 0.211 24.96);  */
    /* --clr-base-800: oklch(27.49% 0.019 258.37); */
    /* --clr-base-500: oklch(35.49% 0.019 258.37); */
    /* --clr-inverted-100: oklch(98% 0 0); */
  }
}

/* TODO For component tokens and component styling */
@layer components {
  .title {
    &:is(h2) {
      font-size: 4rem;
      line-height: 1;
      padding-block-start: 2rem;
    }

    &:is(h3) {
      font-size: 1.5rem;
      line-height: 1;
    }
  }

  header:has(.floating-menu) {
    padding-inline: 0.5rem;
  }

  .floating-menu {
    --btn__clr-bg: var(--clr-inverted-100);
    --btn__padding-inline: 1.5rem;
    --btn__padding-block: 1rem;

    background-color: var(--bg-base);

    position: fixed;
    border: var(--border);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-default);
    inset: auto 0.5rem 1.25rem;

    padding-inline: 0.75rem;
    padding-block: 0.5rem;

    z-index: 1;

    ul {
      list-style: none;
      display: flex;
      justify-content: space-between;
    }

    /* TODO Placeholder until I sort out font awesome icons */
    &:has(.btn) .btn svg {
      width: 2rem;
      height: 2rem;
      fill: inherit;
    }
  }

  .input {
    --border-radius: 0.5rem;
    border: var(--border);
    border-radius: var(--border-radius);
  }

  /* TODO For slightly better organization, label component styling or move to nested layer */
  .btn {
    --_padding-block: var(--btn__padding-block, 1.5rem);
    --_padding-inline: var(--btn__padding-inline, 2rem);
    --_clr-bg: var(--btn__clr-bg, #138086);
    --_text: var(--btn__text, #fff);
    --_border-radius: var(--btn__border-radius, var(--border-radius));
    --_shadow-size: 0.15rem;
    
    background-color: var(--_clr-bg);
    color: var(--_text);
    border: var(--border);
    padding-inline: var(--_padding-inline);
    border-radius: var(--_border-radius);

    padding-block-start: calc(var(--_padding-block) - var(--_shadow-size));
    padding-block-end: var(--_padding-block);
    box-shadow: inset 0 calc(var(--_shadow-size) * -1) var(--clr-shadow);

    &:hover:is(button, a) {
      background-color: oklch(from var(--_clr-bg) calc(l - 0.1) c h);
    }

    &:active:is(button, a) {
      background-color: oklch(from var(--_clr-bg) calc(l - 0.2) c h);

      box-shadow: none;
      transform: translateY(var(--_shadow-size));
      padding-block-end: calc(var(--_padding-block) - var(--_shadow-size));
      margin-block-end: var(--_shadow-size);
    }

    /* Link variant */
    &:is(a) {
      text-decoration: none;
      display: inline-block;
    }

    @media (prefers-reduced-motion: no-preference) {
      transition: 
        border 75ms ease-in-out,
        color 75ms ease-in-out,
        transform 75ms ease-in-out,
        background-color 75ms ease-in-out,
        box-shadow 75ms ease-in-out,
        padding 75ms ease-in-out,
        margin 75ms ease-in-out;
    }
  }

  /* TODO Move this to a different style */
  main {
    padding-inline: 0.5rem;
    padding-block-end: 25vh;

    section {
      display: grid;
      gap: 0.5rem;

      & > div:first-of-type {
        margin-block-end: 1rem;
      }
    }
  }

  .controls-panel {
    display: flex;
    justify-content: space-between;
  }

  .task-controls {
    &[data-variant="filter"] label:has(input[type="radio"]:checked) {
      --btn__clr-bg: var(--clr-accent-500);
    }

    label:has(input[type="radio"]:not(:checked)) {
      --clr-shadow: var(--bg-base);
      --border: var(--border-thickness) solid var(--bg-base);
    }

    fieldset {
      border: var(--border);
      border-radius: var(--border-radius);
      box-shadow: var(--shadow-default);
      padding: 0.25rem;

      display: flex;
      max-width: fit-content;
      gap: 0.75rem;

      label {
        --btn__clr-bg: var(--bg-base);
        --btn__text: var(--text-base);
        /* TODO Fix the need for this */
        gap: unset;

        padding: 0.25rem;
        min-width: 6ch;
        text-align: center;

        &:has(input[type="radio"]:checked) {
          --btn__text: #fff;
        }
      }

      input[type="radio"] {
        appearance: none;
      }
    }
  }

  /* Task list START */
  task-list > ul {
    list-style: none;
    display: grid;
    gap: 0.5rem;

    li {
      padding-block: 0.5rem;
      padding-inline: 0.25rem;
    }

    label {
      display: flex;
      gap: 0.8rem;
      align-items: center;
    }

    label > span {
      width: 100%;
      display: flex;
      justify-content: space-between;

      & > span, & > s {
        word-break: break-word;
      }
    }

    input[type="checkbox"] {
      --_clr-checkbox: var(--task-list__clr-checkbox, var(--clr-accent-500));
      --_size: var(--task-list__checkbox-size, 2rem);
      --_shadow-size: calc(var(--_size) * 0.08);

      /* Reset */
      appearance: none;
      margin: 0;

      flex-shrink: 0;

      font: inherit;
      background-color: var(--bg-base);
      color: currentColor;
      width: var(--_size);
      height: var(--_size);
      border: 0.15rem solid currentColor;
      border-radius: 0.25rem;
      transform: translateY(-0.075rem);
      box-shadow: inset 0 calc(var(--_shadow-size) * -1) var(--clr-shadow);

      display: grid;
      place-content: center;

      &::before {
        content: "";
        width: calc(var(--_size) * 0.6);
        height: calc(var(--_size) * 0.6);
        transform: scale(0);
        box-shadow: inset 1rem 1rem black;

        transform-origin: bottom left;
        clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
      }

      &:checked::before {
        transform: scale(1);
      }

      &:checked {
        --_shadow-size: calc(var(--_size) * 0.02);
        background-image: linear-gradient(
          135deg,
          var(--_clr-checkbox) 50%,
          oklch(from var(--_clr-checkbox) calc(0.9 * l) c h) 0
        );
        box-shadow: 
          inset calc(var(--_shadow-size) * -1) calc(var(--_shadow-size) * -1) var(--clr-shadow),
          inset var(--_shadow-size) var(--_shadow-size) var(--clr-shadow);
      }
    }

    button[popovertarget] {
      background-color: unset;
      border: unset;
      padding-inline: 0.5rem;

      /* NOTE Both anchor-name and attr() for any attribute is experimental */
      anchor-name: attr(popovertarget);
    }
  }

  [popover] {
    --btn__padding-block: 0.5rem;
    --btn__padding-inline: 0.5rem;

    /* Reset */
    position: absolute;
    margin: 0;
    inset: auto;

    /* NOTE Both position-anchor and attr() for any attribute is experimental */
    position-anchor: attr(id);

    top: anchor(bottom);
    right: anchor(right);
    margin-block-start: 0.25rem;

    border: var(--border);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-default);
    padding-inline: 0.75rem;
    padding-block: 0.5rem;

    ul {
      list-style: none;
      display: flex;
      gap: 0.5rem;
    }

    [data-variant="delete-task"] {
      --btn__clr-bg: var(--clr-red-500);
    }

    [data-variant="edit-task"] {
      --btn__clr-bg: var(--clr-blue-500);
    }
  }

  dialog {
    inset: 0;
    margin: auto;
    max-width: 35ch;

    border: var(--border);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-default);

    [method="dialog"] {
      display: grid;
      padding: 0.5rem;
      padding-block-end: 1rem;
      gap: 1rem;

      & > p,
      & > div {
        padding-inline: 0.5rem;
      }

      & > div {
        --btn__padding-block: 0.8rem;
        --btn__padding-inline: 0.8rem;
        display: flex;
        gap: 0.5rem;
        justify-content: space-between;
      }
    }

    [data-variant="close-dialog"] {
      --btn__clr-bg: var(--bg-base);
      --btn__border-radius: 45%;
      --btn__padding-inline: 0.5rem;
      --btn__padding-block: 0.5rem;
      max-width: fit-content;
      justify-self: end;

      /* TODO Placeholder until I sort out font awesome icons */
      & > span:not(.sr-only) > svg {
        width: 1rem;
        height: 1rem;
        fill: inherit;
      }
    }

    [data-variant="delete"] {
      --btn__clr-bg: var(--clr-red-500);
    }

    [data-variant="neutral"] {
      --btn__clr-bg: var(--bg-base);
      --btn__text: var(--text-base);
    }

    &::backdrop {
      background-image: linear-gradient(in oklch 45deg, var(--clr-red-500), var(--clr-blue-500));
      opacity: 0.4;
    }
  }

  .edit-task svg {
    width: 1rem;
    height: 1rem;
    display: inline-block;
    vertical-align: middle;
  }
  /* Task list END */

  form, form label {
    display: grid;
  }

  form {
    gap: 4rem;
  }

  form label {
    gap: 1rem;

    & textarea {
      width: 100%;
      resize: none;
      field-sizing: content;
      padding: 0.5rem;
      word-break: break-word;

      font: inherit;
    }
  }
}

@layer utilities {
  .max-width {
    max-width: 60ch;
  }

  /* TODO Clean this naming up */
  .shadow {
    --_thickness: 0.25rem;

    position: relative;
    outline: var(--_thickness) solid var(--text-base-soft); 
    outline-offset: calc(var(--_thickness) * -1); 
    
    &::before {
      /* https://css-irl.info/css-halftone-patterns/ */
      --_clr-dots: var(--bg-base);
      --_clr-shadow: var(--primary-shadow);
      --_size-dots: 1px;
      --_spacing-dots: 5px;
      --_position-dots: calc(var(--_spacing-dots) / 2);
      --_position-shadow: 0.4rem;

      content: "";
      position: absolute;
      inset: 0;
      z-index: -1; 
      
      background-image: radial-gradient(
        circle at center,
        var(--_clr-dots) var(--_size-dots),
        var(--_clr-shadow) 0
      );
      
      background-size: var(--_spacing-dots) var(--_spacing-dots);
      background-position: 0 0, var(--_position-dots) var(--_position-dots);
      translate: var(--_position-shadow) var(--_position-shadow);
      border-radius: inherit;
    }
  }
}