@vibeuncle/gpgb-ui 0.2.0

package/styles/components.css

@@ -0,0 +1,381 @@
+/*
+ * Component classes (ds-*). They live in Tailwind's components layer so utilities (w-auto, pl-9, hidden)
+ * still override them. React wrappers in src/ only use these classes, so apps need no @source entry.
+ */
+@layer base {
+  body {
+    background: var(--background);
+    color: var(--foreground);
+    font-family: var(--font-body);
+    line-height: 1.6;
+    -webkit-font-smoothing: antialiased;
+  }
+  :focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
+  input, textarea, select { caret-color: var(--color-accent); accent-color: var(--color-accent); }
+  h1, h2, h3, .font-display { text-wrap: balance; }
+  button { color: inherit; font: inherit; }
+  button, a, input, summary, select { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
+  ::selection { background: var(--color-accent-soft); color: var(--color-ink); }
+  ::-webkit-scrollbar { width: 8px; height: 8px; }
+  ::-webkit-scrollbar-track { background: transparent; }
+  ::-webkit-scrollbar-thumb { background: var(--color-border-soft); border-radius: 4px; }
+  ::-webkit-scrollbar-thumb:hover { background: var(--color-ink-faint); }
+}
+
+@layer components {
+  /* ---- Type ---- */
+  .font-display { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.025em; line-height: 1.2; }
+  .font-editorial { font-family: var(--font-display); line-height: 1.85; }
+  /* Long-form reading: sans (serif hairlines break up on phones), 16px phone / 17px sm+. */
+  .font-answer {
+    font-family: var(--font-body); font-size: 16px; line-height: 1.85; letter-spacing: 0.01em;
+    overflow-wrap: anywhere; line-break: strict; text-wrap: pretty; -webkit-text-size-adjust: 100%;
+  }
+  @media (min-width: 640px) { .font-answer { font-size: 17px; } }
+  .ds-caption { font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-ink-soft); }
+  .ds-hint { font-size: 12px; color: var(--color-ink-faint); }
+
+  /* ---- Buttons: pills. One primary per view. ---- */
+  .ds-btn {
+    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
+    padding: 10px 20px; font-size: 14px; font-weight: 500; line-height: 1.3;
+    border: 1px solid transparent; border-radius: var(--radius-pill); cursor: pointer;
+    transition: background-color var(--duration-fast) ease-out, color var(--duration-fast) ease-out,
+      border-color var(--duration-fast) ease-out, box-shadow var(--duration-fast) ease-out,
+      transform var(--duration-fast) ease-out;
+  }
+  .ds-btn:active:not(:disabled) { transform: scale(0.97); }
+  .ds-btn:disabled, .ds-btn[aria-disabled='true'] { opacity: 0.45; cursor: not-allowed; }
+  .ds-btn-sm { padding: 6px 14px; font-size: 13px; }
+  .ds-btn-lg { padding: 12px 24px; font-size: 15px; }
+  .ds-btn-icon { padding: 8px; aspect-ratio: 1; }
+  .ds-btn-primary { background: var(--color-accent); color: var(--color-on-accent); box-shadow: var(--shadow-sm); }
+  .ds-btn-primary:hover:not(:disabled) { background: var(--color-accent-hover); box-shadow: var(--shadow-md); }
+  .ds-btn-outline { background: var(--color-surface); color: var(--color-ink); border-color: var(--color-border-soft); }
+  .ds-btn-outline:hover:not(:disabled) { border-color: var(--color-accent); background: var(--color-accent-soft); }
+  .ds-btn-ghost { background: transparent; color: var(--color-ink-soft); }
+  .ds-btn-ghost:hover:not(:disabled) { background: var(--color-surface); color: var(--color-accent-text); }
+  .ds-btn-primary:active:not(:disabled) { background: var(--color-accent-hover); box-shadow: none; }
+  .ds-btn-danger { background: var(--color-danger); color: var(--color-on-danger); }
+  .ds-btn-danger:hover:not(:disabled) { filter: brightness(0.92); }
+  /* Loading: keeps width, hides label colour, shows a spinner. Set aria-busy="true" (and ignore clicks in JS). */
+  .ds-btn[aria-busy='true'] { position: relative; color: transparent; pointer-events: none; }
+  .ds-btn[aria-busy='true']::after {
+    content: ''; position: absolute; width: 16px; height: 16px; border-radius: 50%;
+    border: 2px solid var(--color-on-accent); border-right-color: transparent; animation: ds-spin 0.7s linear infinite;
+  }
+  .ds-btn-outline[aria-busy='true']::after, .ds-btn-ghost[aria-busy='true']::after { border-color: var(--color-ink-soft); border-right-color: transparent; }
+  .ds-btn-danger[aria-busy='true']::after { border-color: var(--color-on-danger); border-right-color: transparent; }
+
+  /* ---- Forms ---- */
+  .ds-label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 500; color: var(--color-ink); }
+  .ds-input {
+    width: 100%; padding: 10px 14px; font-size: 14px; color: var(--color-ink);
+    background: var(--color-surface); border: 1px solid var(--color-border-strong);
+    border-radius: var(--radius-md); transition: border-color var(--duration-fast) ease-out;
+  }
+  .ds-input:hover:not(:disabled) { border-color: var(--color-ink-soft); }
+  .ds-input::placeholder { color: var(--color-ink-faint); }
+  .ds-input:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 1px; border-color: var(--color-focus); }
+  .ds-input:disabled { opacity: 0.55; cursor: not-allowed; }
+  .ds-input[aria-invalid='true'] { border-color: var(--color-danger); }
+  .ds-input[aria-invalid='true']:focus-visible { outline-color: var(--color-danger); border-color: var(--color-danger); }
+  .ds-input-sm { padding: 7px 12px; font-size: 13px; }
+  textarea.ds-input { resize: vertical; min-height: 88px; line-height: 1.6; }
+  .ds-error { margin-top: 6px; font-size: 12px; color: var(--color-danger); }
+  /* Checkbox / radio: native control, brand-coloured, with a comfortable hit target. */
+  .ds-check { width: 18px; height: 18px; flex-shrink: 0; cursor: pointer; }
+
+  /* Switch: <button role="switch" aria-checked> */
+  .ds-switch {
+    position: relative; width: 40px; height: 24px; flex-shrink: 0; cursor: pointer;
+    background: var(--color-border-strong); border: 0; border-radius: var(--radius-pill);
+    transition: background-color var(--duration-fast) ease-out;
+  }
+  .ds-switch::after {
+    content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px;
+    background: #fff; border-radius: 50%; box-shadow: var(--shadow-sm);
+    transition: transform var(--duration-base) var(--ease-spring);
+  }
+  .ds-switch::before { content: ''; position: absolute; inset: -10px -4px; } /* 44px hit area */
+  .ds-switch[aria-checked='true'] { background: var(--color-accent); }
+  .ds-switch[aria-checked='true']::after { transform: translateX(16px); }
+  .ds-switch:disabled { opacity: 0.45; cursor: not-allowed; }
+
+  /* ---- Surfaces ---- */
+  .ds-card {
+    background: var(--color-surface); border: 1px solid var(--color-border-soft);
+    border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
+  }
+  .ds-card-interactive { transition: box-shadow var(--duration-base) var(--ease-out), border-color var(--duration-fast) ease-out, transform var(--duration-base) var(--ease-out); }
+  .ds-card-interactive:hover { border-color: var(--color-accent); box-shadow: var(--shadow-md); transform: translateY(-2px); }
+  .ds-card-interactive:active { transform: translateY(0); box-shadow: var(--shadow-sm); }
+  .ds-panel { background: var(--color-paper-deep); border-radius: var(--radius-lg); }
+
+  /* ---- Badges & chips ---- */
+  .ds-badge {
+    display: inline-flex; align-items: center; padding: 4px 12px; font-size: 12px; font-weight: 500;
+    letter-spacing: 0.02em; border-radius: var(--radius-pill); border: 1px solid transparent;
+  }
+  .ds-badge-sm { padding: 2px 8px; font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; }
+  .ds-badge-accent { background: var(--color-accent); color: var(--color-on-accent); }
+  .ds-badge-ink { background: var(--color-ink); color: var(--color-paper); }
+  .ds-badge-tint { background: var(--color-accent-soft); color: var(--color-ink); }
+  .ds-badge-outline { background: transparent; color: var(--color-ink-soft); border-color: var(--color-border-soft); }
+  .ds-badge-danger { background: transparent; color: var(--color-danger); border-color: currentColor; }
+
+  /* ---- Segmented control / tabs (role=tablist) ---- */
+  .ds-tabs {
+    display: flex; gap: 6px; padding: 4px; width: fit-content; background: var(--color-surface);
+    border: 1px solid var(--color-border-soft); border-radius: var(--radius-md);
+  }
+  .ds-tab {
+    padding: 6px 12px; font-size: 12px; font-weight: 500; color: var(--color-ink-soft); cursor: pointer;
+    border: 0; background: transparent; border-radius: var(--radius-sm);
+    transition: background-color var(--duration-fast) ease-out, color var(--duration-fast) ease-out;
+  }
+  .ds-tab:hover { color: var(--color-accent-text); }
+  .ds-tab[aria-selected='true'], .ds-tab[aria-pressed='true'] { background: var(--color-accent); color: var(--color-on-accent); }
+
+  /* ---- Modal ---- */
+  .ds-backdrop {
+    position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center;
+    padding: 16px; background: color-mix(in srgb, var(--color-scrim) 75%, transparent);
+    animation: backdrop-in var(--duration-base) ease-out;
+  }
+  .ds-modal {
+    width: 100%; max-width: 480px; max-height: calc(100dvh - 32px); overflow: auto; overscroll-behavior: contain; padding: 24px;
+    background: var(--color-surface); border: 1px solid var(--color-border-soft);
+    border-radius: var(--radius-xl); box-shadow: var(--shadow-lg);
+    animation: modal-in var(--duration-base) var(--ease-out);
+  }
+
+  /* ---- Feedback ---- */
+  .ds-toast {
+    position: fixed; top: 16px; left: 0; right: 0; margin-inline: auto; width: fit-content; z-index: 60;
+    max-width: calc(100vw - 32px); padding: 8px 16px; font-size: 14px; color: var(--color-paper); background: var(--color-ink);
+    border-radius: var(--radius-pill); box-shadow: var(--shadow-lg);
+    animation: toast-in var(--duration-base) var(--ease-out);
+  }
+  .ds-toast-error { background: var(--color-danger); color: var(--color-on-danger); }
+  .ds-alert {
+    padding: 12px 16px; font-size: 14px; border-radius: var(--radius-md);
+    background: var(--color-accent-soft); color: var(--color-ink); border: 1px solid var(--color-border-soft);
+  }
+  .ds-alert-danger { color: var(--color-danger); border-color: var(--color-danger); background: transparent; }
+  .ds-alert-warn { color: var(--color-warn); border-color: var(--color-warn); background: transparent; }
+  .ds-empty { padding: 48px 24px; text-align: center; color: var(--color-ink-soft); }
+  .ds-skeleton {
+    background: linear-gradient(100deg, color-mix(in srgb, var(--color-border-soft) 65%, transparent) 30%, color-mix(in srgb, var(--color-border-soft) 25%, transparent) 50%, color-mix(in srgb, var(--color-border-soft) 65%, transparent) 70%) 0 0 / 250% 100%;
+    border-radius: var(--radius-sm); animation: ds-shimmer 1.5s linear infinite;
+  }
+  .ds-spinner {
+    width: 20px; height: 20px; border: 2px solid var(--color-border-soft); border-top-color: var(--color-accent);
+    border-radius: 50%; animation: ds-spin 0.7s linear infinite;
+  }
+
+  /* ---- Table ---- */
+  .ds-table { width: 100%; border-collapse: collapse; font-size: 14px; }
+  .ds-table th { padding: 10px 14px; text-align: left; font-size: 12px; font-weight: 500; color: var(--color-ink-soft); border-bottom: 1px solid var(--color-border-soft); }
+  .ds-table td { font-variant-numeric: tabular-nums; padding: 12px 14px; border-bottom: 1px solid var(--color-border-soft); }
+  .ds-table tbody tr:hover { background: var(--color-paper-deep); }
+
+
+  /* ---- Overlays ---- */
+  .ds-popover-wrap { position: relative; display: inline-block; }
+  .ds-popover {
+    position: absolute; top: calc(100% + 8px); z-index: 30; min-width: 200px; max-width: min(320px, calc(100vw - 32px));
+    padding: 6px; background: var(--color-surface); border: 1px solid var(--color-border-soft);
+    border-radius: var(--radius-lg); box-shadow: var(--shadow-md); transform-origin: top;
+    animation: popover-in var(--duration-fast) var(--ease-out);
+  }
+  .ds-popover-start { left: 0; transform-origin: top left; }
+  .ds-popover-end { right: 0; transform-origin: top right; }
+  .ds-popover-body { padding: 10px 12px; font-size: 14px; }
+  .ds-menu-item {
+    display: flex; width: 100%; align-items: center; gap: 10px; padding: 8px 12px; font-size: 14px; text-align: left;
+    color: var(--color-ink); background: transparent; border: 0; border-radius: var(--radius-md); cursor: pointer;
+    transition: background-color var(--duration-fast) ease-out, color var(--duration-fast) ease-out;
+  }
+  .ds-menu-item:hover, .ds-menu-item:focus-visible { background: var(--color-accent-soft); outline: none; }
+  .ds-menu-item:focus-visible { box-shadow: inset 0 0 0 2px var(--color-focus); }
+  .ds-menu-item[aria-disabled='true'] { opacity: 0.45; cursor: not-allowed; pointer-events: none; }
+  .ds-menu-item-danger { color: var(--color-danger); }
+  .ds-menu-item-danger:hover, .ds-menu-item-danger:focus-visible { background: color-mix(in srgb, var(--color-danger) 12%, transparent); }
+  .ds-menu-item .ds-menu-hint { margin-left: auto; font-size: 12px; color: var(--color-ink-faint); }
+  .ds-menu-sep { height: 1px; margin: 6px 4px; background: var(--color-border-soft); }
+  .ds-menu-label { padding: 6px 12px 4px; font-size: 12px; color: var(--color-ink-soft); }
+
+  .ds-tip-wrap { position: relative; display: inline-flex; }
+  .ds-tip {
+    position: absolute; bottom: calc(100% + 8px); left: 50%; z-index: 40; width: max-content; max-width: 240px;
+    padding: 5px 10px; font-size: 12px; line-height: 1.4; color: var(--color-paper); background: var(--color-ink);
+    border-radius: var(--radius-sm); box-shadow: var(--shadow-md); pointer-events: none;
+    opacity: 0; transform: translate(-50%, 4px); transition: opacity var(--duration-fast) ease-out, transform var(--duration-fast) var(--ease-out);
+  }
+  .ds-tip-wrap:hover .ds-tip, .ds-tip-wrap:focus-within .ds-tip { opacity: 1; transform: translate(-50%, 0); transition-delay: 350ms, 350ms; }
+  .ds-tip-bottom .ds-tip { bottom: auto; top: calc(100% + 8px); transform: translate(-50%, -4px); }
+  .ds-tip-bottom:hover .ds-tip, .ds-tip-bottom:focus-within .ds-tip { transform: translate(-50%, 0); }
+  @media (hover: none) { .ds-tip { display: none; } }
+
+  /* Sheet: bottom sheet (phone) or side drawer (nav). Stays mounted so it can slide; closed = inert. */
+  .ds-sheet-root { position: fixed; inset: 0; z-index: 50; transition: opacity var(--duration-base) ease-out; }
+  .ds-sheet-root[data-open='false'] { opacity: 0; pointer-events: none; }
+  .ds-sheet-scrim { position: absolute; inset: 0; background: color-mix(in srgb, var(--color-scrim) 55%, transparent); }
+  .ds-sheet {
+    position: absolute; display: flex; flex-direction: column; background: var(--color-surface);
+    box-shadow: var(--shadow-lg); transition: transform 300ms var(--ease-out);
+  }
+  .ds-sheet-bottom { inset-inline: 0; bottom: 0; max-height: 80dvh; border-radius: var(--radius-xl) var(--radius-xl) 0 0; border-top: 1px solid var(--color-border-soft); }
+  .ds-sheet-left { top: 0; bottom: 0; left: 0; width: min(320px, 86vw); border-right: 1px solid var(--color-border-soft); }
+  .ds-sheet-root[data-open='false'] .ds-sheet-bottom { transform: translateY(100%); }
+  .ds-sheet-root[data-open='false'] .ds-sheet-left { transform: translateX(-100%); }
+  .ds-sheet-grab { width: 40px; height: 4px; margin: 8px auto 4px; border-radius: 9999px; background: var(--color-border-strong); opacity: 0.5; }
+  .ds-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--color-border-soft); }
+  .ds-sheet-body { overflow-y: auto; overscroll-behavior: contain; padding: 16px; }
+
+  /* ---- Navigation ---- */
+  .ds-nav-link {
+    display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; font-size: 14px; font-weight: 500;
+    color: var(--color-ink-soft); border-radius: var(--radius-pill);
+    transition: background-color var(--duration-fast) ease-out, color var(--duration-fast) ease-out;
+  }
+  .ds-nav-link:hover { color: var(--color-accent-text); background: var(--color-surface); }
+  .ds-nav-link[aria-current='page'] { color: var(--color-ink); background: var(--color-accent-soft); }
+  .ds-drawer-link {
+    display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 10px 14px; font-size: 16px; color: var(--color-ink);
+    border-radius: var(--radius-md); transition: background-color var(--duration-fast) ease-out;
+  }
+  .ds-drawer-link:hover { background: var(--color-paper-deep); }
+  .ds-drawer-link[aria-current='page'] { background: var(--color-accent-soft); font-weight: 500; }
+  .ds-avatar {
+    display: inline-grid; place-items: center; width: 32px; height: 32px; flex-shrink: 0; overflow: hidden;
+    font-size: 13px; font-weight: 500; color: var(--color-ink); background: var(--color-accent-soft); border-radius: 50%;
+  }
+  .ds-avatar img { width: 100%; height: 100%; object-fit: cover; }
+  .ds-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: 13px; color: var(--color-ink-soft); }
+  .ds-crumbs li { display: inline-flex; align-items: center; gap: 6px; }
+  .ds-crumbs [aria-current='page'] { color: var(--color-ink); font-weight: 500; }
+  .ds-steps { display: flex; align-items: center; gap: 4px; }
+  .ds-step {
+    display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; font-size: 12px; font-weight: 500;
+    color: var(--color-ink-soft); border-radius: var(--radius-pill); transition: background-color var(--duration-base) ease-out, color var(--duration-base) ease-out;
+  }
+  .ds-step-dot {
+    display: inline-grid; place-items: center; width: 20px; height: 20px; font-size: 11px; border-radius: 50%;
+    background: var(--color-surface); border: 1px solid var(--color-border-strong); color: var(--color-ink-soft);
+  }
+  .ds-step[aria-current='step'] { background: var(--color-accent-soft); color: var(--color-ink); }
+  .ds-step[aria-current='step'] .ds-step-dot { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-on-accent); }
+  .ds-step[data-state='done'] .ds-step-dot { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-paper); }
+  .ds-step-line { width: 12px; height: 1px; background: var(--color-border-strong); opacity: 0.5; }
+  @media (max-width: 639px) { .ds-step:not([aria-current='step']) .ds-step-label { display: none; } }
+  .ds-footer { margin-top: 64px; padding: 32px 0 40px; border-top: 1px solid var(--color-border-soft); font-size: 13px; color: var(--color-ink-soft); }
+  .ds-footer a { color: inherit; } .ds-footer a:hover { color: var(--color-accent-text); }
+
+  /* ---- Page shells ---- */
+  .ds-page { display: flex; min-height: 100dvh; flex-direction: column; background: var(--color-paper); }
+  .ds-page > main { flex: 1; }
+  .ds-page-centered { display: grid; min-height: 100dvh; place-items: center; padding: 24px 16px; background: var(--color-paper); }
+  .ds-page-centered > .ds-card { width: 100%; max-width: 400px; padding: 32px; border-radius: var(--radius-xl); }
+  .ds-shell { display: grid; gap: 24px; }
+  @media (min-width: 1024px) { .ds-shell { grid-template-columns: 240px minmax(0, 1fr); } .ds-shell-wide { grid-template-columns: 280px minmax(0, 1fr); } }
+  .ds-shell > aside { align-self: start; }
+  @media (min-width: 1024px) { .ds-shell > aside { position: sticky; top: 24px; } }
+  .ds-page-title { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 32px; }
+
+  /* ---- Header / layout ---- */
+  .ds-header { border-bottom: 1px solid var(--color-border-soft); }
+  /* Hairline between the 大道大商 mark and the app name, so the graphic logo and the app title don't read as one phrase. */
+  .ds-brand-divider { width: 1px; height: 20px; flex-shrink: 0; background: var(--color-border-strong); opacity: 0.55; }
+  .ds-container { margin-inline: auto; width: 100%; max-width: 72rem; padding-inline: 24px; }
+  /* Underline draws in from the left on hover. */
+  .ds-link {
+    color: var(--color-ink-soft); text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
+    padding-bottom: 2px; transition: color var(--duration-fast), background-size var(--duration-base) var(--ease-out);
+  }
+  .ds-link:hover, .ds-link[aria-current='true'] { color: var(--color-accent-text); }
+  .ds-link:hover { background-size: 100% 1px; }
+  .ds-link[aria-current='true'] { font-weight: 500; }
+
+  /* ---- Motion vocabulary ---- */
+  /* Stagger: children rise in one after another. Put on a list/grid parent; capped at 12 steps. */
+  .ds-stagger > * { animation: entry-in var(--duration-slow) var(--ease-out) both; animation-delay: calc(var(--i, 0) * var(--stagger-step)); }
+  .ds-stagger > :nth-child(2) { --i: 1; } .ds-stagger > :nth-child(3) { --i: 2; } .ds-stagger > :nth-child(4) { --i: 3; }
+  .ds-stagger > :nth-child(5) { --i: 4; } .ds-stagger > :nth-child(6) { --i: 5; } .ds-stagger > :nth-child(7) { --i: 6; }
+  .ds-stagger > :nth-child(8) { --i: 7; } .ds-stagger > :nth-child(9) { --i: 8; } .ds-stagger > :nth-child(10) { --i: 9; }
+  .ds-stagger > :nth-child(11) { --i: 10; } .ds-stagger > :nth-child(n+12) { --i: 11; }
+
+  /* Scroll reveal: rises as it enters the viewport. No JS; browsers without scroll timelines show it as-is. */
+  @supports (animation-timeline: view()) {
+    .ds-reveal { animation: reveal linear both; animation-timeline: view(); animation-range: entry 5% entry 40%; }
+  }
+
+  /* Seal stamp: the brand's one authored moment. Use once, on a meaningful success (published, saved, signed up). */
+  .ds-stamp {
+    position: relative; display: inline-grid; place-items: center; width: 64px; height: 64px; flex-shrink: 0;
+    color: var(--color-on-accent); background: var(--color-accent); border-radius: 50%; box-shadow: var(--shadow-md);
+    transform: rotate(-6deg); animation: stamp-in var(--duration-stamp) var(--ease-out) both;
+  }
+  .ds-stamp::before { content: ''; position: absolute; inset: 5px; border-radius: 50%; border: 1.5px solid currentColor; opacity: 0.55; }
+  .ds-stamp::after {
+    content: ''; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--color-accent);
+    animation: stamp-ring 700ms var(--ease-out) 180ms both; pointer-events: none;
+  }
+  .ds-stamp-lg { width: 88px; height: 88px; }
+
+  /* Photo slideshow: slow cross-fade and a gentle drift (from gpgb-albums). Use together on the visible slide. */
+  .animate-fade-in { animation: fade-in 1.2s var(--ease-standard) both; }
+  .animate-drift { animation: drift 7s linear both; }
+
+  /* Entry / reveal helpers */
+  .animate-backdrop-in { animation: backdrop-in var(--duration-base) ease-out; }
+  .animate-modal-in { animation: modal-in var(--duration-base) var(--ease-out); }
+  .animate-entry-in { animation: entry-in var(--duration-slow) var(--ease-out) both; }
+  .animate-slide-next { animation: slide-in-next 220ms var(--ease-out); }
+  .animate-slide-prev { animation: slide-in-prev 220ms var(--ease-out); }
+
+  /* Touch: >=16px inputs (iOS zoom) and 44px tap targets; fine pointers keep compact sizes. */
+  @media (pointer: coarse) {
+    .ds-input, .ds-input-sm { font-size: 16px; padding-top: 11px; padding-bottom: 11px; }
+    .ds-btn { min-height: 44px; }
+    .ds-tab { min-height: 40px; }
+    .ds-menu-item { min-height: 44px; }
+    .ds-nav-link { min-height: 40px; }
+  }
+}
+
+/* The 大道大商 wordmark is dark slate on transparent: lift to light in dark mode. */
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme='light']) .brand-logo { filter: brightness(0) invert(1); opacity: 0.85; }
+}
+[data-theme='dark'] .brand-logo { filter: brightness(0) invert(1); opacity: 0.85; }
+
+@keyframes backdrop-in { from { opacity: 0; } to { opacity: 1; } }
+@keyframes modal-in { from { opacity: 0; transform: scale(0.97) translateY(4px); } to { opacity: 1; transform: scale(1) translateY(0); } }
+@keyframes entry-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
+@keyframes slide-in-next { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: translateX(0); } }
+@keyframes slide-in-prev { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: translateX(0); } }
+@keyframes ds-spin { to { transform: rotate(360deg); } }
+@keyframes ds-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
+@keyframes popover-in { from { opacity: 0; transform: scale(0.97) translateY(-4px); } to { opacity: 1; transform: scale(1) translateY(0); } }
+@keyframes toast-in { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: translateY(0); } }
+@keyframes reveal { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
+@keyframes stamp-in {
+  0% { opacity: 0; transform: scale(1.8) rotate(-16deg); }
+  55% { opacity: 1; transform: scale(0.93) rotate(-4deg); }
+  100% { opacity: 1; transform: scale(1) rotate(-6deg); }
+}
+@keyframes stamp-ring { from { opacity: 0.5; transform: scale(1); } to { opacity: 0; transform: scale(1.7); } }
+@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
+@keyframes drift { from { transform: scale(1); } to { transform: scale(1.06); } }
+
+@media (prefers-reduced-motion: reduce) {
+  .ds-reveal { animation: none !important; }
+  .ds-skeleton { animation: none !important; background: color-mix(in srgb, var(--color-border-soft) 60%, transparent); }
+  .ds-stamp::after { display: none; }
+  *, *::before, *::after {
+    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important; scroll-behavior: auto !important;
+  }
+}

package/styles/fonts.css

@@ -0,0 +1,8 @@
+/* Optional. Apps that load Noto SC via next/font can skip this. Needs @fontsource/noto-sans-sc and
+   @fontsource/noto-serif-sc installed in the app. */
+@import '@fontsource/noto-sans-sc/400.css';
+@import '@fontsource/noto-sans-sc/500.css';
+@import '@fontsource/noto-sans-sc/700.css';
+@import '@fontsource/noto-serif-sc/400.css';
+@import '@fontsource/noto-serif-sc/500.css';
+@import '@fontsource/noto-serif-sc/700.css';

package/styles/index.css

@@ -0,0 +1,5 @@
+/* One import for an app:  @import '@vibeuncle/gpgb-ui/styles.css';  (after @import 'tailwindcss') */
+/* Lets the app's Tailwind generate the utilities the React components in ../src use. */
+@source '../src';
+@import './tokens.css';
+@import './components.css';

package/styles/tokens.css

@@ -0,0 +1,119 @@
+/*
+ * 大道大商 design tokens — canonical source. Values are greatpath-draw's (the reference app), plus the
+ * gaps filled from siblings: danger/warn + shadows + radii (jiqun-studio), easing (gpgb-albums),
+ * paper-deep (jielong). Light by default; dark follows prefers-color-scheme.
+ * Never hard-code a hex in an app: use these tokens (bg-paper, text-ink-soft, border-border-soft ...).
+ */
+@theme static {
+  /* Surfaces */
+  --color-paper: #faf6ee;        /* page background */
+  --color-paper-deep: #f1eadb;   /* inset / recessed areas, table stripes */
+  --color-surface: #ffffff;      /* cards, inputs, modals */
+  /* Ink (text) */
+  --color-ink: #221f1a;
+  --color-ink-soft: #6b6458;     /* secondary text */
+  --color-ink-faint: #766e59;    /* hints, placeholders (AA on paper) */
+  /* Lines */
+  --color-border-soft: #e8e0d1;   /* decorative dividers, card edges */
+  --color-border-strong: #8f8676; /* form-control edges, switch track (3:1+ on paper/surface) */
+  /* Accent: the VI primary orange */
+  --color-accent: #ff7f20;
+  --color-accent-hover: #d96c1b;
+  --color-accent-soft: #ffebdb;
+  --color-accent-text: #a84a0a;   /* accent used AS TEXT/icon: 4.8:1+ on paper, surface, paper-deep and accent-soft. Fills use --color-accent */
+  --color-focus: #d96c1b;         /* focus ring (3:1+ against paper and surface) */
+  /* Feedback */
+  --color-danger: #c62828;
+  --color-warn: #8a5a20;
+  --color-success: #2e7d4f;
+  --color-on-accent: #ffffff;    /* text ON accent fills: white in light (the reference look; 2.5:1, keep labels >=14px medium). Dark mode uses ink */
+  --color-on-danger: #ffffff;    /* text on danger fills */
+  --color-scrim: #1c1a16;        /* photo/modal overlay base; stays dark in both themes */
+
+  /* Type */
+  --font-display: 'Noto Serif SC', 'Songti SC', serif;
+  --font-body: 'Noto Sans SC', 'PingFang SC', system-ui, sans-serif;
+
+  /* Radii: pill = buttons/badges/chips, lg = cards, md = inputs/segmented, sm = tags */
+  --radius-sm: 6px;
+  --radius-md: 8px;
+  --radius-lg: 12px;
+  --radius-xl: 16px;   /* login/empty-state cards, modals */
+  --radius-pill: 9999px;
+
+  /* Elevation */
+  --shadow-sm: 0 1px 2px rgba(34, 31, 26, 0.06);
+  --shadow-md: 0 4px 16px rgba(34, 31, 26, 0.08);
+  --shadow-lg: 0 12px 32px rgba(34, 31, 26, 0.12);
+
+  /* Motion */
+  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
+  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);   /* entrances: modal, slide, toast */
+  --duration-fast: 150ms;   /* hover, focus, press */
+  --duration-base: 200ms;   /* modal-in, slide */
+  --duration-slow: 350ms;   /* list entry */
+  --duration-stamp: 560ms;  /* the one authored moment: seal stamp */
+  --ease-spring: cubic-bezier(0.34, 1.25, 0.64, 1);   /* gentle settle, not a bounce: switch thumb */
+  --stagger-step: 45ms;
+}
+
+:root {
+  color-scheme: light dark;
+  --background: var(--color-paper);
+  --foreground: var(--color-ink);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme='light']) {
+    --color-paper: #1c1a16;
+    --color-paper-deep: #2a2620;
+    --color-surface: #262320;
+    --color-ink: #f1ece1;
+    --color-ink-soft: #b5ac9c;
+    --color-ink-faint: #948c73;
+    --color-border-soft: #3a352c;
+    --color-border-strong: #7d7463;
+    --color-accent-text: #ffb783;
+    --color-focus: #ff994d;
+    --color-on-danger: #221f1a;
+    --color-on-accent: #221f1a;
+    --color-accent: #ff994d;
+    --color-accent-hover: #ffac6e;
+    --color-accent-soft: #664921;
+    --color-danger: #f87171;
+    --color-warn: #e0b06a;
+    --color-success: #6fcf97;
+    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
+    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.35);
+    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.45);
+  }
+}
+
+/* Explicit override (style-guide toggle, or any element scoped with data-theme). */
+[data-theme='dark'] {
+  --color-paper: #1c1a16;
+  --color-paper-deep: #2a2620;
+  --color-surface: #262320;
+  --color-ink: #f1ece1;
+  --color-ink-soft: #b5ac9c;
+  --color-ink-faint: #948c73;
+  --color-border-soft: #3a352c;
+  --color-border-strong: #7d7463;
+  --color-accent-text: #ffb783;
+  --color-focus: #ff994d;
+  --color-on-danger: #221f1a;
+  --color-on-accent: #221f1a;
+  --color-accent: #ff994d;
+  --color-accent-hover: #ffac6e;
+  --color-accent-soft: #664921;
+  --color-danger: #f87171;
+  --color-warn: #e0b06a;
+  --color-success: #6fcf97;
+  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
+  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.35);
+  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.45);
+  
+  color-scheme: dark;
+}
+[data-theme='light'] { color-scheme: light; }
+[data-theme='dark'], [data-theme='light'] { background: var(--color-paper); color: var(--color-ink); }