/* ═══════════════════════════════════════════════════════════════
   PROSE — content context via [prose] attribute.

   Shifts the entire spatial + typographic context to
   content-optimized values. Overrides the sm/md/lg tier tokens
   so the standard [size] selector in tokens.css still works.

     <section prose>...</section>            — md (default)
     <article prose size="sm">...</article>  — compact prose
     <div prose size="lg">...</div>          — spacious prose
   ═══════════════════════════════════════════════════════════════ */

/* All rules below are the `context` layer (ADR-0038 step 7): theme/prose
   context sits above `utilities`+`components`, so a [theme]/[prose] scope
   re-skins everything within it. The @layer order is declared by the co-loaded
   barrel (styles/index.css); this file only contributes to `context`. */
@layer context {
  [prose] {
    /* ── Radius — prose register: rounder bounds (max 28px) than UI. ── */
    --a-radius-min: 0.375rem; /* 6px */
    --a-radius-max: 1.75rem;  /* 28px */
    --a-radius-sm: clamp(
      var(--a-radius-min),
      calc(var(--a-radius-k) * var(--a-radius-max) * var(--a-radius-sm-k)),
      var(--a-radius-max)
    );
    --a-radius-md: clamp(
      var(--a-radius-min),
      calc(var(--a-radius-k) * var(--a-radius-max) * var(--a-radius-md-k)),
      var(--a-radius-max)
    );
    --a-radius-lg: clamp(
      var(--a-radius-min),
      calc(var(--a-radius-k) * var(--a-radius-max) * var(--a-radius-lg-k)),
      var(--a-radius-max)
    );
    --a-radius: var(--a-radius-md);

    /* ── Inset — prose register (generous; sm/md/lg = 32/40/48). ── */
    --a-inset-sm: var(--a-space-8);  /* 32px */
    --a-inset-md: var(--a-space-10); /* 40px */
    --a-inset-lg: var(--a-space-12); /* 48px */
    --a-inset: var(--a-inset-md);

    /* ── Gaps — prose register (value × --a-gap-k), one rung up from regular.
       At k=1: 12/16/20/24/28px. ── */
    --a-gap-xs: calc(var(--a-space-3) * var(--a-gap-k)); /* 12px @k=1 */
    --a-gap-sm: calc(var(--a-space-4) * var(--a-gap-k)); /* 16px @k=1 */
    --a-gap-md: calc(var(--a-space-5) * var(--a-gap-k)); /* 20px @k=1 */
    --a-gap-lg: calc(var(--a-space-6) * var(--a-gap-k)); /* 24px @k=1 */
    --a-gap-xl: calc(var(--a-space-7) * var(--a-gap-k)); /* 28px @k=1 */
    --a-gap: var(--a-gap-md);

    /* ── Sizing — larger controls ── */
    --a-size-sm: calc(var(--a-density) * 1.75rem);
    --a-size-md: calc(var(--a-density) * 2.25rem);
    --a-size-lg: calc(var(--a-density) * 2.75rem);
    --a-size: var(--a-size-md);

    /* ── Typography — override sm/md/lg tiers with prose sizes
     Also set --a-*-size to -md (base typography defaults to -sm) ── */

    /* display */
    --a-display-sm: clamp(24px, 20px + 1.5vw, 36px);
    --a-display-md: clamp(32px, 24px + 3vw, 56px);
    --a-display-lg: clamp(40px, 32px + 4vw, 80px);
    --a-display-size: var(--a-display-md);

    /* title */
    --a-title-sm: clamp(18px, 16px + 0.75vw, 24px);
    --a-title-md: clamp(24px, 20px + 1.5vw, 36px);
    --a-title-lg: clamp(28px, 24px + 2vw, 48px);
    --a-title-size: var(--a-title-md);

    /* heading */
    --a-heading-sm: 16px;
    --a-heading-md: 20px;
    --a-heading-lg: 24px;
    --a-heading-size: var(--a-heading-md);

    /* section */
    --a-section-sm: 14px;
    --a-section-md: 17px;
    --a-section-lg: 20px;
    --a-section-size: var(--a-section-md);

    /* subsection */
    --a-subsection-sm: 13px;
    --a-subsection-md: 15px;
    --a-subsection-lg: 17px;
    --a-subsection-size: var(--a-subsection-md);

    /* body */
    --a-body-sm: 14px;
    --a-body-md: 16px;
    --a-body-lg: 18px;
    --a-body-size: var(--a-body-md);

    /* deck */
    --a-deck-sm: 15px;
    --a-deck-md: 18px;
    --a-deck-lg: 20px;
    --a-deck-size: var(--a-deck-md);

    /* caption */
    --a-caption-sm: 14px;
    --a-caption-md: 15px;
    --a-caption-lg: 16px;
    --a-caption-size: var(--a-caption-md);

    /* kicker */
    --a-kicker-sm: 14px;
    --a-kicker-md: 15px;
    --a-kicker-lg: 16px;
    --a-kicker-size: var(--a-kicker-md);

    /* label */
    --a-label-sm: 12px;
    --a-label-md: 13px;
    --a-label-lg: 14px;
    --a-label-size: var(--a-label-md);

    /* metric */
    --a-metric-sm: clamp(20px, 16px + 1.5vw, 32px);
    --a-metric-md: clamp(28px, 24px + 2vw, 48px);
    --a-metric-lg: clamp(40px, 32px + 4vw, 72px);
    --a-metric-size: var(--a-metric-md);

    /* code */
    --a-code-sm: 14px;
    --a-code-md: 15px;
    --a-code-lg: 16px;
    --a-code-size: var(--a-code-md);

    /* ── UI — scale up for content context ── */
    --a-ui-px: var(--a-space-3);
    --a-ui-py: var(--a-space-2);
    --a-ui-sm: 14px;
    --a-ui-md: 15px;
    --a-ui-lg: 16px;
    --a-ui-size: var(--a-ui-md);

    --prose-max-width-sm: 55ch;
    --prose-max-width-md: 65ch;
    --prose-max-width-lg: 75ch;
    --prose-max-width: var(--prose-max-width-md);
  }

  [prose][size="lg"],
  [prose] [size="lg"] {
    --a-inset: var(--a-inset-lg);
    --a-gap: var(--a-gap-lg);
    --a-size: var(--a-size-lg);
    --a-radius: var(--a-radius-lg);
  }
  [prose][size="sm"],
  [prose] [size="sm"] {
    --a-inset: var(--a-inset-sm);
    --a-gap: var(--a-gap-sm);
    --a-size: var(--a-size-sm);
    --a-radius: var(--a-radius-sm);
  }

  /* Max-width constraint on flow content */
  [prose] > :is(p, ul, ol, blockquote, pre, table, dl) {
    max-width: var(--prose-max-width);
  }

  /* ── Prose-enhanced native elements ── */

  [prose] :is(ul, ol) {
    padding-inline-start: 1.75em;
    margin-block: 0.75em;
  }

  [prose] li + li {
    margin-block-start: 0.375em;
  }

  [prose] blockquote {
    padding: var(--a-space-4) var(--a-space-6);
    border-inline-start-width: 4px;
    font-size: var(--a-body-size);
  }

  [prose] hr {
    margin-block: var(--a-space-6);
  }

  [prose] table {
    border: 1px solid var(--a-border-subtle);
    border-radius: var(--a-radius-md);
    overflow: hidden;
  }

  [prose] th {
    background: var(--a-bg-muted);
  }

  [prose] pre {
    padding: var(--a-space-5);
  }

  [prose] img {
    border-radius: var(--a-radius-lg);
  }
}