/* ============================================================
   DIGITAL BUSINESS NUGGETS — Utilities
   Spacing, alignment, visibility, containers
   ============================================================ */

@layer utilities {

  /* === Containers === */
  .container {
    width: 100%;
    max-width: var(--max-width);
    margin-inline: auto;
    padding-inline: var(--gutter);
  }

  .container--narrow {
    max-width: var(--content-width);
  }

  .container--wide {
    max-width: var(--wide-width);
  }

  .container--prose {
    max-width: var(--measure);
  }

  /* === Sections === */
  .section {
    padding-block: var(--space-16);
  }

  .section--sm {
    padding-block: var(--space-8);
  }

  .section--lg {
    padding-block: var(--space-24);
  }

  .section--tinted {
    background: var(--color-bg-recessed);
  }

  /* === Spacing (margin) === */
  .mt-0  { margin-block-start: 0; }
  .mt-2  { margin-block-start: var(--space-2); }
  .mt-4  { margin-block-start: var(--space-4); }
  .mt-6  { margin-block-start: var(--space-6); }
  .mt-8  { margin-block-start: var(--space-8); }
  .mt-10 { margin-block-start: var(--space-10); }
  .mt-12 { margin-block-start: var(--space-12); }
  .mt-16 { margin-block-start: var(--space-16); }

  .mb-0  { margin-block-end: 0; }
  .mb-2  { margin-block-end: var(--space-2); }
  .mb-4  { margin-block-end: var(--space-4); }
  .mb-6  { margin-block-end: var(--space-6); }
  .mb-8  { margin-block-end: var(--space-8); }
  .mb-10 { margin-block-end: var(--space-10); }
  .mb-12 { margin-block-end: var(--space-12); }
  .mb-16 { margin-block-end: var(--space-16); }

  /* === Spacing (gap stacks) === */
  .stack > * + * { margin-block-start: var(--space-4); }
  .stack--sm > * + * { margin-block-start: var(--space-2); }
  .stack--md > * + * { margin-block-start: var(--space-6); }
  .stack--lg > * + * { margin-block-start: var(--space-8); }
  .stack--xl > * + * { margin-block-start: var(--space-12); }

  /* === Text Alignment === */
  .text-left   { text-align: start; }
  .text-center { text-align: center; }
  .text-right  { text-align: end; }

  /* === Text Colors === */
  .text-primary   { color: var(--color-text); }
  .text-secondary { color: var(--color-text-secondary); }
  .text-tertiary  { color: var(--color-text-tertiary); }
  .text-heading   { color: var(--color-heading); }
  .text-accent    { color: var(--color-accent-text); }
  .text-gold      { color: var(--color-accent); }

  /* === Font Families === */
  .font-body    { font-family: var(--font-body); }
  .font-heading { font-family: var(--font-heading); }
  .font-ui      { font-family: var(--font-ui); }
  .font-mono    { font-family: var(--font-mono); }

  /* === Font Sizes === */
  .text-xs   { font-size: var(--text-xs); }
  .text-sm   { font-size: var(--text-sm); }
  .text-base { font-size: var(--text-base); }
  .text-lg   { font-size: var(--text-lg); }
  .text-xl   { font-size: var(--text-xl); }
  .text-2xl  { font-size: var(--text-2xl); }
  .text-3xl  { font-size: var(--text-3xl); }

  /* === Font Weights === */
  .font-normal   { font-weight: var(--weight-normal); }
  .font-medium   { font-weight: var(--weight-medium); }
  .font-semibold { font-weight: var(--weight-semibold); }
  .font-bold     { font-weight: var(--weight-bold); }

  /* === Visibility === */
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .hidden { display: none; }

  @media (max-width: 640px) {
    .hidden-mobile { display: none; }
  }

  @media (min-width: 641px) {
    .hidden-desktop { display: none; }
  }

  /* === Flex Helpers === */
  .flex         { display: flex; }
  .flex-col     { flex-direction: column; }
  .flex-wrap    { flex-wrap: wrap; }
  .items-center { align-items: center; }
  .items-start  { align-items: flex-start; }
  .justify-center  { justify-content: center; }
  .justify-between { justify-content: space-between; }
  .gap-2  { gap: var(--space-2); }
  .gap-3  { gap: var(--space-3); }
  .gap-4  { gap: var(--space-4); }
  .gap-6  { gap: var(--space-6); }
  .gap-8  { gap: var(--space-8); }

  /* === Decoration === */
  .no-underline { text-decoration: none; }
  .uppercase {
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
  }

  .gold-gradient {
    background: var(--gradient-gold);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  .divider {
    border: none;
    border-block-start: 1px solid var(--color-border);
    margin-block: var(--space-8);
  }
}