/* Tokens + type classes the React motion-islands reference (islands.js).
   Values mirror the Family palette already used in styles.css; names match the
   motion-preview component sources so they drop in unchanged. */
:root {
  --bg-surface-raised: #ffffff;
  --bg-surface-muted: #f2f0ed;   /* stone */
  --border-subtle: #e7e3de;      /* line */
  --text-primary: #343433;       /* charcoal */
  --text-secondary: #474645;     /* graphite */
  --brand-flare: #ff3e00;        /* ember */
  --r-pill: 999px;
  --s6: 6px;  --s8: 8px;  --s12: 12px;  --s16: 16px;
  --inset-border: inset 0 0 0 1px #e7e3de;
  --shadow-subtle: 0 6px 20px rgba(0, 0, 0, 0.10);
}

/* Inter label used by the island buttons (matches the rest of the filterbar) */
#sort-island .t-label,
#view-island .t-label {
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 14px; font-weight: 600; letter-spacing: -0.18px;
}
#sort-island, #view-island { display: inline-flex; align-items: center; }
#sort-island iconify-icon, #view-island iconify-icon { color: inherit; }