@layer ds.foundation {
/* Foundation elements: buttons, forms, cards, badges, icons, divider.
   Compose these in blocks; don't restyle them. Naming: .ds-* prefix.
   Shape follows the brand: surfaces use --radius-ui, buttons use --radius-button. */

/* ── Buttons ──────────────────────────────────────────── */

.ds-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0.85em 1.5em;
    border: 1.5px solid transparent;
    border-radius: var(--radius-button);
    font: inherit;
    font-weight: var(--font-weight-medium);
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease, transform 0.16s ease;
}

.ds-btn:active { transform: translateY(1px); }

/* The six canonical link styles — mirror SilverStripe Link::$styles
   (base-linkfield.yml). An editor picks one per link; the template binds it as
   ds-btn--$Style. No modifier = bare .ds-btn (a neutral standard button). */

.ds-btn--primary { background: var(--color-primary); color: var(--color-on-primary); }
.ds-btn--primary:hover { background: var(--color-primary-hover); color: var(--color-on-primary); }

.ds-btn--outline-primary { background: transparent; border-color: var(--color-primary); color: var(--color-primary); }
.ds-btn--outline-primary:hover { background: var(--color-primary); color: var(--color-on-primary); }

.ds-btn--secondary { background: var(--color-text); color: var(--color-bg); border-color: var(--color-text); }
.ds-btn--secondary:hover { background: color-mix(in srgb, var(--color-text) 82%, transparent); }

.ds-btn--outline-secondary { background: transparent; border-color: var(--color-text); color: var(--color-text); }
.ds-btn--outline-secondary:hover { background: var(--color-text); color: var(--color-bg); }

.ds-btn--light { background: var(--color-surface-2); color: var(--color-text); border-color: var(--color-border); }
.ds-btn--light:hover { background: var(--color-surface); }

.ds-btn--text { background: transparent; color: var(--color-primary); padding-inline: 0.5em; }
.ds-btn--text:hover { color: var(--color-primary-hover); }

/* Size — default (no modifier) is medium. */
.ds-btn--sm { padding: 0.6em 1.1em; font-size: var(--text-small); }
.ds-btn--lg { padding: 1.05em 1.9em; font-size: var(--text-lead); }

/* ── Forms ────────────────────────────────────────────── */

.ds-field { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-5); }
.ds-label { font-size: var(--text-small); font-weight: var(--font-weight-medium); color: var(--color-text); }
.ds-label .ds-req { color: var(--color-primary); }

.ds-input,
.ds-textarea,
.ds-select {
    width: 100%;
    font: inherit;
    color: var(--color-text);
    background: var(--color-surface);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-ui);
    padding: 0.8em 1em;
    transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.ds-input::placeholder,
.ds-textarea::placeholder { color: var(--color-text-muted); }

.ds-input:focus,
.ds-textarea:focus,
.ds-select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primary) 16%, transparent);
}

.ds-textarea { min-height: 8rem; resize: vertical; }

.ds-check { display: flex; align-items: flex-start; gap: var(--space-3); font-size: var(--text-small); color: var(--color-text-muted); cursor: pointer; }
.ds-check input { width: 1.2em; height: 1.2em; accent-color: var(--color-primary); margin-top: 0.1em; flex-shrink: 0; }
.ds-hint { font-size: var(--text-xs); color: var(--color-text-muted); }

/* ── Cards & surfaces ─────────────────────────────────── */

.ds-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-ui);
    padding: var(--space-6);
    box-shadow: var(--shadow-sm);
}

.ds-card--muted { background: var(--color-surface-2); }
.ds-card--brand { background: var(--color-primary); color: var(--color-on-primary); border-color: transparent; }
.ds-card--brand :is(h1,h2,h3,h4,h5,h6) { color: var(--color-on-primary); }

.ds-divider { height: 1px; background: var(--color-border); border: 0; margin-block: var(--space-6); }

/* ── Badges ──────────────────────────────────────────────
   Always pill — a tag reads as a tag at any personality. */

.ds-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    font-size: var(--text-xs);
    font-weight: var(--font-weight-medium);
    padding: 0.4em 0.8em;
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--color-primary) 12%, transparent);
    color: var(--color-primary);
}

.ds-badge--outline { background: transparent; border: 1.5px solid var(--color-border); color: var(--color-text-muted); }

/* ── Icons ────────────────────────────────────────────────
   <svg class="ds-ico"><use href="#i-<name>"/></svg> — see icons.svg */

.ds-ico {
    width: 1.5rem;
    height: 1.5rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    color: var(--color-primary);
    flex-shrink: 0;
}

.ds-ico--ink { color: var(--color-text); }
.ds-ico--filled { fill: currentColor; stroke: none; }

.ds-icon-tile {
    width: 3.25rem;
    height: 3.25rem;
    border-radius: var(--radius-ui);
    background: color-mix(in srgb, var(--color-primary) 12%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ds-icon-tile .ds-ico { width: 1.75rem; height: 1.75rem; }
}