/* ──────────────────────────────────────────────────────────────────────────────
   DΛREΛKT_ UI — ui.copy (shared styles)
   Version: 1.0.0
   • Typography tokens for readable copy blocks
   • Generic/neutral defaults - sites can override via CSS custom properties
   ──────────────────────────────────────────────────────────────────────────── */

@layer ui.copy {
  :root {
    --ui-copy-max: 720px;
    --ui-copy-margin-inline: auto; /* Allow sites to override centering */
    --ui-copy-gap: 1rem;
    --ui-copy-fg: #222;
    --ui-copy-fs: 1.125rem;
    --ui-copy-lh: 1.65;
  }

  .ui-copy__wrap {
    width: 100%;
    display: block;
  }

  .ui-copy {
    max-width: var(--ui-copy-max, 720px);
    margin: 0 var(--ui-copy-margin-inline, auto);
  }

  /* Inside columns/grids, left-align by default — centering only for standalone */
  .ui-columns__cell .ui-copy,
  .ui-grid__cell .ui-copy {
    --ui-copy-margin-inline: 0;
  }

  .ui-copy__item {
    margin: 0 0 var(--ui-copy-gap, 1rem) 0;
    color: var(--ui-copy-fg, #222);
    font-size: var(--ui-copy-fs, 1.125rem);
    line-height: var(--ui-copy-lh, 1.65);
  }

  .ui-copy__item em {
    font-style: italic;
  }

  /* ─── List mode ────────────────────────────────────────────────────── */
  .ui-copy__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--ui-copy-list-gap, 0.35rem);
  }

  .ui-copy__list-item {
    display: flex;
    align-items: flex-start;
    gap: var(--ui-copy-list-marker-gap, 0.75rem);
    color: var(--ui-copy-fg, #222);
    font-size: var(--ui-copy-fs, 1.125rem);
    line-height: var(--ui-copy-lh, 1.65);
  }

  .ui-copy__list-item::before {
    content: "";
    flex-shrink: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ui-copy-list-marker, currentColor);
    opacity: var(--ui-copy-list-marker-opacity, 0.45);
    /* Center dot with first line: half line-height minus half dot */
    margin-top: calc(var(--ui-copy-lh, 1.65) / 2 * 1em - 3px);
  }

  /* Variant: accent — ring marker matching site accent */
  .ui-copy__list--accent .ui-copy__list-item::before {
    width: 8px;
    height: 8px;
    margin-top: calc(var(--ui-copy-lh, 1.65) / 2 * 1em - 4px);
    background: var(--ui-copy-list-marker-bg, rgba(232, 101, 26, 0.15));
    border: 2px solid var(--ui-copy-list-marker-border, var(--site-accent, #E8651A));
    opacity: 1;
  }
}