/*
 * Styleguide — dev-facing design system reference.
 *
 * These styles render `/styleguide`. They are scoped under `.styleguide`
 * so this file cannot leak into product surfaces. When a pattern shown
 * in the styleguide becomes product-grade, lift it into its own file
 * (e.g. `buttons.css`) and update the styleguide section to demo it.
 */

@layer components {
  .styleguide {
    max-width: 1400px;
    margin: 0 auto;
    padding: 2rem clamp(1rem, 3vw, 3rem);
  }

  .styleguide__header {
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 1.5rem;
    margin-bottom: 2.5rem;
  }

  .styleguide__title {
    font-size: 2rem;
    font-weight: 600;
    margin: 0 0 0.25rem;
    letter-spacing: -0.02em;
  }

  .styleguide__lede {
    margin: 0;
    /* color inherits from base `html` rule (body token). */
  }

  .styleguide__section {
    margin-bottom: 4rem;
  }

  .styleguide__section-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0 0 0.25rem;
  }

  .styleguide__section-lede {
    margin: 0 0 1.5rem;
    max-width: 60ch;
    /* color inherits from base `html` rule (body token). */
  }

  /* Color palette table --------------------------------------------- */

  .palette {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0.25rem;
    font-size: 0.75rem;
    table-layout: fixed;
  }

  .palette th,
  .palette td {
    padding: 0;
    font-weight: 400;
    text-align: left;
  }

  .palette__row-label {
    width: 6rem;
    padding-right: 0.75rem !important;
    font-weight: 500;
    color: var(--color-text-heading);
    text-transform: capitalize;
    white-space: nowrap;
    vertical-align: middle;
  }

  .palette__col-label {
    font-variant-numeric: tabular-nums;
    text-align: center;
    padding-bottom: 0.5rem !important;
    /* color inherits from base `html` rule (body token). */
  }

  .palette__swatch {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;
    border-radius: 0.375rem;
    /* Subtle inset stroke that has to read against any swatch color
       — must be black-with-alpha rather than a token, since tokens
       are opaque and would clash with at least some swatches. */
    box-shadow: inset 0 0 0 1px oklch(0% 0 0 / 6%);
  }

  .palette__swatch-value {
    position: absolute;
    inset: auto 0 0 0;
    padding: 0.25rem 0.375rem;
    font-size: 0.625rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    opacity: 0;
    transition: opacity 120ms ease;
    /* White-with-alpha so the label legibly overlays any swatch.
       Derived from the white token rather than being a literal. */
    background: oklch(from var(--color-white) l c h / 88%);
    color: var(--color-text-heading);
    border-radius: 0 0 0.375rem 0.375rem;
    text-align: center;
  }

  .palette__swatch:hover .palette__swatch-value {
    opacity: 1;
  }

  /* Typography table ------------------------------------------------ */

  .type {
    width: 100%;
    border-collapse: collapse;
  }

  .type th,
  .type td {
    text-align: left;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--color-border);
    vertical-align: baseline;
  }

  .type thead th {
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--color-border);
    /* color inherits from base `html` rule (body token). */
  }

  .type__weight-label {
    width: 10rem;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    font-size: 0.8125rem;
    /* color inherits from base `html` rule (body token). */
  }

  .type__weight-label strong {
    color: var(--color-text-heading);
    font-weight: 500;
    margin-right: 0.5rem;
  }

  .type__sample {
    font-size: 1.5rem;
    letter-spacing: -0.01em;
    color: var(--color-text-heading);
  }

  /* Semantic tokens table ------------------------------------------- */

  .tokens {
    display: grid;
    grid-template-columns: 2.5rem minmax(14rem, 18rem) 1fr;
    gap: 0.875rem 1.25rem;
    align-items: center;
    max-width: 56rem;
  }

  .tokens__swatch {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.5rem;
    border: 1px solid var(--color-border);
  }

  .tokens__name {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.8125rem;
    color: var(--color-text-heading);
  }

  .tokens__role {
    font-size: 0.875rem;
  }

  /* Demo grid — stacks labelled examples vertically. ---------------- */

  .demo {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
  }

  .demo__row {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .demo__row-label {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-heading);
  }

  .demo__row-stage {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
  }

  .demo__row-stage--stack {
    flex-direction: column;
    align-items: stretch;
    max-width: 24rem;
  }

  /* Icon library grid ----------------------------------------------- */

  .icon-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
    gap: 1rem;
    max-width: 56rem;
  }

  .icon-grid__cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem;
    border: 1px solid var(--color-border);
    border-radius: 0.5rem;
    background: var(--color-white);
  }

  .icon-grid__cell svg {
    width: 1.75rem;
    height: 1.75rem;
    color: var(--color-text-heading);
  }

  .icon-grid__cell code {
    font-size: 0.75rem;
    color: var(--color-text-body);
  }

  /* Variant list (e.g. icon variants) ------------------------------- */

  .styleguide__variants {
    display: grid;
    grid-template-columns: minmax(14rem, auto) 1fr;
    gap: 0.75rem 1.5rem;
    margin: 0;
  }

  .styleguide__variants dt {
    color: var(--color-text-heading);
  }

  .styleguide__variants dd {
    margin: 0;
    /* color inherits from base `html` rule (body token). */
  }
}