/* Universal block settings.
   Every CMS block gets a wrapper (<div class="ds-block">) and the block root
   carries [data-block]. Section rhythm + the full-bleed background live here.
   The u-* utilities are applied by the CMS block-settings UI (background,
   spacing, width, alignment, columns, box padding/margin) and sit in
   @layer ds.settings so they ALWAYS win over a block's own block.css
   (@layer ds.block) — no specificity hacks needed. */

@layer ds.foundation {
    /* Blocks carry no outer margins; vertical padding comes from --block-space. */
    /* Section rhythm — content blocks only. Chrome (<header>/<footer>) owns its
       own padding, so it's excluded (otherwise it gets a full section's padding). */
    [data-block]:not(header):not(footer) {
        --block-space: var(--space-section);
        padding-block: var(--block-space);
        background: var(--block-bg, transparent);
    }

    /* Box-spacing scale, available on the wrapper and the block root. */
    .ds-block,
    [data-block] {
        --box-sm: var(--space-4);
        --box-md: var(--space-7);
        --box-lg: var(--space-9);
    }

    /* Full-bleed background lives on the full-width wrapper; the block's own
       .ds-container nests inside and stays constrained. */
    .ds-block { background: var(--block-bg, transparent); }
}

@layer ds.settings {
    /* Header/footer/overlay blocks opt out of rhythm ("rhythm": false). */
    .u-rhythm-none { padding-block: 0; }

    /* ── Spacing ────────────────────────────────────────── */
    .u-spacing-compact  { --block-space: var(--space-section-compact); }
    .u-spacing-spacious { --block-space: var(--space-section-spacious); }

    /* ── Columns (blocks read --block-cols) ─────────────── */
    .u-cols-2 { --block-cols: 2; }
    .u-cols-3 { --block-cols: 3; }
    .u-cols-4 { --block-cols: 4; }

    /* ── Alignment ──────────────────────────────────────── */
    .u-align-center { text-align: center; }
    .u-align-left   { text-align: left; }

    /* ── Width (opt-in container constraint on the wrapper) ──
       Default = full width; blocks self-constrain via their own .ds-container. */
    .ds-block.u-w-narrow { max-width: var(--container-narrow); margin-inline: auto; }
    .ds-block.u-w-wide   { max-width: var(--container); margin-inline: auto; }

    /* ── Box spacing: per-side padding & margin ─────────── */
    .u-pt-none { padding-top: 0; }    .u-pt-sm { padding-top: var(--box-sm); }    .u-pt-md { padding-top: var(--box-md); }    .u-pt-lg { padding-top: var(--box-lg); }
    .u-pr-none { padding-right: 0; }  .u-pr-sm { padding-right: var(--box-sm); }  .u-pr-md { padding-right: var(--box-md); }  .u-pr-lg { padding-right: var(--box-lg); }
    .u-pb-none { padding-bottom: 0; } .u-pb-sm { padding-bottom: var(--box-sm); } .u-pb-md { padding-bottom: var(--box-md); } .u-pb-lg { padding-bottom: var(--box-lg); }
    .u-pl-none { padding-left: 0; }   .u-pl-sm { padding-left: var(--box-sm); }   .u-pl-md { padding-left: var(--box-md); }   .u-pl-lg { padding-left: var(--box-lg); }

    .u-mt-none { margin-top: 0; }    .u-mt-sm { margin-top: var(--box-sm); }    .u-mt-md { margin-top: var(--box-md); }    .u-mt-lg { margin-top: var(--box-lg); }
    .u-mr-none { margin-right: 0; }  .u-mr-sm { margin-right: var(--box-sm); }  .u-mr-md { margin-right: var(--box-md); }  .u-mr-lg { margin-right: var(--box-lg); }
    .u-mb-none { margin-bottom: 0; } .u-mb-sm { margin-bottom: var(--box-sm); } .u-mb-md { margin-bottom: var(--box-md); } .u-mb-lg { margin-bottom: var(--box-lg); }
    .u-ml-none { margin-left: 0; }   .u-ml-sm { margin-left: var(--box-sm); }   .u-ml-md { margin-left: var(--box-md); }   .u-ml-lg { margin-left: var(--box-lg); }

    /* ── Background ─────────────────────────────────────────
       Backgrounds remap semantic colour tokens so any token-built block stays
       readable on every surface. */
    .u-bg-surface { --block-bg: var(--color-bg); }
    .u-bg-muted   { --block-bg: var(--color-surface-2); }

    /* Brand band: fill with the brand colour, foreground = on-primary (the colour
       designed to contrast it). IMPORTANT: never reassign --color-primary or
       --color-on-primary here — --block-bg derives from --color-primary, and CSS
       resolves custom properties to their FINAL value, so reassigning them would
       collapse the background and text to the same colour. Buttons are handled by
       the scoped rules below instead. */
    .u-bg-brand {
        --block-bg: var(--color-primary);
        --color-text: var(--color-on-primary);
        --color-text-muted: color-mix(in srgb, var(--color-on-primary) 70%, transparent);
        --color-heading: var(--color-on-primary);
        --color-accent: var(--color-on-primary);
        --color-border: color-mix(in srgb, var(--color-on-primary) 24%, transparent);
        --color-surface: color-mix(in srgb, var(--color-on-primary) 10%, transparent);
        --color-focus: var(--color-on-primary);
    }
    /* On the brand band a gold-on-gold button would vanish → use the ink colour. */
    .u-bg-brand .ds-btn--primary {
        background: var(--color-on-primary);
        color: var(--color-primary);
        border-color: var(--color-on-primary);
    }
    .u-bg-brand .ds-btn--primary:hover { background: color-mix(in srgb, var(--color-on-primary) 82%, #fff); }
    .u-bg-brand .ds-btn--text,
    .u-bg-brand .ds-btn--outline-primary { color: var(--color-on-primary); border-color: color-mix(in srgb, var(--color-on-primary) 45%, transparent); }
    .u-bg-brand .ds-btn--secondary,
    .u-bg-brand .ds-btn--outline-secondary { background: transparent; color: var(--color-on-primary); border-color: color-mix(in srgb, var(--color-on-primary) 45%, transparent); }
    .u-bg-brand .ds-btn--secondary:hover,
    .u-bg-brand .ds-btn--outline-secondary:hover { background: var(--color-on-primary); color: var(--color-primary); }
    /* Inline text links: the brand colour vanishes on its own fill → use the ink colour. */
    .u-bg-brand a:not(.ds-btn) { color: var(--color-on-primary); text-underline-offset: 0.15em; }
    .u-bg-brand a:not(.ds-btn):hover { color: var(--color-on-primary); opacity: 0.82; }

    /* Dark band: light foreground. The primary button keeps its brand pop, but an
       inline link coloured --color-primary can vanish on a dark brand (e.g. a deep
       green/navy), so links are lifted to a light tint below. */
    .u-bg-dark {
        --block-bg: var(--color-surface-strong);
        --color-bg: var(--color-surface-strong);
        --color-text: #e7eaee;
        --color-text-muted: #9aa3ad;
        --color-heading: #ffffff;
        --color-border: rgb(255 255 255 / 0.16);
        --color-surface: rgb(255 255 255 / 0.06);
        --color-surface-2: rgb(255 255 255 / 0.04);
        --color-accent: color-mix(in srgb, var(--color-primary) 65%, #ffffff);
    }
    .u-bg-dark .ds-btn--secondary,
    .u-bg-dark .ds-btn--outline-secondary { background: transparent; color: var(--color-text); border-color: color-mix(in srgb, #ffffff 40%, transparent); }
    .u-bg-dark .ds-btn--secondary:hover,
    .u-bg-dark .ds-btn--outline-secondary:hover { background: #ffffff; color: #11151a; }
    /* Inline text links: lift the brand colour toward white so it stays legible on
       the dark fill (the primary button above keeps the full brand colour). */
    .u-bg-dark a:not(.ds-btn) { color: color-mix(in srgb, var(--color-primary) 50%, #ffffff); text-underline-offset: 0.15em; }
    .u-bg-dark a:not(.ds-btn):hover { color: #ffffff; }
}