@apliteni/apliteni-ui 0.4.0 → 0.6.0

package/src/styles/callout.css

@@ -26,28 +26,95 @@
 .ui-callout--danger { background: var(--glow-pink); }
 .ui-callout--danger .ui-callout__icon { color: var(--pink); }
 
-/* Toast — a floating, dismissible notification */
+/* ----------------------------------------------------------------------------
+ * Toast — a floating, dismissible notification.
+ * A status (colour) × style (surface) matrix, entirely token-driven:
+ *   status  success · danger · warn · info · neutral  → sets --toast-accent/-glow/-on
+ *   style   soft (tinted) · solid (filled) · outline (bordered)
+ * -------------------------------------------------------------------------- */
 .ui-toast {
+  position: relative;
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   gap: 12px;
-  padding: 13px 16px;
+  padding: 13px 15px;
   border-radius: var(--radius-md);
-  background: var(--bg-elevated);
-  box-shadow: var(--shadow-lg);
   color: var(--text);
   font-size: var(--text-base);
-  max-width: 380px;
+  width: 100%;
+  max-width: 400px;
+  overflow: hidden; /* clips the timer bar + left marker to the rounded corners */
+  animation: ui-toast-in 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
 }
-.ui-toast__icon { width: 20px; height: 20px; flex: none; display: grid; place-items: center; border-radius: 50%; }
-.ui-toast__icon svg { width: 13px; height: 13px; }
-.ui-toast--success .ui-toast__icon { background: var(--green); color: #0c0c0c; }
-.ui-toast--danger .ui-toast__icon { background: var(--pink); color: #fff; }
-.ui-toast__body { flex: 1; }
+
+/* status → the paint tokens every style below consumes (--toast-on = the ink
+   that reads on the accent when it becomes a fill) */
+.ui-toast--success { --toast-accent: var(--green); --toast-glow: var(--glow-green); --toast-on: #0c0c0c; }
+.ui-toast--danger  { --toast-accent: var(--pink);  --toast-glow: var(--glow-pink);  --toast-on: #ffffff; }
+.ui-toast--warn    { --toast-accent: var(--amber); --toast-glow: color-mix(in srgb, var(--amber) 14%, transparent); --toast-on: #0c0c0c; }
+.ui-toast--info    { --toast-accent: var(--cyan);  --toast-glow: var(--glow-cyan);  --toast-on: #0c0c0c; }
+.ui-toast--neutral { --toast-accent: var(--muted); --toast-glow: var(--surface-2); --toast-on: var(--strong); }
+
+/* left status marker (soft + outline; solid is already a full fill) */
+.ui-toast--soft::before,
+.ui-toast--outline::before {
+  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
+  width: 3px; background: var(--toast-accent);
+}
+
+.ui-toast__icon { width: 22px; height: 22px; flex: none; margin-top: 1px; display: grid; place-items: center; border-radius: 50%; background: var(--toast-accent); color: var(--toast-on); }
+.ui-toast__icon svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2; }
+.ui-toast__body { flex: 1; min-width: 0; }
 .ui-toast__title { font-weight: var(--weight-medium); color: var(--strong); }
-.ui-toast__close { background: none; border: 0; color: var(--muted); cursor: pointer; padding: 2px; display: grid; place-items: center; }
+.ui-toast__text { color: var(--dim); }
+
+/* trailing action ("Undo" / "Retry") */
+.ui-toast__action { flex: none; align-self: center; background: none; border: 0; padding: 4px 9px; border-radius: var(--radius-xs); font: inherit; font-weight: var(--weight-medium); color: var(--toast-accent); cursor: pointer; }
+.ui-toast__action:hover { background: color-mix(in srgb, var(--toast-accent) 14%, transparent); }
+
+.ui-toast__close { flex: none; align-self: flex-start; background: none; border: 0; color: var(--muted); cursor: pointer; padding: 2px; display: grid; place-items: center; }
+.ui-toast__close svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.8; }
 .ui-toast__close:hover { color: var(--text); }
 
+/* auto-dismiss progress bar — .is-running is added by wireToastStack() */
+.ui-toast__timer { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--toast-accent); opacity: 0.85; transform-origin: left; }
+.ui-toast__timer.is-running { animation: ui-toast-timer var(--toast-dur, 5s) linear forwards; }
+
+/* style: soft — tinted surface */
+.ui-toast--soft { background: var(--toast-glow); box-shadow: var(--shadow-sm); }
+
+/* style: solid — filled accent, ink flips to --toast-on */
+.ui-toast--solid { background: var(--toast-accent); color: var(--toast-on); box-shadow: var(--shadow-lg); }
+.ui-toast--solid .ui-toast__title,
+.ui-toast--solid .ui-toast__text { color: var(--toast-on); }
+.ui-toast--solid .ui-toast__text { opacity: 0.82; }
+.ui-toast--solid .ui-toast__icon { background: color-mix(in srgb, var(--toast-on) 22%, transparent); color: var(--toast-on); }
+.ui-toast--solid .ui-toast__action { color: var(--toast-on); }
+.ui-toast--solid .ui-toast__action:hover { background: color-mix(in srgb, var(--toast-on) 18%, transparent); }
+.ui-toast--solid .ui-toast__close { color: color-mix(in srgb, var(--toast-on) 68%, transparent); }
+.ui-toast--solid .ui-toast__close:hover { color: var(--toast-on); }
+.ui-toast--solid .ui-toast__timer { background: color-mix(in srgb, var(--toast-on) 55%, transparent); }
+
+/* style: outline — elevated card with a status-tinted border */
+.ui-toast--outline { background: var(--bg-elevated); box-shadow: var(--shadow-md); border: 1px solid color-mix(in srgb, var(--toast-accent) 40%, transparent); }
+
+/* compact — single line, no body text */
+.ui-toast--compact { align-items: center; padding-top: 10px; padding-bottom: 10px; }
+.ui-toast--compact .ui-toast__icon { margin-top: 0; }
+
+@keyframes ui-toast-in { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }
+@keyframes ui-toast-out { to { opacity: 0; transform: translateX(24px); } }
+@keyframes ui-toast-timer { from { transform: scaleX(1); } to { transform: scaleX(0); } }
+.ui-toast.is-leaving { animation: ui-toast-out 0.2s ease forwards; }
+
+@media (prefers-reduced-motion: reduce) {
+  .ui-toast, .ui-toast.is-leaving { animation: none; }
+  .ui-toast__timer.is-running { animation: none; }
+}
+
+/* stack container for queued toasts */
+.ui-toast-stack { display: flex; flex-direction: column; gap: 12px; width: 400px; max-width: 100%; }
+
 /* Success panel — centered confirmation, used after form submit */
 .ui-success {
   border-radius: var(--radius-lg);

package/src/styles/drawer.css

@@ -0,0 +1,166 @@
+/* ============================================================================
+ * Drawer — edge-anchored overlay panel (Sheet / Slide-over): a panel that
+ * slides in from any screen edge over a scrim. Fully token-driven so it
+ * re-themes across accents + light/dark. Shares its scrim + focus-trap concept
+ * with a future Modal (see drawer.js). `prefers-reduced-motion` drops the slide
+ * for a plain fade.
+ *
+ * Local tokens (surface/shadow/scrim) so the panel + scrim re-theme cleanly:
+ *   --drawer-surface  panel background      --drawer-shadow  panel elevation
+ *   --drawer-scrim    backdrop colour (overridden for light below)
+ * ========================================================================== */
+
+.ui-drawer {
+  --drawer-surface: var(--surface-2);
+  --drawer-shadow: var(--shadow-lg);
+  --drawer-scrim: rgba(0, 0, 0, 0.58);
+  --drawer-w: 420px;   /* left|right panels: width  */
+  --drawer-h: 45vh;    /* top|bottom panels: height */
+
+  position: fixed;
+  inset: 0;
+  z-index: var(--z-overlay);
+  pointer-events: none; /* container never blocks; scrim/panel opt back in */
+}
+:root[data-theme="light"] .ui-drawer { --drawer-scrim: rgba(20, 22, 40, 0.38); }
+
+/* Scrim — fades in; visibility trails the fade so the panel can animate out. */
+.ui-drawer__scrim {
+  position: absolute;
+  inset: 0;
+  background: var(--drawer-scrim);
+  pointer-events: auto;
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity var(--dur-med) var(--ease), visibility var(--dur-med) var(--ease);
+}
+.ui-drawer.is-open .ui-drawer__scrim { opacity: 1; visibility: visible; }
+
+/* Panel — the sliding surface. Flex column: header / scrollable body / footer. */
+.ui-drawer__panel {
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  background: var(--drawer-surface);
+  box-shadow: var(--drawer-shadow);
+  pointer-events: auto;
+  opacity: 1;
+  visibility: hidden;
+  transition:
+    transform var(--dur-med) var(--ease),
+    opacity var(--dur-med) var(--ease),
+    visibility var(--dur-med) var(--ease);
+}
+.ui-drawer__panel:focus-visible { outline: none; box-shadow: var(--drawer-shadow), var(--ring); }
+.ui-drawer.is-open .ui-drawer__panel { visibility: visible; transform: none; }
+
+/* -- Edge anchoring + slide-in direction ---------------------------------- */
+.ui-drawer--right .ui-drawer__panel,
+.ui-drawer--left  .ui-drawer__panel {
+  top: 0; bottom: 0;
+  width: min(var(--drawer-w), 100vw);
+  max-width: 100vw;
+}
+.ui-drawer--right .ui-drawer__panel {
+  right: 0;
+  border-left: 1px solid var(--border);
+  transform: translateX(100%);
+}
+.ui-drawer--left .ui-drawer__panel {
+  left: 0;
+  border-right: 1px solid var(--border);
+  transform: translateX(-100%);
+}
+.ui-drawer--top .ui-drawer__panel,
+.ui-drawer--bottom .ui-drawer__panel {
+  left: 0; right: 0;
+  height: min(var(--drawer-h), 100vh);
+  max-height: 100vh;
+}
+.ui-drawer--top .ui-drawer__panel {
+  top: 0;
+  border-bottom: 1px solid var(--border);
+  transform: translateY(-100%);
+}
+.ui-drawer--bottom .ui-drawer__panel {
+  bottom: 0;
+  border-top: 1px solid var(--border);
+  transform: translateY(100%);
+}
+
+/* -- Sizes ----------------------------------------------------------------- */
+/* left|right → width; top|bottom → height. Same names, axis chosen by side. */
+.ui-drawer--right.ui-drawer--sm, .ui-drawer--left.ui-drawer--sm { --drawer-w: 320px; }
+.ui-drawer--right.ui-drawer--md, .ui-drawer--left.ui-drawer--md { --drawer-w: 420px; }
+.ui-drawer--right.ui-drawer--lg, .ui-drawer--left.ui-drawer--lg { --drawer-w: 560px; }
+.ui-drawer--top.ui-drawer--sm, .ui-drawer--bottom.ui-drawer--sm { --drawer-h: 30vh; }
+.ui-drawer--top.ui-drawer--md, .ui-drawer--bottom.ui-drawer--md { --drawer-h: 45vh; }
+.ui-drawer--top.ui-drawer--lg, .ui-drawer--bottom.ui-drawer--lg { --drawer-h: 72vh; }
+
+/* -- Slots ----------------------------------------------------------------- */
+.ui-drawer__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 18px 20px;
+  border-bottom: 1px solid var(--border);
+  flex: none;
+}
+.ui-drawer__title {
+  margin: 0;
+  font-family: var(--font-sans);
+  font-size: 15px;
+  font-weight: 600;
+  letter-spacing: 0.01em;
+  color: var(--strong);
+}
+.ui-drawer__close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 30px; height: 30px;
+  flex: none;
+  cursor: pointer;
+  color: var(--muted);
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: var(--radius-sm);
+  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
+}
+.ui-drawer__close:hover { color: var(--strong); background: var(--surface); }
+.ui-drawer__close:focus-visible { outline: none; box-shadow: var(--ring); border-color: var(--accent); }
+.ui-drawer__close svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8; }
+
+.ui-drawer__body {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+  padding: 20px;
+  color: var(--text);
+  font-family: var(--font-sans);
+  font-size: 13px;
+  line-height: 1.55;
+}
+
+.ui-drawer__footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 10px;
+  padding: 16px 20px;
+  border-top: 1px solid var(--border);
+  background: var(--surface-2);
+  flex: none;
+}
+
+/* -- Reduced motion: no slide, just a fade -------------------------------- */
+@media (prefers-reduced-motion: reduce) {
+  .ui-drawer__panel {
+    transform: none !important;
+    opacity: 0;
+    transition: opacity var(--dur-fast) linear, visibility var(--dur-fast) linear;
+  }
+  .ui-drawer.is-open .ui-drawer__panel { opacity: 1; }
+  .ui-drawer__scrim { transition: opacity var(--dur-fast) linear, visibility var(--dur-fast) linear; }
+}

package/src/styles/dropdown.css

@@ -0,0 +1,133 @@
+/* ============================================================================
+ * Dropdown — the kit's popover-list primitive (trigger + panel + item rows).
+ * Fully token-driven so it re-themes across accents + light/dark. Shares its
+ * open/close JS with the topbar's version switcher and account menu, which keep
+ * their own bespoke classes; this file styles the standalone `dropdown()`.
+ * ========================================================================== */
+
+.ui-dropdown { position: relative; display: inline-flex; }
+
+/* Trigger — pill button: [pre] [value] [chevron] */
+.ui-dropdown__trigger {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+  font-family: var(--font-sans);
+  font-size: 12.5px;
+  font-weight: 500;
+  color: var(--text);
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-pill);
+  padding: 7px 11px 7px 13px;
+  transition: border-color 0.2s ease, background 0.2s ease;
+}
+.ui-dropdown__trigger:hover { border-color: var(--accent); }
+.ui-dropdown__trigger:focus-visible { outline: none; box-shadow: var(--ring); border-color: var(--accent); }
+.ui-dropdown__pre { color: var(--muted); }
+.ui-dropdown__value { color: var(--strong); font-weight: 600; letter-spacing: 0.01em; }
+
+/* Chevron — border caret that flips when the container is .open */
+.ui-dropdown__chevron {
+  width: 8px; height: 8px;
+  border-right: 1.6px solid var(--muted);
+  border-bottom: 1.6px solid var(--muted);
+  transform: rotate(45deg) translateY(-1px);
+  transition: transform 0.2s ease;
+  flex: none;
+}
+.ui-dropdown.open .ui-dropdown__chevron { transform: rotate(-135deg) translateY(2px); }
+
+/* Panel — the popover surface */
+.ui-dropdown__panel {
+  position: absolute;
+  top: calc(100% + 9px);
+  left: 0;
+  min-width: 240px;
+  background: var(--surface-2);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  padding: 6px;
+  box-shadow: var(--shadow-lg);
+  opacity: 0;
+  visibility: hidden;
+  transform: translateY(-6px);
+  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
+  z-index: var(--z-dropdown);
+}
+.ui-dropdown__panel.is-end { left: auto; right: 0; }
+.ui-dropdown__panel.is-scroll { max-height: 300px; overflow-y: auto; }
+.ui-dropdown.open .ui-dropdown__panel { opacity: 1; visibility: visible; transform: translateY(0); }
+
+/* Item row — [icon] [main: label + desc] [badge] [tick] */
+.ui-dropdown__item {
+  display: flex;
+  gap: 11px;
+  align-items: center;
+  padding: 9px 12px;
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  text-decoration: none;
+  color: var(--text);
+  transition: background 0.15s ease;
+}
+.ui-dropdown__item:hover { background: var(--surface); }
+.ui-dropdown__item:focus-visible { outline: none; background: var(--surface); box-shadow: var(--ring); }
+.ui-dropdown__main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
+.ui-dropdown__label { font-family: var(--font-sans); font-size: 12.5px; color: var(--strong); font-weight: 600; letter-spacing: 0.01em; }
+.ui-dropdown__desc { font-size: 11px; color: var(--muted); line-height: 1.35; }
+.ui-dropdown__ic { display: inline-flex; flex: none; color: var(--muted); }
+.ui-dropdown__ic svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8; }
+
+/* Trailing selected tick (listbox variant) */
+.ui-dropdown__tick { margin-left: auto; flex: none; display: none; color: var(--accent); }
+.ui-dropdown__tick svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2.2; }
+.ui-dropdown__item.is-selected .ui-dropdown__tick { display: inline-flex; }
+.ui-dropdown__item.is-selected .ui-dropdown__label { color: var(--accent); }
+
+/* When a row has both a badge and a tick, keep the badge from eating the margin */
+.ui-dropdown__badge + .ui-dropdown__tick { margin-left: 8px; }
+
+/* Trailing status badge */
+.ui-dropdown__badge {
+  font-size: 9.5px;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  font-weight: 700;
+  padding: 2px 7px;
+  border-radius: var(--radius-pill);
+  margin-left: auto;
+  flex: none;
+  color: var(--muted);
+  background: var(--surface);
+}
+.ui-dropdown__badge.is-live { color: var(--green); background: var(--glow-green); }
+.ui-dropdown__badge.is-accent { color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
+
+/* Disabled + danger rows */
+.ui-dropdown__item.is-disabled { opacity: 0.45; cursor: not-allowed; pointer-events: none; }
+.ui-dropdown__item.is-danger .ui-dropdown__label { color: var(--muted); }
+.ui-dropdown__item.is-danger:hover .ui-dropdown__label { color: var(--accent); }
+
+/* Grouped sections */
+.ui-dropdown__section + .ui-dropdown__section { border-top: 1px solid var(--border); margin-top: 5px; padding-top: 5px; }
+.ui-dropdown__group {
+  font-size: 10px;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  font-weight: 700;
+  color: var(--muted);
+  padding: 7px 12px 4px;
+}
+
+/* Separator */
+.ui-dropdown__sep { height: 1px; background: var(--border); margin: 5px 4px; }
+
+/* Optional pinned header/footer blocks */
+.ui-dropdown__panel > .ui-dropdown__head {
+  padding: 11px 13px;
+  margin: -6px -6px 5px;
+  border-bottom: 1px solid var(--border);
+  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
+}

package/src/styles/empty.css

@@ -0,0 +1,84 @@
+/* ============================================================================
+ * Empty state — the placeholder shown when a list, table or page has no rows.
+ * A duotone spot illustration (in the active accent, with a brand-green spark),
+ * a title, an optional line of guidance, and an optional action.
+ *
+ * Markup:
+ *   <div class="ui-empty">
+ *     <div class="ui-empty__art"><svg class="ui-illo">…</svg></div>
+ *     <div class="ui-empty__title">No people yet</div>
+ *     <div class="ui-empty__sub">Contractors and staff you add show up here.</div>
+ *     <div class="ui-empty__actions"><button class="ui-btn ui-btn--primary">…</button></div>
+ *   </div>
+ *
+ * Illustrations live in assets/illustrations.js; emptyState() in components
+ * assembles the block. The legacy line-icon slot (.ui-empty__icon) still works.
+ * ========================================================================== */
+
+.ui-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  gap: 8px;
+  padding: 48px 24px;
+  color: var(--muted);
+}
+
+/* Duotone illustration slot. */
+.ui-empty__art {
+  margin-bottom: 4px;
+}
+.ui-illo {
+  display: block;
+}
+.ui-illo__stroke {
+  stroke: var(--accent);
+  stroke-width: 2.4;
+  fill: none;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+.ui-illo__fill {
+  fill: color-mix(in srgb, var(--accent) 13%, transparent);
+  stroke: none;
+}
+.ui-illo__spark {
+  fill: var(--illo-spark, #12a150);
+  stroke: none;
+}
+
+.ui-empty__title {
+  color: var(--text);
+  font-size: var(--text-md);
+  font-weight: var(--weight-medium);
+  margin: 2px 0 0;
+}
+.ui-empty__sub {
+  font-size: var(--text-sm);
+  max-width: 340px;
+  margin: 0;
+  line-height: 1.55;
+}
+.ui-empty__actions {
+  display: flex;
+  gap: 10px;
+  justify-content: center;
+  margin-top: 12px;
+}
+
+/* Legacy line-icon slot — kept so existing .ui-empty__icon markup still works. */
+.ui-empty__icon {
+  width: 44px;
+  height: 44px;
+  margin: 0 auto 14px;
+  color: var(--muted);
+  opacity: 0.6;
+}
+.ui-empty__icon svg {
+  width: 100%;
+  height: 100%;
+  stroke: currentColor;
+  fill: none;
+  stroke-width: 1.5;
+}

package/src/styles/feedback.css

@@ -25,7 +25,7 @@
   font-family: var(--font-sans); font-size: 13px; font-weight: var(--weight-semibold); letter-spacing: .01em;
   padding: 9px 17px 9px 15px; border-radius: 999px; cursor: pointer; white-space: nowrap; overflow: hidden;
   box-shadow: 0 10px 26px var(--ui-fb-pill-glow), 0 2px 6px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.28);
-  transition: transform .2s cubic-bezier(.34,1.56,.64,1), opacity .16s ease, box-shadow .2s ease;
+  transition: transform .2s var(--easing-spring, cubic-bezier(.34,1.56,.64,1)), opacity .16s ease, box-shadow .2s ease;
 }
 .ui-fbpill.show { opacity: 1; pointer-events: auto; transform: translate(-50%, -100%) translateY(-9px) scale(1); }
 .ui-fbpill:hover { box-shadow: 0 14px 34px var(--ui-fb-pill-glow), 0 3px 9px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.34); }

package/src/styles/footer.css

@@ -0,0 +1,123 @@
+/* ============================================================================
+ * Footer — the canonical site/app footer (brand lockup, grouped link columns,
+ * legal/copyright row, optional social icons + theme/accent switcher slot).
+ * Three variants: full (marketing), slim (single legal row), app (in-product).
+ * Local --footer-* tokens map to the global scale, so it re-themes across every
+ * accent + light/dark and a host can override just the footer if it needs to.
+ * ========================================================================== */
+
+.ui-footer {
+  --footer-surface: transparent;
+  --footer-border: var(--border);
+  --footer-link: var(--muted);
+  --footer-link-hover: var(--strong);
+  --footer-title: var(--strong);
+  --footer-text: var(--dim);
+
+  background: var(--footer-surface);
+  border-top: 1px solid var(--footer-border);
+  color: var(--footer-text);
+  font-family: var(--font-sans);
+}
+.ui-footer__in {
+  width: 100%;
+  max-width: 1180px;
+  margin: 0 auto;
+  padding: 40px clamp(14px, 2.4vw, 26px) 30px;
+}
+
+/* Top block: brand + tagline + social on the left, link columns on the right. */
+.ui-footer__top {
+  display: flex;
+  justify-content: space-between;
+  gap: 40px 60px;
+  flex-wrap: wrap;
+  padding-bottom: 30px;
+}
+.ui-footer__brand { max-width: 300px; }
+.ui-footer .ui-footer__brand .brand { font-size: 15px; }
+.ui-footer__tagline {
+  margin: 12px 0 0;
+  font-size: 13px;
+  line-height: 1.6;
+  color: var(--footer-text);
+}
+
+/* Social row */
+.ui-footer__socials { display: flex; gap: 10px; margin-top: 16px; }
+.ui-footer__social {
+  width: 34px; height: 34px;
+  display: grid; place-items: center;
+  border-radius: 10px;
+  border: 1px solid var(--footer-border);
+  color: var(--footer-link);
+  background: var(--surface);
+  transition: color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
+}
+.ui-footer__social:hover { color: var(--accent); border-color: var(--accent); transform: translateY(-1px); }
+.ui-footer__social svg { width: 17px; height: 17px; display: block; }
+
+/* Link columns */
+.ui-footer__nav {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(140px, max-content));
+  gap: 30px 56px;
+}
+.ui-footer__col-title {
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--footer-text);
+  margin: 0 0 14px;
+}
+.ui-footer__links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
+.ui-footer__links a {
+  font-size: 13.5px;
+  color: var(--footer-link);
+  text-decoration: none;
+  transition: color 0.15s ease;
+}
+.ui-footer__links a:hover { color: var(--footer-link-hover); }
+
+/* Legal bar — shared by every variant */
+.ui-footer__bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px 22px;
+  flex-wrap: wrap;
+  padding-top: 22px;
+  border-top: 1px solid var(--footer-border);
+  font-size: 13px;
+  color: var(--footer-link);
+}
+.ui-footer__legal { color: var(--footer-link); }
+.ui-footer__legal-links { display: flex; gap: 22px; flex-wrap: wrap; }
+.ui-footer__legal-links a { color: var(--footer-link); text-decoration: none; transition: color 0.15s ease; }
+.ui-footer__legal-links a:hover { color: var(--footer-link-hover); }
+.ui-footer__switcher { display: inline-flex; align-items: center; gap: 12px; margin-left: auto; }
+
+/* slim — a single legal row, no divider above it. */
+.ui-footer--slim .ui-footer__in { padding-top: 24px; padding-bottom: 24px; }
+.ui-footer--slim .ui-footer__bar { padding-top: 0; border-top: 0; }
+
+/* app — compact, in-product: surface background + tighter padding. */
+.ui-footer--app {
+  --footer-surface: var(--surface);
+  border-top: 1px solid var(--footer-border);
+}
+.ui-footer--app .ui-footer__in { max-width: none; padding: 12px clamp(14px, 2.4vw, 22px); }
+.ui-footer--app .ui-footer__bar { padding-top: 0; border-top: 0; font-size: 12.5px; }
+
+/* Responsive — columns collapse to a stacked layout on narrow screens. */
+@media (max-width: 720px) {
+  .ui-footer__top { flex-direction: column; gap: 30px; }
+  .ui-footer__nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 30px; }
+  .ui-footer__brand { max-width: none; }
+}
+@media (max-width: 460px) {
+  .ui-footer__nav { grid-template-columns: 1fr; }
+  .ui-footer__bar { flex-direction: column; align-items: flex-start; }
+  .ui-footer__switcher { margin-left: 0; }
+}