@hotelfriendag/design-tokens 0.3.0

package/pre-built/_tokens.scss

@@ -0,0 +1,138 @@
+// HotelFriend design tokens — SCSS variables
+// Generated from docs/tokens.figma.json — do NOT edit by hand.
+
+$colorBlue50: #E9F6FC; // Light tint — active-state bg
+$colorBlue100: #EFF6FF; // Faint tint — reset-filters bg
+$colorBlue500: #24AFE8; // Canonical primary anchor (portal legacy SCSS still uses #26ADE4 — pending consolidation)
+$colorBlue600: #149AD1; // Primary hover
+$colorGray25: #FBFBFC; // Page background top
+$colorGray50: #F6F7FB; // Section backgrounds
+$colorGray100: #F1F3F6; // Inputs bg, hover-bg, header bars
+$colorGray200: #E4E8EF; // Border-light, dividers
+$colorGray300: #D1D6DD; // Default border
+$colorGray400: #AEBCCF; // Placeholder + disabled text — portal $dark__Grey
+$colorGray500: #99A1B7; // Placeholder legacy / soft helper
+$colorGray550: #7E8EA6; // Helper text on light bg
+$colorGray600: #50627E; // Cancel-button text, ink-muted
+$colorGray700: #485B78; // Steel-blue (tab/nav inactive) — Phase 2 component-tier
+$colorGray800: #4B5675; // Secondary text
+$colorGray900: #2B2B2B; // Body text, headings
+$colorGray950: #252F4A; // Deepest ink (pagination active text) — Phase 2 component-tier
+$colorGreen500: #59B59D; // Success / mint
+$colorAmber400: #FFBD5A; // Warning / buttermilk
+$colorAmber600: #FFC900; // Strong yellow — frontdesk OOO
+$colorRed400: #EA6565; // Error / rouge
+$colorRed500: #FB5A56; // Cancel-red, deleted — between rouge and crimson
+$colorRed700: #D9534F; // Deeper red — btn-danger
+$colorOrange500: #F87921; // Coral / peach
+$colorOrange700: #A55505; // Due-out brown
+$colorViolet500: #5761D8; // Offer, inspected
+$colorSlate500: #7F8FA4; // Canceled, deleted, OOS — cloud-gray
+$colorOlive700: #5B7A02; // Check-in (rare dark olive)
+$colorWhite: #FFFFFF;
+$colorBlack: #000000;
+$colorAccent: {primitive.color.blue.500}; // Brand primary — links, primary buttons, focus
+$colorAccentHover: {primitive.color.blue.600}; // Primary button hover
+$colorAccentSubtle: {primitive.color.blue.50}; // Accent tint — selected nav, active row
+$colorAccentSubtler: {primitive.color.blue.100}; // Even softer accent — reset-filters bg
+$colorOn-accent: {primitive.color.white}; // Text/icons ON accent bg (Radix-style foreground pair)
+$colorBgPage: {primitive.color.gray.25}; // Page background (outermost)
+$colorBgSection: {primitive.color.gray.50}; // Section bg, table header
+$colorBgMuted: {primitive.color.gray.100}; // Input bg / hover bg / muted surface
+$colorBgSurface: {primitive.color.white}; // Card / modal / popover surface
+$colorFg: {primitive.color.gray.900}; // Default text / heading color
+$colorFgMuted: {primitive.color.gray.800}; // Secondary text, descriptions
+$colorFgSubtle: {primitive.color.gray.550}; // Helper / hint text
+$colorFgFaint: {primitive.color.gray.400}; // Placeholder + disabled input text
+$colorBorder: {primitive.color.gray.300}; // Default 1px border (buttons, inputs, chips)
+$colorBorderSubtle: {primitive.color.gray.200}; // Faint dividers, light borders
+$colorBorderStrong: {primitive.color.gray.400}; // Hover/focus border
+$colorTabFg-inactive: {primitive.color.gray.700}; // Tab / nav-item text when NOT selected (.hf-tab, .hf-pill-tab default)
+$colorTabCount-fg: {primitive.color.gray.700}; // Count-badge text inside an inactive tab
+$colorPaginationFg-inactive: {primitive.color.gray.700}; // Pagination item text when not active
+$colorPaginationFg-active: {primitive.color.gray.950}; // Pagination item text on the subtle-gray ACTIVE bg
+$colorInputBorder: #DBDFE9; // Input + checkbox/radio border — between gray-200 (#E4E8EF) and gray-300 (#D1D6DD); portal-exact, doesn't fit a primitive step
+$colorMenuBg-hover: #F5F5F5; // Dropdown item hover bg — slightly warmer than bg-muted; portal $table__hover
+$colorStatusSuccess: {primitive.color.green.500}; // Success, due-in, clean
+$colorStatusSuccess-bg: rgba(89,181,157,0.15); // Success @15% — pill bg
+$colorStatusWarning: {primitive.color.amber.400}; // Warning, waiting, new
+$colorStatusWarning-bg: rgba(255,189,90,0.15);
+$colorStatusWarning-strong: {primitive.color.amber.600}; // Frontdesk out-of-order — more saturated yellow
+$colorStatusWarning-strong-bg: rgba(255,201,0,0.15);
+$colorStatusError: {primitive.color.red.400}; // Error, no-show, dirty, action-required
+$colorStatusError-bg: rgba(234,101,101,0.15);
+$colorStatusError-strong: {primitive.color.red.700}; // btn-danger
+$colorStatusError-alt: {primitive.color.red.500}; // btn-cancel-red, deleted variant
+$colorStatusInfo: {semantic.color.accent.default}; // Info = accent
+$colorStatusInfo-bg: rgba(36,175,232,0.15);
+$colorStatusCancel: {primitive.color.slate.500}; // Cancellations, deleted, out-of-service
+$colorStatusCancel-bg: rgba(127,143,164,0.15);
+$colorStatusCoral: {primitive.color.orange.500}; // Check-out, in-progress
+$colorStatusCoral-bg: rgba(248,121,33,0.15);
+$colorStatusViolet: {primitive.color.violet.500}; // Offer, inspected
+$colorStatusViolet-bg: rgba(87,97,216,0.15);
+$colorStatusOlive: {primitive.color.olive.700}; // Check-in (rare deep olive)
+$colorStatusOlive-bg: rgba(91,122,2,0.15);
+$colorStatusOrange-deep: {primitive.color.orange.700}; // Due-out brown
+$colorStatusOrange-deep-bg: rgba(165,85,5,0.15);
+$fontFamilyPrimary: Roboto;
+$fontWeightRegular: 400;
+$fontWeightMedium: 500;
+$fontWeightSemibold: 600;
+$fontSizeXs: 11px; // Tag labels, uppercase captions
+$fontSizeSm: 13px; // Grid headers, chips, sm buttons
+$fontSizeBase: 14px; // Body, labels (most common — 218 occurrences)
+$fontSizeMd: 15px; // Primary buttons
+$fontSizeLg: 16px; // Modal titles, large tabs
+$fontSizeXl: 18px; // Info-block titles, modal title
+$fontSize2xl: 20px; // Section heading
+$fontSizeH2: 24px;
+$fontSizePage: 26px; // Page title
+$fontSizeHero: 30px; // Dashboard stat numbers
+$lineHeightHeadings: 1.2;
+$lineHeightBody: 1.5;
+$lineHeightTight: 1;
+$spacing0: 0px;
+$spacing1: 4px;
+$spacing2: 8px;
+$spacing3: 12px;
+$spacing4: 16px;
+$spacing5: 20px; // Default section gap
+$spacing6: 24px;
+$spacing7: 30px;
+$spacing8: 32px;
+$radiusSm: 6px; // Buttons, inputs, status pills, modals (portal-exact)
+$radiusMd: 8px; // Pagination items
+$radiusLg: 9px; // Dropdowns, toasts, pill-tabs
+$radiusXl: 12px; // Large elevated cards
+$radiusPill: 99px; // Rounded pill (rare — most status pills are 6px square)
+$opacityDisabled: 0.6; // Disabled state
+$opacityTint: 0.15; // Status badge bg alpha
+$sizeSidebarExpanded: 215px;
+$sizeSidebarCollapsed: 80px;
+$sizeHeaderHeight: 60px;
+$sizeContentMax: 1440px;
+$sizeBtnDefault: 40px; // Primary button height
+$sizeBtnSm: 32px;
+$sizeBtnSearch: 38px; // Inline filter/search submit height
+$sizeInputDefault: 39px; // Form-control input height
+$sizeTapTarget: 44px; // Mobile minimum tap target
+$zIndexSidebar: 1000;
+$zIndexDropdown: 1001;
+$zIndexDatepicker: 3000;
+$zIndexStickyTopbar: 4000;
+$zIndexModalBackdrop: 10050;
+$zIndexModalDialog: 10051;
+$zIndexPreloader: 99999;
+$zIndexTopmostOverlay: 1000001; // Above all
+$motionFast: 0.1s;
+$motion: 0.2s ease-in-out; // Canonical transition
+$motionSlow: 0.3s; // Most common in legacy CSS — being normalized down to 0.2s
+$motionBouncy: 0.4s cubic-bezier(0.88, -0.99, 0, 1.81);
+$shadow: 0px 1px 8px 0px rgba(0,0,0,0.1);
+$shadowSubtle: 0px 2px 4px 0px rgba(0,0,0,0.05);
+$shadowWrapper: 0px 3px 4px 0px rgba(0,0,0,0.03);
+$shadowCard: 0px 12px 24px 0px rgba(26,26,30,0.06);
+$shadowModal: 0px 6px 18px 0px rgba(0,0,0,0.1);
+$shadowOutline: 0px 1px 2px 0px rgba(72,91,120,0.18);
+$shadowHover: 0px 2px 3px 0px rgba(0,0,0,0.06);

package/pre-built/components.css

@@ -0,0 +1,515 @@
+/*
+ * HotelFriend Design System — Component classes (.hf-*)
+ *
+ * Drop-in companion to `tokens.css` / `tailwind.css`. Defines the `.hf-*`
+ * component primitives used throughout `components.html`. Framework-agnostic
+ * — works with Tailwind v4, plain CSS, SCSS, Vue, React.
+ *
+ * Phase 1B (RFC-0002) status:
+ *   ✅ All chrome bound to SEMANTIC tokens (var(--color-hf-fg), -bg-*, -border, -accent, -status-*).
+ *   ✅ Primitives never referenced directly (except Phase-2 escape hatches — see TODOs below).
+ *   ✅ One namespace — no forked --status-* declarations; all status colors come from
+ *      `--color-hf-status-{role}` (semantic) which alias `--color-hf-{family}-{step}` (primitive).
+ *   ✅ Class names equal token names — domain→semantic mapping NOW LIVES in `status-map.json`
+ *      and is emitted to `pre-built/status.css` by `generate-tokens.cjs --target=status-css`.
+ *      This file no longer contains the mapping — consumers should `@import` both files.
+ *   ⚠ `pre-built/components.css` is still hand-mirrored from components.html (Phase 2D will generate).
+ *
+ * Phase 2 TODOs (tracked here):
+ *   1. ✅ Phase 2A done — status-map.json + emitStatusCss(). See `pre-built/status.css`.
+ *   2. ✅ Phase 2B done — 4 component-tier tokens introduced:
+ *        --color-hf-tab-fg-inactive / -count-fg
+ *        --color-hf-pagination-fg-inactive / -fg-active
+ *        --color-hf-input-border  (#DBDFE9 — was bare hex)
+ *        --color-hf-menu-bg-hover (#F5F5F5 — was bare hex)
+ *   3. Phase 2C — generate this whole file from tokens.figma.json + status-map.json (TODO).
+ *   4. Phase 2D — reconcile components.html @theme block with Phase 1B token names (TODO).
+ *
+ * BREAKING CHANGES vs Phase 1A:
+ *   - `--color-hf-primary*`   → `--color-hf-accent[ -hover / -subtle / -subtler ]`
+ *   - `--color-hf-text-*`     → `--color-hf-fg[ -muted / -subtle / -faint ]`
+ *   - `--color-hf-neutral-*`  → `--color-hf-bg-*` / `--color-hf-border[ -subtle ]`
+ *   - `--color-hf-badge-*`    → removed; replaced by domain→semantic CSS map below
+ *
+ * Usage:
+ *   <link rel="stylesheet" href="tokens.css">     ← variables first
+ *   <link rel="stylesheet" href="components.css"> ← components after
+ *   <link rel="stylesheet" href="status.css">     ← .status-{domain}-{state} rules (Phase 2A — generated from status-map.json)
+ *
+ *   Or with Tailwind v4:
+ *     @import "tailwindcss";
+ *     @import "./tailwind.css";
+ *     @import "./components.css";
+ *     @import "./status.css";
+ *
+ * STATUS PILLS — the domain→semantic mapping lives in `status-map.json` and is
+ * emitted to `pre-built/status.css` by `generate-tokens.cjs --target=status-css`.
+ * To add a new status (e.g. `booking.partial-refund`), add it to status-map.json
+ * and re-run the generator — no CSS edit needed here.
+ */
+
+/* ════════════════════════════════════════════════════════════════════════════
+ * PILL — .hf-pill (uses currentColor inherited from .status-* above)
+ * ════════════════════════════════════════════════════════════════════════════ */
+.hf-pill {
+  display: inline-flex; align-items: center; justify-content: center;
+  padding: 6px 20px;
+  border-radius: var(--radius-hf-sm, 6px);
+  font-size: var(--font-size-hf-base, 14px);
+  font-weight: var(--font-weight-hf-medium, 500);
+  line-height: var(--line-height-hf-tight, 1);
+  white-space: nowrap;
+  border: 1px solid currentColor;
+  text-align: center;
+  user-select: none;
+  transition: opacity 200ms, background-color 200ms;
+}
+.hf-pill:hover { opacity: .9; }
+.hf-pill.is-active {
+  background: transparent !important;
+  box-shadow: inset 0 0 0 1px currentColor;
+}
+.hf-pill--striped {
+  background-image: repeating-linear-gradient(
+    -45deg, currentColor 0, currentColor 1px, transparent 1px, transparent 6px
+  );
+  background-color: var(--color-hf-white, #fff) !important;
+}
+.hf-pill--dd {
+  padding-right: 32px;
+  cursor: pointer;
+  position: relative;
+}
+.hf-pill--dd::after {
+  content: '';
+  position: absolute; right: 12px; top: 50%;
+  width: 8px; height: 5px;
+  background-color: currentColor;
+  clip-path: polygon(0 0, 100% 0, 50% 100%);
+  transform: translateY(-50%);
+}
+
+/* ════════════════════════════════════════════════════════════════════════════
+ * TABS (.hf-tab) — large underline (page-nav) + small (sub-filter)
+ *
+ * ⚠ Phase 2 TODO: gray-700 used here for inactive tab color is portal-specific.
+ *    Promote to component-tier token `--hf-tab-fg-inactive`.
+ * ════════════════════════════════════════════════════════════════════════════ */
+.hf-tab {
+  padding: 22px 15px;
+  font-size: var(--font-size-hf-lg, 16px);
+  font-weight: var(--font-weight-hf-medium, 500);
+  color: var(--color-hf-tab-fg-inactive, #50627E);
+  cursor: pointer;
+  transition: color 200ms;
+  position: relative;
+  white-space: nowrap;
+  border: 0; background: 0;
+  line-height: var(--line-height-hf-tight, 1);
+  display: inline-flex; align-items: center; gap: 8px;
+}
+.hf-tab:hover { color: var(--color-hf-fg, #2B2B2B); }
+.hf-tab.is-active { color: var(--color-hf-accent, #24AFE8); }
+.hf-tab.is-active::after {
+  content: ''; position: absolute; left: 0; right: 0; bottom: -1px;
+  height: 3px; background: var(--color-hf-accent, #24AFE8);
+}
+.hf-tab:disabled { color: var(--color-hf-fg-faint, #AEBCCF); cursor: not-allowed; }
+.hf-tab:disabled:hover { color: var(--color-hf-fg-faint, #AEBCCF); }
+
+.hf-tab--sm {
+  padding: 10px 15px;
+  font-size: var(--font-size-hf-md, 15px);
+}
+
+.hf-tab__count {
+  display: inline-flex; align-items: center; justify-content: center;
+  min-width: 22px; height: 18px; padding: 0 6px;
+  background: rgba(72,91,120,.1);
+  color: var(--color-hf-tab-count-fg, #50627E);
+  border-radius: 9999px;
+  font-size: var(--font-size-hf-xs, 11px);
+  font-weight: var(--font-weight-hf-semibold, 600);
+  line-height: var(--line-height-hf-tight, 1);
+}
+.hf-tab.is-active .hf-tab__count {
+  background: var(--color-hf-accent-subtler, #EFF6FF);
+  color: var(--color-hf-accent, #24AFE8);
+}
+
+.hf-pill-tabs {
+  display: inline-flex; gap: 4px; padding: 4px;
+  background: var(--color-hf-bg-section, #F6F7FB);
+  border-radius: var(--radius-hf-lg, 9px);
+}
+.hf-pill-tab {
+  padding: 8px 14px;
+  font-size: var(--font-size-hf-base, 14px);
+  font-weight: var(--font-weight-hf-medium, 500);
+  color: var(--color-hf-tab-fg-inactive, #50627E);
+  background: transparent;
+  border: 0;
+  border-radius: var(--radius-hf-sm, 6px);
+  cursor: pointer;
+  transition: background 200ms, color 200ms;
+  white-space: nowrap;
+}
+.hf-pill-tab:hover { color: var(--color-hf-fg, #2B2B2B); }
+.hf-pill-tab.is-active {
+  background: var(--color-hf-bg-surface, #fff);
+  color: var(--color-hf-accent, #24AFE8);
+  box-shadow: 0 1px 2px rgba(0,0,0,.05);
+}
+
+/* ════════════════════════════════════════════════════════════════════════════
+ * PAGINATION (.hf-pagination) — subtle gray active (NOT accent!)
+ *
+ * ⚠ Phase 2 TODO: gray-950 (#252F4A) used for active text is portal-specific.
+ *    Promote to component-tier `--hf-pagination-fg-active`.
+ * ════════════════════════════════════════════════════════════════════════════ */
+.hf-pagination {
+  display: inline-flex; align-items: center; gap: 4px;
+  padding: 0; list-style: none;
+}
+.hf-pagination__item {
+  display: inline-flex; align-items: center; justify-content: center;
+  min-width: 34px; height: 34px;
+  padding: 0 12px;
+  font-size: var(--font-size-hf-base, 14px);
+  font-weight: var(--font-weight-hf-regular, 400);
+  color: var(--color-hf-pagination-fg-inactive, #485B78);
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: var(--radius-hf-md, 8px);
+  cursor: pointer;
+  transition: background-color 200ms, color 200ms, border-color 200ms;
+  text-decoration: none;
+}
+.hf-pagination__item:hover {
+  background: var(--color-hf-bg-muted, #F1F3F6);
+  color: var(--color-hf-fg, #2B2B2B);
+}
+.hf-pagination__item.is-active {
+  background: var(--color-hf-border-subtle, #E4E8EF);
+  border-color: var(--color-hf-border-subtle, #E4E8EF);
+  color: var(--color-hf-pagination-fg-active, #252F4A);
+  cursor: default;
+}
+.hf-pagination__item.is-active:hover { background: var(--color-hf-border-subtle, #E4E8EF); }
+.hf-pagination__item:disabled,
+.hf-pagination__item.is-disabled {
+  color: var(--color-hf-fg-faint, #AEBCCF);
+  cursor: not-allowed;
+  pointer-events: none;
+}
+.hf-pagination__ellipsis {
+  display: inline-flex; align-items: center; justify-content: center;
+  min-width: 34px; height: 34px;
+  color: var(--color-hf-gray-700, #485B78);
+  cursor: default;
+}
+
+/* ════════════════════════════════════════════════════════════════════════════
+ * ALERT (.hf-alert)
+ * ════════════════════════════════════════════════════════════════════════════ */
+.hf-alert {
+  position: relative;
+  display: flex; align-items: flex-start; gap: 16px;
+  padding: 16px 48px 14px 20px;
+  background: var(--color-hf-bg-surface, #fff);
+  border: 1px solid rgba(72,91,120,.15);
+  border-radius: var(--radius-hf-sm, 6px);
+  box-shadow: 0 2px 4px 0 rgba(72,91,120,.07);
+  overflow: hidden;
+}
+.hf-alert::before {
+  content: '';
+  position: absolute;
+  left: 0; right: 0; top: 0;
+  height: 3px;
+  background: currentColor;
+}
+.hf-alert__icon {
+  flex-shrink: 0;
+  width: 26px; height: 26px;
+  border-radius: 5px;
+  display: inline-flex; align-items: center; justify-content: center;
+  background: currentColor;
+}
+.hf-alert__icon > svg {
+  width: 16px; height: 16px;
+  color: var(--color-hf-on-accent, #fff);
+  stroke: var(--color-hf-on-accent, #fff);
+  fill: none;
+}
+.hf-alert__body { flex: 1; min-width: 0; color: var(--color-hf-fg, #2B2B2B); }
+.hf-alert__title {
+  font-size: var(--font-size-hf-xl, 18px);
+  font-weight: var(--font-weight-hf-medium, 500);
+  line-height: 1.3;
+  margin: 0 0 4px;
+  color: var(--color-hf-fg, #2B2B2B);
+}
+.hf-alert__text {
+  font-size: var(--font-size-hf-md, 15px);
+  line-height: 1.4;
+  color: var(--color-hf-gray-700, #50627E); /* TODO Phase 2 — review fg axis */
+  margin: 0;
+}
+.hf-alert__close {
+  position: absolute; top: 12px; right: 12px;
+  width: 24px; height: 24px;
+  display: inline-flex; align-items: center; justify-content: center;
+  background: transparent; border: 0; border-radius: 4px;
+  color: var(--color-hf-gray-500, #99A1B7);
+  cursor: pointer;
+  transition: color 200ms, background 200ms;
+}
+.hf-alert__close:hover {
+  color: var(--color-hf-fg, #2B2B2B);
+  background: var(--color-hf-bg-muted, #F1F3F6);
+}
+
+/* Variants — set accent color via currentColor */
+.hf-alert--success { color: var(--color-hf-status-success); }
+.hf-alert--info    { color: var(--color-hf-accent); }
+.hf-alert--warn    { color: var(--color-hf-status-warning); }
+.hf-alert--error   { color: var(--color-hf-status-error); }
+
+/* Tinted modifier */
+.hf-alert--tinted.hf-alert--success { background: rgba(89,181,157,.06); }
+.hf-alert--tinted.hf-alert--info    { background: rgba(36,175,232,.06); }
+.hf-alert--tinted.hf-alert--warn    { background: rgba(255,189,90,.10); }
+.hf-alert--tinted.hf-alert--error   { background: rgba(234,101,101,.06); }
+
+/* Page banner */
+.hf-alert--banner {
+  border-radius: 0;
+  border-left: 0; border-right: 0;
+  box-shadow: none;
+  background: currentColor;
+}
+.hf-alert--banner::before { display: none; }
+.hf-alert--banner .hf-alert__body { color: var(--color-hf-on-accent, #fff); }
+.hf-alert--banner .hf-alert__title,
+.hf-alert--banner .hf-alert__text { color: var(--color-hf-on-accent, #fff); }
+.hf-alert--banner .hf-alert__icon { background: rgba(255,255,255,.18); }
+.hf-alert--banner .hf-alert__close { color: rgba(255,255,255,.7); }
+.hf-alert--banner .hf-alert__close:hover { color: var(--color-hf-on-accent, #fff); background: rgba(255,255,255,.12); }
+
+/* Compact */
+.hf-alert--compact { padding: 10px 36px 10px 14px; gap: 10px; }
+.hf-alert--compact .hf-alert__icon { width: 20px; height: 20px; border-radius: 4px; }
+.hf-alert--compact .hf-alert__icon > svg { width: 12px; height: 12px; }
+.hf-alert--compact .hf-alert__title {
+  font-size: var(--font-size-hf-base, 14px);
+  font-weight: var(--font-weight-hf-semibold, 600);
+  margin-bottom: 0;
+}
+.hf-alert--compact .hf-alert__text { font-size: var(--font-size-hf-sm, 13px); }
+.hf-alert--compact .hf-alert__close { top: 8px; right: 8px; }
+
+/* ════════════════════════════════════════════════════════════════════════════
+ * TOAST (.hf-toast)
+ * ════════════════════════════════════════════════════════════════════════════ */
+.hf-toast {
+  display: inline-flex; align-items: center; gap: 10px;
+  padding: 10px 14px;
+  background: var(--color-hf-bg-surface, #fff);
+  border: 1px solid rgba(72,91,120,.15);
+  border-radius: var(--radius-hf-lg, 9px);
+  box-shadow: var(--shadow-hf-modal, 0 6px 18px rgba(0,0,0,.10));
+  min-width: 280px; max-width: 420px;
+  color: var(--color-hf-fg, #2B2B2B);
+  font-size: var(--font-size-hf-base, 14px);
+}
+.hf-toast__icon { flex-shrink: 0; width: 20px; height: 20px; }
+.hf-toast__text { flex: 1; }
+.hf-toast__close {
+  flex-shrink: 0;
+  width: 20px; height: 20px;
+  display: inline-flex; align-items: center; justify-content: center;
+  background: transparent; border: 0; border-radius: 4px;
+  color: var(--color-hf-gray-500, #99A1B7);
+  cursor: pointer; transition: color 200ms;
+}
+.hf-toast__close:hover { color: var(--color-hf-fg, #2B2B2B); }
+
+/* ════════════════════════════════════════════════════════════════════════════
+ * MODAL (.hf-modal)
+ * ════════════════════════════════════════════════════════════════════════════ */
+.hf-modal {
+  background: var(--color-hf-bg-surface, #fff);
+  border: 1px solid rgba(72,91,120,.15);
+  border-radius: var(--radius-hf-sm, 6px);
+  box-shadow: 0 2px 4px 0 rgba(72,91,120,.18);
+  overflow: hidden;
+  width: 100%;
+}
+.hf-modal__header {
+  display: flex; align-items: center; justify-content: space-between;
+  padding: 20px;
+  border-bottom: 1px solid var(--color-hf-border-subtle, #E4E8EF);
+}
+.hf-modal__title {
+  font-size: var(--font-size-hf-xl, 18px);
+  font-weight: var(--font-weight-hf-semibold, 600);
+  color: var(--color-hf-fg, #2B2B2B);
+  margin: 0;
+}
+.hf-modal__close {
+  width: 32px; height: 32px;
+  display: inline-flex; align-items: center; justify-content: center;
+  background: transparent;
+  border: 0;
+  border-radius: var(--radius-hf-sm, 6px);
+  color: var(--color-hf-gray-700, #50627E);
+  cursor: pointer;
+  transition: background 200ms, color 200ms;
+}
+.hf-modal__close:hover {
+  background: var(--color-hf-bg-muted, #F1F3F6);
+  color: var(--color-hf-fg, #2B2B2B);
+}
+.hf-modal__body { padding: 20px; }
+.hf-modal__footer {
+  display: flex; justify-content: flex-end; gap: 12px;
+  padding: 20px;
+  border-top: 0;
+  background: transparent;
+}
+.hf-modal--with-footer-border .hf-modal__footer {
+  border-top: 1px solid var(--color-hf-border-subtle, #E4E8EF);
+}
+
+/* ════════════════════════════════════════════════════════════════════════════
+ * CHECKBOX & RADIO (.hf-check, .hf-radio)
+ * ════════════════════════════════════════════════════════════════════════════ */
+.hf-check,
+.hf-radio {
+  appearance: none; -webkit-appearance: none;
+  position: relative; flex-shrink: 0;
+  width: 18px; height: 18px;
+  margin: 0;
+  background: transparent;
+  border: 1px solid var(--color-hf-input-border, #DBDFE9);
+  cursor: pointer;
+  transition: border-color 200ms, background-color 200ms;
+}
+.hf-check { border-radius: var(--radius-hf-sm, 6px); }
+.hf-radio { border-radius: 9999px; }
+.hf-check:hover:not(:disabled),
+.hf-radio:hover:not(:disabled) { border-color: var(--color-hf-accent, #26ADE4); }
+.hf-check:checked,
+.hf-radio:checked {
+  background: var(--color-hf-accent, #26ADE4);
+  border-color: var(--color-hf-accent, #26ADE4);
+}
+.hf-check:checked::after {
+  content: '';
+  position: absolute; top: 2px; left: 5px;
+  width: 5px; height: 10px;
+  border: solid var(--color-hf-on-accent, #fff);
+  border-width: 0 2px 2px 0;
+  transform: rotate(45deg);
+}
+.hf-radio:checked::after {
+  content: '';
+  position: absolute; top: 50%; left: 50%;
+  width: 6px; height: 6px;
+  background: var(--color-hf-on-accent, #fff); border-radius: 9999px;
+  transform: translate(-50%, -50%);
+}
+.hf-check:disabled,
+.hf-radio:disabled { cursor: not-allowed; opacity: .5; }
+.hf-check:checked:disabled,
+.hf-radio:checked:disabled {
+  background: rgba(38,173,228,.5);
+  border-color: rgba(38,173,228,.5);
+  opacity: 1;
+}
+
+/* ════════════════════════════════════════════════════════════════════════════
+ * DROPDOWN (.hf-dropdown-menu)
+ * ════════════════════════════════════════════════════════════════════════════ */
+.hf-dropdown-menu {
+  background: var(--color-hf-bg-surface, #fff);
+  border-radius: var(--radius-hf-lg, 9px);
+  box-shadow: 0 1px 10px 0 rgba(0,0,0,.1);
+  min-width: 180px;
+  padding: 6px 0;
+  border: 1px solid rgba(228,232,239,.6);
+}
+.hf-dropdown-header {
+  padding: 10px 16px 8px;
+  font-size: var(--font-size-hf-xs, 11px);
+  font-weight: var(--font-weight-hf-semibold, 600);
+  color: var(--color-hf-gray-500, #99A1B7);
+  text-transform: uppercase;
+  letter-spacing: .04em;
+}
+.hf-dropdown-item {
+  display: flex; align-items: center; gap: 10px;
+  padding: 8px 16px;
+  font-size: var(--font-size-hf-base, 14px);
+  color: var(--color-hf-fg, #2B2B2B);
+  cursor: pointer; transition: background 150ms;
+  line-height: 1.4;
+}
+.hf-dropdown-item:hover { background: var(--color-hf-menu-bg-hover, #F5F5F5); }
+.hf-dropdown-item.is-active {
+  background: var(--color-hf-accent-subtler, #EFF6FF);
+  color: var(--color-hf-accent, #24AFE8);
+}
+.hf-dropdown-item:focus-visible {
+  background: var(--color-hf-menu-bg-hover, #F5F5F5);
+  outline: 2px solid var(--color-hf-accent, #24AFE8);
+  outline-offset: -2px;
+}
+.hf-dropdown-item.danger { color: var(--color-hf-status-error, #EA6565); }
+.hf-dropdown-item.danger:hover { background: rgba(234,101,101,.08); }
+.hf-dropdown-item[aria-disabled="true"],
+.hf-dropdown-item.is-disabled {
+  color: var(--color-hf-fg-faint, #AEBCCF);
+  cursor: not-allowed;
+  pointer-events: none;
+}
+.hf-dropdown-item__shortcut {
+  margin-left: auto;
+  color: var(--color-hf-gray-500, #99A1B7);
+  font-size: 12px;
+}
+.hf-dropdown-item__icon {
+  color: var(--color-hf-gray-500, #99A1B7);
+  width: 16px; height: 16px;
+  flex-shrink: 0;
+}
+.hf-dropdown-item:hover .hf-dropdown-item__icon { color: var(--color-hf-gray-700, #50627E); }
+.hf-dropdown-item.danger .hf-dropdown-item__icon { color: currentColor; }
+.hf-dropdown-divider {
+  height: 1px;
+  background: var(--color-hf-border-subtle, #E4E8EF);
+  margin: 4px 0;
+}
+
+/* ════════════════════════════════════════════════════════════════════════════
+ * SKELETON + SPINNER
+ * ════════════════════════════════════════════════════════════════════════════ */
+@keyframes hf-shimmer {
+  0%   { background-position: -200% 0; }
+  100% { background-position:  200% 0; }
+}
+.skeleton {
+  background: linear-gradient(
+    90deg,
+    var(--color-hf-bg-muted, #F1F3F6) 25%,
+    var(--color-hf-border-subtle, #E4E8EF) 50%,
+    var(--color-hf-bg-muted, #F1F3F6) 75%
+  );
+  background-size: 200% 100%;
+  animation: hf-shimmer 1.4s infinite;
+  border-radius: 4px;
+}
+
+@keyframes hf-spin { to { transform: rotate(360deg); } }
+.hf-spin { animation: hf-spin .6s linear infinite; }