/* Landing page — extends the shared design system. */
@import url("system.css?v=fe851281");

@layer components {
  :root:has(#css-toggle:checked) {
    /* ---- Hero ---- */
    & article > header {
      text-align: center;
      margin-block: calc(var(--space) * 2.5) calc(var(--space) * 3);
      & h1 {
        font-size: var(--step-4);
        letter-spacing: -0.025em;
        max-inline-size: 22ch; margin-inline: auto;
        background: linear-gradient(100deg in oklch,
          var(--text) 20%, var(--brand-strong));
        background-clip: text; color: transparent;
      }
      & hgroup p {
        color: var(--text-muted); font-size: var(--step-1); font-weight: 400;
        max-inline-size: 52ch; margin: 0.9em auto 0; line-height: 1.45;
      }
      & > p {
        margin-block-start: 1.6em;
        display: flex; gap: 0.7rem; justify-content: center; flex-wrap: wrap;
        & a {
          padding: 0.65em 1.5em; border-radius: 999px;
          text-decoration: none; font-weight: 600;
          transition: translate 150ms ease-out, box-shadow 150ms ease-out,
                      background 150ms ease-out;
        }
        & a:first-child {
          background: var(--brand); color: oklch(99% 0.005 var(--hue));
          box-shadow: var(--shadow-1);
          &:hover { background: var(--brand-strong); translate: 0 -2px;
            box-shadow: var(--shadow-2); }
        }
        & a:nth-child(n+2) {
          background: var(--brand-tint); color: var(--brand-strong);
          &:hover { background: color-mix(in oklch, var(--brand) 18%, var(--surface));
            translate: 0 -2px; }
        }
      }
    }

    & article > section { margin-block: calc(var(--space) * 3); }
    & section > p { max-inline-size: 68ch; }
    & h2 { margin-block-end: 0.6em; }

    /* ---- Element of the week: tonal spotlight card ---- */
    & section:has(#eotw-link) {
      background: var(--brand-tint);
      border: 1px solid var(--brand-tint-border);
      border-radius: var(--radius-l);
      padding: calc(var(--space) * 1.3);
      & h2 { font-size: var(--step-1);
        &::before { content: "✦ "; color: var(--brand); } }
      & p { max-inline-size: none; }
      & #eotw-link code { font-size: 1.2em; background: var(--surface-raised);
        box-shadow: var(--shadow-1); }
    }

    /* ---- Tag explorer: tonal chips ---- */
    & #tag-grid {
      & h3 {
        margin-block: 1.6em 0.6em;
        font-size: var(--step--1); font-weight: 700;
        text-transform: uppercase; letter-spacing: 0.14em;
        color: var(--text-muted);
      }
      & ul { list-style: none; padding: 0;
        display: flex; flex-wrap: wrap; gap: 0.5rem; }
      & a { text-decoration: none; display: inline-block;
        & code {
          display: inline-block;
          background: var(--surface-raised);
          border: 1px solid var(--hairline);
          border-radius: 10px;
          padding: 0.4em 0.75em;
          font-size: 0.92em;
          box-shadow: var(--shadow-1);
          transition: translate 140ms ease-out, box-shadow 140ms ease-out,
                      background 140ms ease-out, border-color 140ms ease-out;
        }
        &:hover code {
          background: var(--brand-tint);
          border-color: var(--brand-tint-border);
          color: var(--brand-strong);
          translate: 0 -2px;
          box-shadow: var(--shadow-2);
        }
      }
    }

    /* ---- Div soup vs semantic ---- */
    & #soup-compare {
      display: grid; gap: var(--space);
      grid-template-columns: repeat(auto-fit, minmax(min(24rem, 100%), 1fr));
      & figure { display: grid; gap: 0.7em; align-content: start;
        grid-template-columns: minmax(0, 1fr); min-inline-size: 0; }
      & figure pre { box-shadow: var(--shadow-1); }
      & figure:first-child pre { border-inline-start: 3px solid oklch(62% 0.18 25); }
      & figure:last-child pre { border-inline-start: 3px solid oklch(60% 0.14 155); }
      & figcaption { color: var(--text-muted); font-size: var(--step--1);
        padding-inline: 0.3rem; }
    }

    /* ---- Example cards ---- */
    & #example-cards {
      list-style: none; padding: 0; margin-block: var(--space);
      display: grid; gap: 0.9rem;
      grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
      & li {
        background: var(--surface-raised);
        border: 1px solid var(--hairline);
        border-radius: var(--radius);
        padding: 1em 1.2em;
        box-shadow: var(--shadow-1);
        transition: translate 150ms ease-out, box-shadow 150ms ease-out;
        &:has(a:hover) { translate: 0 -3px; box-shadow: var(--shadow-2); }
      }
      & a { font-weight: 650; text-decoration: none;
        &:hover { text-decoration: underline; } }
    }

    /* ---- Authority list ---- */
    & section:has(#authority-h) ul {
      padding-inline-start: 1.2em;
      display: grid; gap: 0.5em;
      & li::marker { color: var(--brand); }
    }
  }
}