/* Utility classes — single-purpose, token-consuming.
   Always the last layer before brand, so utilities win over components
   when composed onto markup. Every value is a token. */

@layer utilities {

    /* ── Spacing: margin ───────────────────────────────────────────
     Directions: t/r/b/l/x/y. Scale steps match --space-*. */
    .u-m-0    { margin: var(--space-0); }
    .u-m-1    { margin: var(--space-1); }
    .u-m-2    { margin: var(--space-2); }
    .u-m-3    { margin: var(--space-3); }
    .u-m-4    { margin: var(--space-4); }
    .u-m-5    { margin: var(--space-5); }
    .u-m-6    { margin: var(--space-6); }
    .u-m-7    { margin: var(--space-7); }
    .u-m-8    { margin: var(--space-8); }
    .u-m-9    { margin: var(--space-9); }
    .u-m-auto { margin: auto; }

    .u-mt-0 { margin-top: var(--space-0); }
    .u-mt-1 { margin-top: var(--space-1); }
    .u-mt-2 { margin-top: var(--space-2); }
    .u-mt-3 { margin-top: var(--space-3); }
    .u-mt-4 { margin-top: var(--space-4); }
    .u-mt-5 { margin-top: var(--space-5); }
    .u-mt-6 { margin-top: var(--space-6); }
    .u-mt-7 { margin-top: var(--space-7); }
    .u-mt-8 { margin-top: var(--space-8); }
    .u-mt-9 { margin-top: var(--space-9); }

    .u-mb-0 { margin-bottom: var(--space-0); }
    .u-mb-1 { margin-bottom: var(--space-1); }
    .u-mb-2 { margin-bottom: var(--space-2); }
    .u-mb-3 { margin-bottom: var(--space-3); }
    .u-mb-4 { margin-bottom: var(--space-4); }
    .u-mb-5 { margin-bottom: var(--space-5); }
    .u-mb-6 { margin-bottom: var(--space-6); }
    .u-mb-7 { margin-bottom: var(--space-7); }
    .u-mb-8 { margin-bottom: var(--space-8); }
    .u-mb-9 { margin-bottom: var(--space-9); }

    .u-mx-0    { margin-inline: var(--space-0); }
    .u-mx-2    { margin-inline: var(--space-2); }
    .u-mx-4    { margin-inline: var(--space-4); }
    .u-mx-6    { margin-inline: var(--space-6); }
    .u-mx-auto { margin-inline: auto; }

    .u-my-0 { margin-block: var(--space-0); }
    .u-my-2 { margin-block: var(--space-2); }
    .u-my-4 { margin-block: var(--space-4); }
    .u-my-6 { margin-block: var(--space-6); }
    .u-my-8 { margin-block: var(--space-8); }

    /* ── Spacing: padding ──────────────────────────────────────────*/
    .u-p-0 { padding: var(--space-0); }
    .u-p-1 { padding: var(--space-1); }
    .u-p-2 { padding: var(--space-2); }
    .u-p-3 { padding: var(--space-3); }
    .u-p-4 { padding: var(--space-4); }
    .u-p-5 { padding: var(--space-5); }
    .u-p-6 { padding: var(--space-6); }
    .u-p-7 { padding: var(--space-7); }
    .u-p-8 { padding: var(--space-8); }

    .u-px-0 { padding-inline: var(--space-0); }
    .u-px-2 { padding-inline: var(--space-2); }
    .u-px-4 { padding-inline: var(--space-4); }
    .u-px-5 { padding-inline: var(--space-5); }
    .u-px-6 { padding-inline: var(--space-6); }

    .u-py-0  { padding-block: var(--space-0); }
    .u-py-2  { padding-block: var(--space-2); }
    .u-py-4  { padding-block: var(--space-4); }
    .u-py-6  { padding-block: var(--space-6); }
    .u-py-8  { padding-block: var(--space-8); }
    .u-py-10 { padding-block: var(--space-10); }

    /* ── Spacing: gap ──────────────────────────────────────────────*/
    .u-gap-0 { gap: var(--space-0); }
    .u-gap-1 { gap: var(--space-1); }
    .u-gap-2 { gap: var(--space-2); }
    .u-gap-3 { gap: var(--space-3); }
    .u-gap-4 { gap: var(--space-4); }
    .u-gap-5 { gap: var(--space-5); }
    .u-gap-6 { gap: var(--space-6); }

    /* ── Layout: container + measure ───────────────────────────────*/
    .u-container {
        max-width: 80rem;           /* 1280 px */
        margin-inline: auto;
        padding-inline: var(--space-5);
    }

    /* Centered content column — paired with <app-page width="contained">
       to give a page the marketing-style constrained canvas. Wins over
       .c-page and .app-shell > .c-page because @layer utilities sits
       above @layer components in the cascade, so no specificity arms
       race is needed. Padding scales fluidly: tight on phones, spacious
       on wide monitors. */
    .u-contained {
        max-width: var(--max-content-width, 80rem);
        margin-inline: auto;
        padding-inline: clamp(var(--space-4), 4vw, var(--space-7));
    }

    .u-measure-narrow { max-width: var(--measure-narrow); }
    .u-measure-body   { max-width: var(--measure-body); }

    /* ── Width ─────────────────────────────────────────────────────*/
    .u-w-full { width: 100%; }

    /* ── Display ───────────────────────────────────────────────────*/
    .u-block        { display: block; }
    .u-inline-block { display: inline-block; }
    .u-inline       { display: inline; }
    .u-flex         { display: flex; }
    .u-inline-flex  { display: inline-flex; }
    .u-grid         { display: grid; }
    .u-hidden       { display: none; }

    /* ── Flex ──────────────────────────────────────────────────────*/
    .u-flex-row        { flex-direction: row; }
    .u-flex-col        { flex-direction: column; }
    .u-flex-wrap       { flex-wrap: wrap; }
    .u-items-start     { align-items: flex-start; }
    .u-items-center    { align-items: center; }
    .u-items-end       { align-items: flex-end; }
    .u-justify-start   { justify-content: flex-start; }
    .u-justify-center  { justify-content: center; }
    .u-justify-end     { justify-content: flex-end; }
    .u-justify-between { justify-content: space-between; }

    /* ── Text alignment ────────────────────────────────────────────*/
    .u-text-left   { text-align: left; }
    .u-text-center { text-align: center; }
    .u-text-right  { text-align: right; }

    /* ── Text family ───────────────────────────────────────────────*/
    .u-font-body    { font-family: var(--font-body); }
    .u-font-display { font-family: var(--font-display); }
    .u-font-mono    { font-family: var(--font-mono); }

    /* ── Text size ─────────────────────────────────────────────────*/
    .u-text-caption    { font-size: var(--fs-caption); }
    .u-text-ui-sm      { font-size: var(--fs-ui-sm); }
    .u-text-ui         { font-size: var(--fs-ui); }
    .u-text-body-sm    { font-size: var(--fs-body-sm); }
    .u-text-body       { font-size: var(--fs-body); }
    .u-text-body-lg    { font-size: var(--fs-body-lg); }
    .u-text-heading    { font-size: var(--fs-heading); }
    .u-text-display-s  { font-size: var(--fs-display-s); }
    .u-text-display-m  { font-size: var(--fs-display-m); }
    .u-text-display-l  { font-size: var(--fs-display-l); }
    .u-text-display-xl { font-size: var(--fs-display-xl); }

    /* ── Text color ────────────────────────────────────────────────*/
    .u-ink          { color: var(--color-ink); }
    .u-ink-soft     { color: var(--color-ink-soft); }
    .u-ink-mute     { color: var(--color-ink-mute); }
    .u-ink-info     { color: var(--color-info); }
    .u-ink-warn     { color: var(--color-warn); }
    .u-ink-error    { color: var(--color-error); }
    .u-on-dark      { color: var(--color-on-dark); }
    .u-on-dark-mute { color: var(--color-on-dark-mute); }
    .u-accent       { color: var(--color-accent); }

    /* ── Background ────────────────────────────────────────────────*/
    .u-bg-surface     { background: var(--color-surface); }
    .u-bg-surface-alt { background: var(--color-surface-alt); }
    .u-bg-ink         { background: var(--color-ink); }
    .u-bg-accent      { background: var(--color-accent); }

    /* ── Border ────────────────────────────────────────────────────*/
    .u-border        { border: 1px solid var(--color-line); }
    .u-border-top    { border-top: 1px solid var(--color-line); }
    .u-border-bottom { border-bottom: 1px solid var(--color-line); }
    .u-border-0      { border: 0; }

    /* ── Radius ────────────────────────────────────────────────────*/
    .u-rounded-sm   { border-radius: var(--radius-sm); }
    .u-rounded-md   { border-radius: var(--radius-md); }
    .u-rounded-lg   { border-radius: var(--radius-lg); }
    .u-rounded-pill { border-radius: var(--radius-pill); }
    .u-rounded-none { border-radius: 0; }

    /* ── Position ──────────────────────────────────────────────────*/
    .u-relative { position: relative; }
    .u-absolute { position: absolute; }
    .u-sticky   { position: sticky; }

    /* ── Accessibility ─────────────────────────────────────────────
     Visually hide an element while keeping it accessible to
     screen readers. */
    .u-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;
    }
}