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

@layer tokens {
  :root {
    --color-edge-start: #9edcc8;
    --color-edge-middle: #d6a9c9;
    --color-edge-end: #aaa7d8;
    --font-family-display: "Todo Display", "Avenir Next", Avenir,
      "Helvetica Neue", sans-serif;
    --content-gap: 1.25rem;
    --space-xs: 0.5rem;
    --space-s: 0.75rem;
    --space-m: 1rem;
    --space-l: 1.5rem;
    --space-xl: 2rem;
    --motion-duration-control: 160ms;
    --motion-duration-entry: 700ms;
    --motion-press-scale: 0.9;
    --motion-ease-out: cubic-bezier(0.16, 1, 0.3, 1);

    --font-size-display: clamp(3.75rem, calc(2.198rem + 7.759vi), 6rem);
    --font-size-lede: clamp(1rem, calc(0.914rem + 0.431vi), 1.125rem);
    --font-size-task: clamp(1rem, calc(0.948rem + 0.259vi), 1.075rem);

    @media (prefers-reduced-motion: reduce) {
      --motion-duration-control: 0s;
      --motion-duration-entry: 0s;
      --motion-press-scale: 1;
    }
  }
}

@layer theme {
  :root {
    --background-color-page: light-dark(#f7f8f8, #13181a);
    --background-color-surface: light-dark(#ffffff, #1a2023);
    --text-color: light-dark(#364147, #e4e9ea);
    --text-color-muted: light-dark(#5c686e, #9ba7ac);
    --border-color: light-dark(#dce1e1, #2f383c);
    --color-accent: light-dark(#364147, #e4e9ea);
    --text-color-on-accent: light-dark(#f7f8f8, #13181a);
    --color-danger: light-dark(#87374a, #b5566d);
    --text-color-danger: light-dark(#87374a, #ef9aac);
    --focus-outline-color: light-dark(#7471a5, #a8a5dc);
    --border-radius: 0.5rem;
    --control-height: 3rem;
    --font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
      "Segoe UI", sans-serif;
  }
}

@layer base {
  ::selection {
    background: var(--color-edge-start);
    color: light-dark(var(--text-color), var(--background-color-page));
  }
}

@layer components {
  .workspace {
    container: workspace / inline-size;
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-xl);
    padding-block-start: var(--space-xl);

    &::before {
      position: absolute;
      inset-block-start: 0;
      inset-inline: 0;
      block-size: 1px;
      background: linear-gradient(
        to right,
        transparent,
        var(--color-edge-start) 28%,
        var(--color-edge-middle) 57%,
        var(--color-edge-end) 82%,
        transparent
      );
      content: "";
      transform-origin: left;
      animation: edge-arrival var(--motion-duration-entry) var(--motion-ease-out)
        both;
    }
  }

  .workspace__header {
    display: grid;
    gap: var(--space-l);
    align-items: start;

    @container workspace (inline-size >= 36rem) {
      grid-template-columns: minmax(0, 1fr) auto;
      gap: var(--space-xl);
      align-items: end;
    }
  }

  .workspace__heading {
    max-inline-size: 36rem;
  }

  .workspace__account {
    display: flex;
    flex-wrap: wrap;
    grid-column: 1 / -1;
    gap: var(--space-xs);
    align-items: center;
    justify-content: end;
    min-inline-size: 0;
    color: var(--text-color-muted);
    font-size: 0.875rem;
  }

  .workspace__identity {
    min-inline-size: 0;
    overflow-wrap: anywhere;
  }

  .workspace__title {
    color: var(--text-color);
    font-family: var(--font-family-display);
    font-size: var(--font-size-display);
    font-weight: 300;
    letter-spacing: -0.035em;
    line-height: 0.92;
    text-wrap: balance;
  }

  .workspace__lede {
    margin-block-start: var(--content-gap);
    color: var(--text-color-muted);
    font-size: var(--font-size-lede);
    text-wrap: pretty;
  }

  .todo-summary {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    align-items: baseline;
    color: var(--text-color-muted);
    line-height: 1;

    @container workspace (inline-size >= 36rem) {
      flex-direction: column;
      align-items: end;
      min-inline-size: 5.5rem;
      padding-block-end: 0.25rem;
    }
  }

  .todo-summary__value {
    color: var(--text-color);
    font-family: var(--font-family-display);
    font-size: 2rem;
    font-weight: 300;
    letter-spacing: -0.025em;
  }

  .todo-summary__label {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .todo-row {
    display: grid;
    grid-template-columns: min(2.75rem, 18%) minmax(0, 1fr);
    gap: 0 var(--space-xs);
    align-items: center;

    & + & {
      border-block-start: 1px solid var(--border-color);
    }

    @container workspace (inline-size >= 24rem) {
      grid-template-columns: min(2.75rem, 18%) minmax(0, 1fr) auto;
    }
  }

  .todo-row__control {
    display: grid;
    grid-column: 1 / 3;
    grid-template-columns: subgrid;
    align-items: center;
    min-block-size: 4.5rem;
    padding-block: var(--space-m);
    cursor: pointer;
  }

  .todo-row__status {
    position: relative;
    inline-size: 1.125rem;
    aspect-ratio: 1;
    margin-inline: auto;
    border: 1px solid var(--text-color-muted);
    border-radius: 50%;
    transition-property: border-color, background-color, scale;
    transition-duration: var(--motion-duration-control);
    transition-timing-function: ease-out;

    &::after {
      position: absolute;
      inset-block-start: 0.12rem;
      inset-inline-start: 0.34rem;
      inline-size: 0.3rem;
      block-size: 0.58rem;
      border-block-end: 1.5px solid var(--text-color);
      border-inline-end: 1.5px solid var(--text-color);
      content: "";
      opacity: 0;
      rotate: 42deg;
    }

    .todo-row--completed & {
      border-color: var(--color-edge-end);

      &::after {
        opacity: 1;
      }
    }

    @media (hover: hover) {
      .todo-row__control:hover & {
        border-color: var(--text-color);
        background-color: color-mix(in oklch, var(--color-edge-start) 14%, transparent);
      }
    }

    .todo-row__control:active & {
      scale: var(--motion-press-scale);
    }

    .todo-row__completion:focus-visible + .todo-row__control & {
      border-color: var(--text-color);
      outline: 2px solid var(--focus-outline-color);
      outline-offset: 3px;
    }
  }

  .todo-row__title {
    overflow-wrap: anywhere;
    font-size: var(--font-size-task);
    font-weight: 500;
    line-height: 1.45;

    .todo-row--completed & {
      color: var(--text-color-muted);
      text-decoration: line-through 1px var(--color-edge-middle);
    }
  }

  .todo-row__delete {
    grid-column: 2;
    justify-self: start;
    margin-block-end: var(--space-s);

    @container workspace (inline-size >= 24rem) {
      grid-column: 3;
      margin: 0;
    }
  }

  @keyframes edge-arrival {
    from {
      filter: blur(2px);
      opacity: 0.65;
      scale: 0.72 1;
    }
  }
}