/**
 * @file
 * Token-backed UI Styles utility classes (SSE Formation Design System).
 *
 * Registered as ui_styles options in sse_theme.ui_styles.yml so editors can
 * apply them to Layout Builder sections/blocks. Every value reads a semantic
 * token, so dark mode + the theme switcher flip authored pages automatically.
 */

/* ── Background ───────────────────────────────────────────────────── */
.bg-default { background-color: var(--color-bg); }
.bg-surface { background-color: var(--color-surface); }
.bg-elevated { background-color: var(--color-elevated); }
.bg-brand {
  background-color: var(--color-link);
  color: var(--color-bg);
}

/* ── Text colour ──────────────────────────────────────────────────── */
.text-default { color: var(--color-fg); }
.text-muted { color: var(--color-fg-muted); }
.text-subtle { color: var(--color-fg-subtle); }
.text-link { color: var(--color-link); }
.text-on-brand { color: var(--color-bg); }

/* ── Corner radius ────────────────────────────────────────────────── */
.rounded-sm { border-radius: var(--radius-sm); }
.rounded-md { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-xl { border-radius: var(--radius-xl); overflow: hidden; }
.rounded-pill { border-radius: var(--radius-pill); }

/* ── Shadow ───────────────────────────────────────────────────────── */
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-card-hover { box-shadow: var(--shadow-card-hover); }