@layer layout {

  /*
   * Container, section shell, tone surfaces and grid.
   * Logical properties only: one stylesheet serves both writing directions and
   * there is no rtl stylesheet anywhere in this theme.
   */

  /* ---- Containers ---------------------------------------------------------- */

  .alasadi-container {
    inline-size: 100%;
    max-inline-size: var(--alasadi-container);
    margin-inline: auto;
    padding-inline: var(--alasadi-gutter);
  }

  .alasadi-container--wide { max-inline-size: var(--alasadi-container-wide); }
  .alasadi-container--narrow { max-inline-size: var(--alasadi-container-narrow); }
  .alasadi-container--text { max-inline-size: var(--alasadi-container-text); }

  /* ---- Section shell -------------------------------------------------------- */

  /*
   * One wrapper carries the vertical rhythm and the tone for every section in
   * the site. Because the shell is shared, two sections cannot drift apart in
   * spacing, which was the failure this system exists to prevent.
   */
  .alasadi-section {
    background-color: var(--alasadi-bg);
    color: var(--alasadi-fg);
    padding-block: var(--alasadi-section-block);
  }

  .alasadi-section__head { max-inline-size: var(--alasadi-measure); }

  .alasadi-section__head > * + * { margin-block-start: var(--alasadi-space-4); }

  .alasadi-section__body { margin-block-start: var(--alasadi-space-8); }

  .alasadi-section__head:not(:has(*)) + .alasadi-section__body { margin-block-start: 0; }

  /* ---- Tone surfaces --------------------------------------------------------- */

  /*
   * Three tones, no more. A component reads the tone channel tokens, so it needs
   * no dark variant of its own. Dark is opt-in and rationed by
   * inc/frontend/section-tone.php in Phase 06.
   */

  .is-tone-light {
    --alasadi-bg: var(--alasadi-surface);
    --alasadi-fg: var(--alasadi-ink);
    --alasadi-fg-soft: var(--alasadi-ink-soft);
    --alasadi-fg-muted: var(--alasadi-ink-muted);
    --alasadi-rule: var(--alasadi-border);
    --alasadi-rule-strong: var(--alasadi-border-strong);
  }

  .is-tone-soft {
    --alasadi-bg: var(--alasadi-surface-soft);
    --alasadi-fg: var(--alasadi-ink);
    --alasadi-fg-soft: var(--alasadi-ink-soft);
    --alasadi-fg-muted: var(--alasadi-ink-muted);
    --alasadi-rule: var(--alasadi-border);
    --alasadi-rule-strong: var(--alasadi-border-strong);
  }

  .is-tone-dark {
    --alasadi-bg: var(--alasadi-surface-inverse);
    --alasadi-fg: var(--alasadi-on-inverse);
    --alasadi-fg-soft: var(--alasadi-on-inverse);
    --alasadi-fg-muted: var(--alasadi-on-inverse-muted);
    --alasadi-rule: var(--alasadi-on-inverse-border);
    --alasadi-rule-strong: var(--alasadi-on-inverse-muted);
  }

  /* ---- Page frame ------------------------------------------------------------ */

  .alasadi-site {
    display: flex;
    flex-direction: column;
    min-block-size: 100vb;
  }

  .alasadi-site__main { flex: 1 0 auto; }

  /* ---- Grid -------------------------------------------------------------------- */

  /*
   * 4 columns below 768px, 8 up to 1023px, 12 from 1024px. The column count is a
   * token so a component can span columns without repeating breakpoints.
   */
  .alasadi-grid {
    display: grid;
    grid-template-columns: repeat(var(--alasadi-grid-columns), minmax(0, 1fr));
    gap: var(--alasadi-grid-gap);
  }

  .alasadi-grid--cards { gap: var(--alasadi-card-gap); }

  /* Auto-fitting track for card collections that should reflow by width. */
  .alasadi-grid--auto {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--alasadi-grid-min, 18rem)), 1fr));
  }

  /* ---- Flow --------------------------------------------------------------------- */

  .alasadi-flow > * + * { margin-block-start: var(--alasadi-flow-space, var(--alasadi-space-5)); }

  /* ---- Media frames ---------------------------------------------------------------- */

  /*
   * Every image sits in a fixed-ratio frame so nothing shifts while it loads.
   */
  .alasadi-media {
    position: relative;
    overflow: hidden;
    aspect-ratio: var(--alasadi-media-ratio, var(--alasadi-ratio-cover));
    background-color: var(--alasadi-surface-soft);
  }

  .alasadi-media > img,
  .alasadi-media > video {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }

  .alasadi-media--contain > img { object-fit: contain; }
}