/* Nagi CSS site — the contract applied by hand. */

:root {
  color-scheme: light dark;

  --color-bg: #f4f9fa;
  --color-ink: #16303c;
  --color-muted: #587482;
  --color-accent: #0a8ca8;
  --color-line: #d2e2e7;
  --color-well: #e8f1f4;
  --color-bad: #b04a52;
  --color-good: #0e8f7f;

  --hl-surface: #087f99;
  --hl-element: #3a6fc4;
  --hl-anatomy: #0e8f7f;
  --hl-stn: #7a63c9;
  --hl-variant: #6d8291;
  --hl-state: #a3803c;

  --font-display: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-code: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --page: 64rem;
  --measure: 46rem;
  --space: 1rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #0e1a21;
    --color-ink: #d6e4ea;
    --color-muted: #7f99a6;
    --color-accent: #62cbe0;
    --color-line: #233742;
    --color-well: #142430;
    --color-bad: #d98d88;
    --color-good: #6bd6c3;

    --hl-surface: #62cbe0;
    --hl-element: #8fb5f0;
    --hl-anatomy: #6bd6c3;
    --hl-stn: #b3a4ee;
    --hl-variant: #93a9b6;
    --hl-state: #d5b872;
  }
}

html {
  background: var(--color-bg);
}

body {
  margin: 0;
  padding: calc(var(--space) * 4) calc(var(--space) * 1.5) calc(var(--space) * 5);
  display: grid;
  justify-items: center;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--color-ink);
  -webkit-font-smoothing: antialiased;
}

.home-page {
  inline-size: 100%;
  max-inline-size: var(--page);
  min-inline-size: 0;
  display: grid;
  gap: calc(var(--space) * 4);

  > .header {
    min-inline-size: 0;
    position: relative;
    display: grid;
    grid-template-columns: 4rem minmax(0, 1fr);
    column-gap: calc(var(--space) * 1.25);
    row-gap: calc(var(--space) * 0.25);
    padding-block: calc(var(--space) * 2);

    > .image {
      grid-column: 1;
      grid-row: 1 / span 2;
      align-self: center;
      inline-size: 4rem;
      block-size: 4rem;
    }

    > .title {
      grid-column: 2;
      grid-row: 1;
      align-self: end;
      margin: 0;
      font-family: var(--font-display);
      font-size: 3.25rem;
      font-weight: 700;
      letter-spacing: -0.035em;
      line-height: 1.05;
    }

    > .p {
      margin: 0;
      max-inline-size: var(--measure);

      &.-tagline {
        grid-column: 2;
        grid-row: 2;
        align-self: start;
        font-size: 1.65rem;
        font-weight: 450;
        line-height: 1.4;
        letter-spacing: -0.015em;
      }

      &.-lead {
        grid-column: 1 / -1;
        margin-block-start: calc(var(--space) * 1.25);
        font-size: 1.05rem;
        line-height: 1.6;
      }

      &.-meaning {
        grid-column: 1 / -1;
        color: var(--color-muted);

        > .note {
          font-size: 0.85em;
        }
      }
    }

    > .nav {
      grid-column: 1 / -1;
      margin-block-start: calc(var(--space) * 0.5);

      > .list {
        margin: 0;
        padding: 0;
        list-style: none;
        display: flex;
        flex-wrap: wrap;
        gap: calc(var(--space) * 1.75);

        > .item {
          > .link {
            color: var(--color-accent);
            font-weight: 550;
            text-decoration-thickness: 1px;
            text-underline-offset: 0.25em;
          }
        }
      }
    }
  }

  > .section {
    min-inline-size: 0;
    display: grid;
    gap: calc(var(--space) * 1.25);
    border-block-start: 1px solid var(--color-line);
    padding-block-start: calc(var(--space) * 2.5);

    > .text {
      &.-eyebrow {
        margin-block-end: calc(var(--space) * -0.85);
        color: var(--color-accent);
        font-size: 0.72rem;
        font-weight: 750;
        letter-spacing: 0.12em;
        line-height: 1;
        text-transform: uppercase;
      }
    }

    > .title {
      margin: 0;
      font-family: var(--font-display);
      font-size: 1.6rem;
      font-weight: 650;
      letter-spacing: -0.025em;
      line-height: 1.2;
    }

    > .p {
      margin: 0;
      max-inline-size: var(--measure);

      > .code {
        font-family: var(--font-code);
        font-size: 0.85em;
        background: var(--color-well);
        padding: 0.1em 0.4em;
        border-radius: 0.3em;
      }

      > .link {
        color: var(--color-accent);
        text-underline-offset: 0.2em;
      }
    }

    > .pre {
      inline-size: 100%;
      min-inline-size: 0;
      margin: 0;
      padding: calc(var(--space) * 1.25) calc(var(--space) * 1.5);
      background: var(--color-well);
      border: 1px solid var(--color-line);
      border-radius: 0.6rem;
      overflow-x: auto;
      font-family: var(--font-code);
      font-size: 0.875rem;
      line-height: 1.7;
      max-inline-size: var(--measure);
      box-sizing: border-box;
    }

    &.-naming {
      > .unit {
        display: grid;
        grid-template-columns: 7fr 5fr;
        gap: calc(var(--space) * 2);
        align-items: start;

        > .figure {
          &.-sample {
            margin: 0;
            display: grid;
            gap: calc(var(--space) * 0.6);
            min-inline-size: 0;

            > .pre {
              margin: 0;
              padding: calc(var(--space) * 1.25) calc(var(--space) * 1.5);
              background: var(--color-well);
              border: 1px solid var(--color-line);
              border-radius: 0.6rem;
              overflow-x: auto;
              font-family: var(--font-code);
              font-size: 0.8125rem;
              line-height: 1.75;
              box-sizing: border-box;

              > .mark {
                background: color-mix(in srgb, currentColor 13%, transparent);
                color: inherit;
                padding: 0.05em 0.25em;
                border-radius: 0.25em;
                font-weight: 500;

                &.-surface {
                  color: var(--hl-surface);
                }

                &.-element {
                  color: var(--hl-element);
                }

                &.-anatomy {
                  color: var(--hl-anatomy);
                }

                &.-stn {
                  color: var(--hl-stn);
                }

                &.-variant {
                  color: var(--hl-variant);
                }

                &.-state {
                  color: var(--hl-state);
                }
              }
            }
          }
        }

        > .list {
          &.-rules {
            margin: 0;
            padding: 0;
            list-style: none;
            display: grid;
            gap: calc(var(--space) * 1.25);

            > .item {
              display: grid;
              gap: calc(var(--space) * 0.25);
              border-inline-start: 3px solid var(--color-line);
              padding-inline-start: var(--space);

              > .title {
                margin: 0;
                font-size: 0.95rem;
                font-weight: 600;
                line-height: 1.4;
              }

              > .p {
                margin: 0;
                font-size: 0.9rem;
                color: var(--color-muted);

                > .code {
                  font-family: var(--font-code);
                  font-size: 0.85em;
                  background: var(--color-well);
                  padding: 0.1em 0.4em;
                  border-radius: 0.3em;
                }
              }

              &.-surface {
                border-inline-start-color: var(--hl-surface);

                > .title {
                  color: var(--hl-surface);
                }
              }

              &.-element {
                border-inline-start-color: var(--hl-element);

                > .title {
                  color: var(--hl-element);
                }
              }

              &.-anatomy {
                border-inline-start-color: var(--hl-anatomy);

                > .title {
                  color: var(--hl-anatomy);
                }
              }

              &.-stn {
                border-inline-start-color: var(--hl-stn);

                > .title {
                  color: var(--hl-stn);
                }
              }

              &.-variant {
                border-inline-start-color: var(--hl-variant);

                > .title {
                  color: var(--hl-variant);
                }
              }

              &.-state {
                border-inline-start-color: var(--hl-state);

                > .title {
                  color: var(--hl-state);
                }
              }
            }
          }
        }
      }
    }

    &.-test {
      > .list.-diagnostics {
        min-inline-size: 0;
        margin: 0;
        padding-inline-start: calc(var(--space) * 1.5);
        display: grid;
        gap: calc(var(--space) * 1.25);

        > .item {
          min-inline-size: 0;
          display: grid;
          gap: calc(var(--space) * 0.5);

          > .title {
            margin: 0;
            font-size: 1rem;
          }

          > .p {
            margin: 0;

            > .code {
              padding: 0.1em 0.4em;
              border-radius: 0.3em;
              background: var(--color-well);
              font-family: var(--font-code);
              font-size: 0.85em;
            }
          }

          > .pre {
            box-sizing: border-box;
            max-inline-size: 100%;
            min-inline-size: 0;
            margin: 0;
            padding: var(--space);
            background: var(--color-well);
            border: 1px solid var(--color-line);
            border-radius: 0.6rem;
            overflow-x: auto;
            font-family: var(--font-code);
            font-size: 0.8rem;
            line-height: 1.6;

            &.-violation {
              color: var(--color-ink);
            }

            &.-diagnostic {
              border-color: color-mix(in srgb, var(--color-bad) 35%, var(--color-line));
              background: color-mix(in srgb, var(--color-bad) 8%, var(--color-well));
            }
          }
        }
      }
    }

    &.-why {
      > .list {
        margin: 0;
        padding: 0;
        list-style: none;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: calc(var(--space) * 2);

        > .item {
          display: grid;
          grid-template-rows: auto 1fr;
          gap: calc(var(--space) * 0.4);
          align-content: start;

          > .title {
            margin: 0;
            font-size: 1.05rem;
            font-weight: 600;
            line-height: 1.4;
            color: var(--color-accent);
          }

          > .p {
            margin: 0;
            font-size: 0.95rem;

            > .code {
              font-family: var(--font-code);
              font-size: 0.85em;
              background: var(--color-well);
              padding: 0.1em 0.4em;
              border-radius: 0.3em;
            }
          }
        }
      }
    }

    &.-evaluation {
      > .list.-metrics {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: calc(var(--space) * 1.25);
        margin: 0;
        padding: 0;
        list-style: none;

        > .item {
          display: grid;
          gap: calc(var(--space) * 0.35);
          padding: calc(var(--space) * 1.25);
          border: 1px solid var(--color-line);
          border-radius: 0.6rem;
          background: var(--color-well);

          > .strong {
            color: var(--color-accent);
            font-size: 1.05rem;
          }

          > .p {
            margin: calc(var(--space) * 0.35) 0 0;
            color: var(--color-muted);
            font-size: 0.9rem;

            > .code {
              padding: 0.1em 0.4em;
              border-radius: 0.3em;
              background: color-mix(in srgb, var(--color-bg) 65%, var(--color-well));
              font-family: var(--font-code);
              font-size: 0.85em;
            }
          }
        }
      }
    }
  }

  > .footer {
    min-inline-size: 0;
    border-block-start: 1px solid var(--color-line);
    padding-block-start: calc(var(--space) * 2.5);
    display: grid;
    gap: calc(var(--space) * 0.5);
    color: var(--color-muted);
    font-size: 0.9rem;

    > .p {
      margin: 0;
      max-inline-size: var(--measure);

      > .link {
        color: var(--color-accent);
      }

      > .code {
        font-family: var(--font-code);
        font-size: 0.85em;
        background: var(--color-well);
        padding: 0.1em 0.4em;
        border-radius: 0.3em;
      }
    }
  }
}

@media (max-width: 56rem) {
  .home-page {
    > .section {
      &.-naming {
        > .unit {
          grid-template-columns: 1fr;
        }
      }

      &.-why {
        > .list {
          grid-template-columns: 1fr;
        }
      }

      &.-evaluation {
        > .list.-metrics {
          grid-template-columns: 1fr;
        }
      }
    }
  }
}