/* Storefront theme — product card, form grid, validity styling.
   Inert until #css-toggle is checked. */
@layer reset, tokens, base, components;

@layer reset {
  :root:has(#css-toggle:checked) {
    & *, & *::before, & *::after { box-sizing: border-box; margin: 0; }
    & input, & button, & select, & textarea { font: inherit; }
  }
}

@layer tokens {
  :root:has(#css-toggle:checked) {
    color-scheme: light dark;
    --hue: 155;
    --brand: oklch(52% 0.14 var(--hue));
    --surface: light-dark(oklch(98.5% 0.006 var(--hue)), oklch(17% 0.015 var(--hue)));
    --surface-raised: light-dark(oklch(100% 0 0), oklch(22% 0.02 var(--hue)));
    --text: light-dark(oklch(23% 0.02 var(--hue)), oklch(93% 0.01 var(--hue)));
    --muted: color-mix(in oklch, var(--text) 60%, var(--surface));
    --rule: color-mix(in oklch, var(--text) 14%, var(--surface));
    --danger: oklch(55% 0.19 25);
    --space: clamp(1rem, 0.6rem + 1.4vw, 1.5rem);
    --radius: 12px;
    --shadow: 0 1px 2px oklch(20% 0.03 var(--hue) / 0.07),
              0 8px 26px oklch(20% 0.03 var(--hue) / 0.11);
  }
}

@layer base {
  :root:has(#css-toggle:checked) {
    background: var(--surface);
    accent-color: var(--brand);

    & body {
      color: var(--text);
      font-family: system-ui, sans-serif;
      font-size: clamp(0.98rem, 0.94rem + 0.2vw, 1.1rem);
      line-height: 1.55;
      max-inline-size: 44rem;
      margin-inline: auto;
      padding: var(--space);
    }
    & a { color: var(--brand); }
    & :focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
    & body > a[href="#main"] {
      position: absolute; inset-block-start: -100vb;
      &:focus-visible { inset: var(--space) auto auto var(--space);
        background: var(--surface-raised); padding: 0.5rem 1rem;
        border-radius: var(--radius); }
    }
  }
}

@layer components {
  :root:has(#css-toggle:checked) {
    & body > header {
      display: flex; flex-wrap: wrap; gap: var(--space); align-items: center;
      padding-block-end: var(--space);
      border-block-end: 1px solid var(--rule);
      margin-block-end: calc(var(--space) * 1.5);
      & > p:first-child { font-weight: 800; color: var(--brand); }
      & nav { margin-inline-start: auto; }
      & nav ul { display: flex; gap: 1rem; list-style: none; padding: 0; }
      & label[for="css-toggle"] { color: var(--muted); font-size: 0.85em; }
    }

    & article > header h1 { font-size: clamp(1.6rem, 1.25rem + 1.8vw, 2.4rem);
      text-wrap: balance; }
    & article > header p { color: var(--muted); text-wrap: pretty;
      margin-block-start: 0.5em; }

    /* Product facts card */
    & article > dl {
      display: grid; grid-template-columns: max-content 1fr;
      gap: 0.7em 1.4em; align-items: center;
      background: var(--surface-raised);
      border: 1px solid var(--rule); border-radius: var(--radius);
      padding: var(--space); margin-block: var(--space);
      box-shadow: var(--shadow);
      & dt { font-weight: 700; font-size: 0.85em; text-transform: uppercase;
        letter-spacing: 0.05em; color: var(--muted); }
      & [itemprop="price"] { font-size: 1.5em; font-weight: 800;
        color: var(--brand); }
      & meter, & progress { inline-size: 100%; }
    }

    /* Form as stacked cards */
    & fieldset {
      border: 1px solid var(--rule); border-radius: var(--radius);
      background: var(--surface-raised);
      padding: var(--space); margin-block: var(--space);
    }
    & legend {
      font-weight: 800; padding-inline: 0.5em;
      color: var(--brand);
    }
    & form p { display: grid; gap: 0.3em; margin-block: 0.8em; }
    & form label { font-weight: 600; font-size: 0.92em; }
    & form small { color: var(--muted); }
    & input:not([type="checkbox"]), & select {
      border: 1.5px solid var(--rule); border-radius: 8px;
      padding: 0.55em 0.8em; background: var(--surface);
      color: var(--text);
      inline-size: 100%; max-inline-size: 22rem;
      &:focus-visible { border-color: var(--brand); outline-offset: 0; }
      &:user-invalid { border-color: var(--danger); }
    }
    & form p:has(> input[type="checkbox"]) {
      grid-template-columns: auto 1fr; align-items: center; gap: 0.6em;
      & input { inline-size: 1.2rem; block-size: 1.2rem; }
    }
    & output { font-weight: 800; color: var(--brand); }

    & button {
      border: 1.5px solid var(--brand); border-radius: 999px;
      padding: 0.6em 1.5em; font-weight: 700; cursor: pointer;
      background: var(--surface-raised); color: var(--brand);
      &[type="submit"] {
        background: var(--brand); color: oklch(99% 0.01 var(--hue));
        &:hover { background: oklch(from var(--brand) calc(l - 0.06) c h); }
      }
      &[type="reset"]:hover {
        background: color-mix(in oklch, var(--brand) 8%, var(--surface-raised));
      }
    }
    & form > p:last-child { display: flex; flex-direction: row; gap: 0.8em; }

    & code { font-size: 0.85em; font-family: ui-monospace, monospace;
      background: color-mix(in oklch, var(--brand) 9%, var(--surface));
      padding: 0.08em 0.3em; border-radius: 4px; }

    & article > footer, & body > footer {
      margin-block-start: calc(var(--space) * 1.5);
      border-block-start: 1px solid var(--rule);
      padding-block-start: var(--space);
      color: var(--muted); font-size: 0.9em;
    }
  }
}