@better-forge/ui 0.0.0-stage → 0.1.0

package/styles/base.css

@@ -0,0 +1,521 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* Fonts are bundled with the app (Manrope, Inter, JetBrains Mono: SIL OFL; Material Symbols: Apache 2.0),
+   so opening the interface makes no request to Google. */
+@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400; font-display: swap; src: url('./fonts/manrope-latin-ext-4.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
+@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 600; font-display: swap; src: url('./fonts/manrope-latin-ext-4.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
+@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 700; font-display: swap; src: url('./fonts/manrope-latin-ext-4.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
+@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 800; font-display: swap; src: url('./fonts/manrope-latin-ext-4.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
+@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400; font-display: swap; src: url('./fonts/manrope-latin-5.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
+@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 600; font-display: swap; src: url('./fonts/manrope-latin-5.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
+@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 700; font-display: swap; src: url('./fonts/manrope-latin-5.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
+@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 800; font-display: swap; src: url('./fonts/manrope-latin-5.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
+@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('./fonts/inter-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
+@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('./fonts/inter-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
+@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('./fonts/inter-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
+@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('./fonts/inter-latin-1.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
+@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('./fonts/inter-latin-1.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
+@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('./fonts/inter-latin-1.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
+@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('./fonts/jetbrains-mono-latin-ext-2.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
+@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('./fonts/jetbrains-mono-latin-ext-2.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
+@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('./fonts/jetbrains-mono-latin-3.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
+@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('./fonts/jetbrains-mono-latin-3.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
+
+/* ── M3 Color Tokens — Light (exact from mockup) ─────────────────── */
+:root {
+  --m3-surface:                  #f5f6f9;
+  --m3-surface-dim:              #d7dce5;
+  --m3-surface-bright:           #f5f6f9;
+  --m3-surface-container-lowest: #fafbfc;
+  --m3-surface-container-low:    #eef0f5;
+  --m3-surface-container:        #e7eaf0;
+  --m3-surface-container-high:   #dfe3ea;
+  --m3-surface-container-highest:#d7dce5;
+  --m3-on-surface:               #1c2333;
+  --m3-on-surface-variant:       #45464d;
+  --m3-secondary:                #566174;
+  --m3-outline:                  #7c828e;
+  --m3-outline-variant:          #d3d7df;
+  --m3-primary:                  #000000;
+  --m3-on-primary:               #ffffff;
+  --m3-on-primary-container:     #497cff;
+  --m3-primary-fixed:            #dbe7ff;
+  --m3-primary-fixed-dim:        #b4c5ff;
+  --m3-primary-container:        #00174b;
+  --m3-surface-tint:             #0053db;
+  --m3-inverse-primary:          #b4c5ff;
+  --m3-secondary-container:      #d0e1fb;
+  --m3-on-secondary-container:   #54647a;
+  --m3-secondary-fixed:          #b7c8e1;
+  --m3-error:                    #ba1a1a;
+  --m3-error-container:          #ffdad6;
+  --m3-on-error-container:       #93000a;
+
+  /* Status colors matching mockup badges */
+  --m3-up:        #166534;
+  --m3-up-bg:     rgba(34, 197, 94, 0.12);
+  --m3-up-bar:    #22c55e;
+  --m3-down:      #ba1a1a;
+  --m3-down-bg:   #ffdad6;
+  --m3-degraded:  #854d0e;
+  --m3-degraded-bg: rgba(234, 179, 8, 0.12);
+  --m3-degraded-bar: #eab308;
+  --m3-partial:   #9a3412;
+  --m3-partial-bg: rgba(249, 115, 22, 0.12);
+  --m3-partial-bar: #f97316;
+
+  /* Branding colours; an application may point them at its own tokens. */
+  --color-primary: var(--m3-primary);
+  --color-accent:  var(--m3-on-primary-container);
+
+  /* Semantic action colors stay neutral and consistent across admin pages. */
+  --admin-action-primary:       #dbe7ff;
+  --admin-action-primary-hover: #c9d9ff;
+  --admin-on-action-primary:    #172033;
+  --admin-action-focus:         rgba(73, 124, 255, 0.28);
+  --admin-selection:            var(--m3-primary-fixed);
+  --admin-selection-hover:      #c9d9ff;
+  --admin-on-selection:         var(--m3-primary);
+  --admin-selection-border:     #a9bfe6;
+  --admin-control-accent:       #4b5563;
+  --admin-control-on:           #ffffff;
+  --admin-icon-container:       #e4e7ec;
+  --admin-icon-color:           #4b5563;
+  --audit-create-bg:            #d1fae5;
+  --audit-create-text:          #065f46;
+  --audit-update-bg:            #e0e7ff;
+  --audit-update-text:          #3730a3;
+  --audit-delete-bg:            #fee2e2;
+  --audit-delete-text:          #991b1b;
+}
+
+/* ── M3 Color Tokens — Dark ───────────────────────────────────────── */
+html.dark {
+  --m3-surface:                  #20232a;
+  --m3-surface-dim:              #1a1c22;
+  --m3-surface-bright:           #383c46;
+  --m3-surface-container-lowest: #252830;
+  --m3-surface-container-low:    #1a1c22;
+  --m3-surface-container:        #282b33;
+  --m3-surface-container-high:   #30343d;
+  --m3-surface-container-highest:#383c46;
+  --m3-on-surface:               #e3e5ea;
+  --m3-on-surface-variant:       #c5cad3;
+  --m3-secondary:                #aab0bb;
+  --m3-outline:                  #80868f;
+  --m3-outline-variant:          #3a3e48;
+  --m3-primary:                  #b4c5ff;
+  --m3-on-primary:               #111318;
+  --m3-on-primary-container:     #aac7ff;
+  --m3-primary-container:        #30333b;
+  --m3-secondary-container:      #2a3a4d;
+  --m3-on-secondary-container:   #c0cedd;
+  --m3-secondary-fixed:          #3a4d62;
+  --m3-error:                    #ffb4ab;
+  --m3-error-container:          #93000a;
+  --m3-on-error-container:       #ffdad6;
+  --m3-primary-fixed:            #3a3d46;
+  --m3-primary-fixed-dim:        #30333b;
+  --m3-surface-tint:             #b4c5ff;
+  --m3-inverse-primary:          #0053db;
+
+  --admin-action-primary:       #e5e7eb;
+  --admin-action-primary-hover: #ffffff;
+  --admin-on-action-primary:    #111318;
+  --admin-action-focus:         rgba(229, 231, 235, 0.28);
+  --admin-selection:            #3a3d46;
+  --admin-selection-hover:      #454953;
+  --admin-on-selection:         #f0f1f3;
+  --admin-selection-border:     #777e8b;
+  --admin-control-accent:       #c3c8d1;
+  --admin-control-on:           #1a1c22;
+  --admin-icon-container:       #30343d;
+  --admin-icon-color:           #d6d9df;
+  --audit-create-bg:            #164e3b;
+  --audit-create-text:          #a7f3d0;
+  --audit-update-bg:            #37366d;
+  --audit-update-text:          #d8d7ff;
+  --audit-delete-bg:            #692d32;
+  --audit-delete-text:          #fecaca;
+
+  --m3-up:        #4ade80;
+  --m3-up-bg:     rgba(74, 222, 128, 0.12);
+  --m3-up-bar:    #4ade80;
+  --m3-down:      #ffb4ab;
+  --m3-down-bg:   rgba(147, 0, 10, 0.25);
+  --m3-degraded:  #ffb950;
+  --m3-degraded-bg: rgba(234, 179, 8, 0.15);
+  --m3-degraded-bar: #fbbf24;
+  --m3-partial:   #fb923c;
+  --m3-partial-bg: rgba(249, 115, 22, 0.15);
+  --m3-partial-bar: #f97316;
+}
+
+/* ── Base ─────────────────────────────────────────────────────────── */
+* { box-sizing: border-box; }
+
+body {
+  margin: 0;
+  font-family: 'Inter', system-ui, sans-serif;
+  background: var(--m3-surface);
+  color: var(--m3-on-surface);
+}
+
+input[type='checkbox'],
+input[type='radio'] {
+  accent-color: var(--admin-control-accent);
+}
+
+/*
+ * Button system. Compose a shape with a variant: `btn btn-primary`, `btn btn-secondary`,
+ * `btn btn-ghost`, `btn btn-outline`, `btn btn-danger` (filled, for confirmations) or
+ * `btn btn-danger-outline`; add `btn-sm` for compact rows.
+ * `btn-icon` is a standalone square icon button. These live in the components layer so page-level
+ * utilities (e.g. `px-5`, `rounded-full`, `w-full`) still win.
+ */
+@layer components {
+  .btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+    border: 1px solid transparent;
+    border-radius: 0.75rem;
+    padding: 0.625rem 1rem;
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    font-weight: 600;
+    white-space: nowrap;
+    cursor: pointer;
+    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease,
+      box-shadow 0.18s ease, opacity 0.18s ease, transform 0.18s ease;
+  }
+  .btn:active:not(:disabled) { transform: scale(0.98); }
+  .btn:disabled { opacity: 0.5; cursor: not-allowed; }
+  .btn .material-symbols-outlined { font-size: 18px; }
+
+  .btn-sm {
+    gap: 0.375rem;
+    border-radius: 0.5rem;
+    padding: 0.375rem 0.75rem;
+    font-size: 0.75rem;
+    line-height: 1rem;
+  }
+  .btn-sm .material-symbols-outlined { font-size: 16px; }
+
+  /* Outlined in light mode so the filled primary button is the only filled action. */
+  .btn-secondary {
+    background: transparent;
+    border-color: var(--m3-outline-variant);
+    color: var(--m3-on-surface);
+  }
+  .btn-secondary:hover:not(:disabled) { background: var(--m3-surface-container); }
+  html.dark .btn-secondary {
+    background: var(--m3-surface-container-high);
+    border-color: transparent;
+  }
+  html.dark .btn-secondary:hover:not(:disabled) { background: var(--m3-surface-container-highest); }
+
+  .btn-ghost {
+    background: transparent;
+    color: var(--m3-secondary);
+  }
+  .btn-ghost:hover:not(:disabled) {
+    background: var(--m3-surface-container);
+    color: var(--m3-on-surface);
+  }
+
+  .btn-outline {
+    background: transparent;
+    color: var(--m3-secondary);
+    border-color: var(--m3-outline-variant);
+  }
+  .btn-outline:hover:not(:disabled) {
+    background: var(--m3-surface-container);
+    color: var(--m3-on-surface);
+  }
+
+  .btn-danger {
+    background: var(--m3-error-container);
+    color: var(--m3-on-error-container);
+    border-color: color-mix(in srgb, var(--m3-error) 45%, transparent);
+  }
+  .btn-danger:hover:not(:disabled) {
+    border-color: var(--m3-error);
+  }
+  .btn-danger:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--m3-down) 25%, transparent);
+  }
+
+  .btn-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    width: 2rem;
+    height: 2rem;
+    border-radius: 0.5rem;
+    color: var(--m3-secondary);
+    background: transparent;
+    cursor: pointer;
+    transition: background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
+  }
+  .btn-icon:hover:not(:disabled) {
+    background: var(--m3-surface-container);
+    color: var(--m3-on-surface);
+  }
+  .btn-icon:disabled { opacity: 0.5; cursor: not-allowed; }
+  .btn-icon .material-symbols-outlined { font-size: 20px; }
+
+  .focus-ring:focus-visible,
+  .btn-secondary:focus-visible,
+  .btn-ghost:focus-visible,
+  .btn-outline:focus-visible,
+  .btn-icon:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 3px var(--admin-action-focus);
+  }
+}
+
+/* Primary admin action: one contrast-safe appearance in every feature. */
+.btn-primary {
+  background: var(--admin-action-primary) !important;
+  color: var(--admin-on-action-primary) !important;
+  border-color: transparent !important;
+  transition: background-color 0.18s ease, box-shadow 0.18s ease,
+    opacity 0.18s ease, transform 0.18s ease;
+}
+.btn-primary:hover:not(:disabled) {
+  background: var(--admin-action-primary-hover) !important;
+}
+.btn-primary:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 3px var(--admin-action-focus);
+}
+.btn-primary:disabled {
+  opacity: 0.5 !important;
+  cursor: not-allowed !important;
+}
+
+.btn-danger-outline {
+  color: var(--m3-down);
+  border: 1px solid var(--m3-outline-variant);
+  transition: background-color 0.18s ease, border-color 0.18s ease,
+    box-shadow 0.18s ease, transform 0.18s ease;
+}
+.btn-danger-outline:hover:not(:disabled) {
+  background: var(--m3-down-bg);
+  border-color: color-mix(in srgb, var(--m3-down) 45%, var(--m3-outline-variant));
+}
+.btn-danger-outline:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--m3-down) 25%, transparent);
+}
+.btn-danger-outline:active:not(:disabled) {
+  transform: scale(0.98);
+}
+.btn-danger-outline:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.copy-feedback-button {
+  background: var(--m3-surface-container-high);
+  color: var(--m3-on-surface);
+  border: 1px solid var(--m3-outline-variant);
+  transition: background-color 0.18s ease, border-color 0.18s ease,
+    color 0.18s ease, transform 0.18s ease;
+}
+.copy-feedback-button:hover {
+  background: var(--m3-surface-container-highest);
+}
+.copy-feedback-button[data-copied] {
+  background: var(--m3-up-bg);
+  border-color: color-mix(in srgb, var(--m3-up) 35%, var(--m3-outline-variant));
+  color: var(--m3-up);
+}
+.copy-feedback-button[data-failed] {
+  background: var(--m3-down-bg);
+  border-color: color-mix(in srgb, var(--m3-down) 35%, var(--m3-outline-variant));
+  color: var(--m3-down);
+}
+.copy-feedback-button:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 3px var(--admin-action-focus);
+}
+.copy-feedback-button:active {
+  transform: scale(0.98);
+}
+
+.selection-active {
+  background: var(--admin-selection) !important;
+  color: var(--admin-on-selection) !important;
+  border-color: var(--admin-selection-border) !important;
+}
+.selection-active:hover {
+  background: var(--admin-selection-hover) !important;
+}
+
+html.dark .side-tab-active {
+  background: var(--admin-selection) !important;
+  color: var(--admin-on-selection) !important;
+}
+
+html.dark .side-tab-badge-active {
+  background: var(--admin-on-selection) !important;
+  color: var(--admin-selection) !important;
+}
+
+/* ── Navigation (sidebar + mobile drawer) ─────────────────────────── */
+.admin-nav-item {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.625rem 1rem;
+  border-radius: 0.75rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  color: var(--m3-secondary);
+  text-align: left;
+  transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
+}
+.admin-nav-item:hover { transform: translateX(0.25rem); }
+.admin-nav-item:not([aria-current='page']):hover {
+  background: rgba(0, 0, 0, 0.04);
+  color: var(--m3-on-surface);
+}
+html.dark .admin-nav-item:not([aria-current='page']):hover { background: rgba(255, 255, 255, 0.08); }
+.admin-nav-item[aria-current='page'] {
+  background: var(--m3-surface-container-lowest);
+  color: var(--m3-on-surface);
+  font-weight: 600;
+  box-shadow: 0 1px 4px rgba(19, 27, 46, 0.08);
+}
+.admin-nav-item.admin-nav-danger:hover,
+html.dark .admin-nav-item.admin-nav-danger:hover {
+  background: var(--m3-error-container);
+  color: var(--m3-on-error-container);
+}
+.admin-nav-item:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 3px var(--admin-action-focus);
+}
+
+@keyframes drawer-in {
+  from { transform: translateX(-100%); }
+  to   { transform: translateX(0); }
+}
+@keyframes overlay-in {
+  from { opacity: 0; }
+  to   { opacity: 1; }
+}
+.admin-drawer-panel { animation: drawer-in 0.22s ease-out; }
+.admin-drawer-overlay { animation: overlay-in 0.22s ease-out; }
+
+@keyframes toast-in {
+  from { opacity: 0; transform: translateY(8px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+.admin-toast { animation: toast-in 0.2s ease-out; }
+
+@media (prefers-reduced-motion: reduce) {
+  .admin-drawer-panel, .admin-drawer-overlay, .admin-toast { animation: none; }
+  .admin-nav-item:hover { transform: none; }
+}
+
+/* ── Input style ──────────────────────────────────────────────────── */
+.input-m3 {
+  width: 100%;
+  background: var(--m3-surface-container-lowest);
+  border: 1.5px solid var(--m3-outline-variant);
+  border-radius: 10px;
+  padding: 9px 13px;
+  color: var(--m3-on-surface);
+  font-family: 'Inter', system-ui, sans-serif;
+  font-size: 14px;
+  outline: none;
+  transition: border-color 0.18s ease, box-shadow 0.18s ease;
+}
+.input-m3::placeholder { color: var(--m3-secondary); }
+.input-m3:focus {
+  border-color: var(--m3-primary);
+  box-shadow: 0 0 0 3px rgba(0, 83, 219, 0.12);
+}
+html.dark .input-m3:focus {
+  box-shadow: 0 0 0 3px rgba(180, 197, 255, 0.15);
+}
+.input-m3:disabled { opacity: 0.45; cursor: not-allowed; }
+select.input-m3 {
+  appearance: none;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2376777d' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 12px center;
+  padding-right: 32px;
+}
+
+input.input-m3:is([type='date'], [type='time'], [type='datetime-local']),
+input.input-sig:is([type='date'], [type='time'], [type='datetime-local']) {
+  color-scheme: light;
+}
+
+html.dark input.input-m3:is([type='date'], [type='time'], [type='datetime-local']),
+html.dark input.input-sig:is([type='date'], [type='time'], [type='datetime-local']) {
+  color-scheme: dark;
+}
+
+input.input-m3:is([type='date'], [type='time'], [type='datetime-local'])::-webkit-calendar-picker-indicator,
+input.input-sig:is([type='date'], [type='time'], [type='datetime-local'])::-webkit-calendar-picker-indicator {
+  cursor: pointer;
+  opacity: 1;
+}
+
+/* Legacy alias */
+.input-sig { @apply input-m3; }
+
+/* ── Entrance animation ───────────────────────────────────────────── */
+@keyframes fadeUp {
+  from { opacity: 0; transform: translateY(10px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+.fade-up { opacity: 0; animation: fadeUp 0.4s ease forwards; }
+
+/* ── Card hover ───────────────────────────────────────────────────── */
+.card-hover {
+  transition: box-shadow 0.2s ease, border-color 0.2s ease;
+}
+.card-hover:hover {
+  box-shadow: 0 2px 12px rgba(0, 83, 219, 0.08);
+  border-color: var(--m3-outline);
+}
+html.dark .card-hover:hover {
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
+}
+
+/* ── Material Symbols ─────────────────────────────────────────────── */
+.material-symbols-outlined {
+  font-family: 'Material Symbols Outlined';
+  font-weight: normal;
+  font-style: normal;
+  display: inline-block;
+  letter-spacing: normal;
+  text-transform: none;
+  white-space: nowrap;
+  word-wrap: normal;
+  direction: ltr;
+  font-feature-settings: 'liga';
+  -webkit-font-smoothing: antialiased;
+  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
+  font-size: inherit;
+  line-height: 1;
+  vertical-align: middle;
+}
+
+/* ── Scrollbar ────────────────────────────────────────────────────── */
+::-webkit-scrollbar { width: 6px; }
+::-webkit-scrollbar-track { background: transparent; }
+::-webkit-scrollbar-thumb { background: var(--m3-outline-variant); border-radius: 3px; }
+

package/styles/icons.css

@@ -0,0 +1,4 @@
+/* The Material Symbols font cut down to the icons the shared interface (and the template) use. A product that draws
+   icons of its own builds a font that also holds the names listed in `@better-forge/ui/icons.json` and declares it
+   instead of importing this file. */
+@font-face { font-family: 'Material Symbols Outlined'; font-style: normal; font-weight: 400; font-display: block; src: url('./fonts/material-symbols-outlined-fill.woff2') format('woff2'); }

package/tailwind-preset.js

@@ -0,0 +1,79 @@
+/**
+ * The look of the Better interfaces as a Tailwind preset: colours are CSS variables (so branding and dark mode can swap
+ * them at runtime), the type faces and the entrance animation. Wrapping each colour in color-mix with Tailwind's
+ * <alpha-value> placeholder keeps opacity modifiers such as `bg-primary/10` working; without a modifier the mix is
+ * 100% and renders the variable unchanged.
+ */
+import { fileURLToPath, URL } from 'node:url'
+
+const token = (name) => `color-mix(in srgb, var(${name}) calc(<alpha-value> * 100%), transparent)`
+
+/** @type {import('tailwindcss').Config} */
+export default {
+  darkMode: 'class',
+  theme: {
+    extend: {
+      colors: {
+        // Branding aliases (runtime overrideable)
+        primary: token('--color-primary'),
+        accent: token('--color-accent'),
+        // M3 surface tokens (CSS-var backed → respond to dark mode)
+        surface: token('--m3-surface'),
+        'surface-dim': token('--m3-surface-dim'),
+        'surface-bright': token('--m3-surface-bright'),
+        'surface-container-lowest': token('--m3-surface-container-lowest'),
+        'surface-container-low': token('--m3-surface-container-low'),
+        'surface-container': token('--m3-surface-container'),
+        'surface-container-high': token('--m3-surface-container-high'),
+        'surface-container-highest': token('--m3-surface-container-highest'),
+        // M3 on-surface tokens
+        'on-surface': token('--m3-on-surface'),
+        'on-surface-variant': token('--m3-on-surface-variant'),
+        // M3 misc
+        secondary: token('--m3-secondary'),
+        outline: token('--m3-outline'),
+        'outline-variant': token('--m3-outline-variant'),
+        'on-primary': token('--m3-on-primary'),
+        'on-primary-container': token('--m3-on-primary-container'),
+        'primary-fixed': token('--m3-primary-fixed'),
+        'primary-container': token('--m3-primary-container'),
+        'surface-tint': token('--m3-surface-tint'),
+        'secondary-container': token('--m3-secondary-container'),
+        'on-secondary-container': token('--m3-on-secondary-container'),
+        'secondary-fixed': token('--m3-secondary-fixed'),
+        error: token('--m3-error'),
+        'error-container': token('--m3-error-container'),
+        'on-error-container': token('--m3-on-error-container'),
+        // Status colors
+        'status-up': token('--m3-up'),
+        'status-down': token('--m3-down'),
+        'status-degraded': token('--m3-degraded'),
+        'status-partial': token('--m3-partial'),
+      },
+      fontFamily: {
+        headline: ['Manrope', 'system-ui', 'sans-serif'],
+        display: ['Manrope', 'system-ui', 'sans-serif'],
+        sans: ['Inter', 'system-ui', 'sans-serif'],
+        // Small uppercase eyebrow labels (Dashboard, Setup); same face as body text.
+        label: ['Inter', 'system-ui', 'sans-serif'],
+        mono: ['JetBrains Mono', 'Menlo', 'monospace'],
+      },
+      animation: {
+        'fade-up': 'fadeUp 0.45s ease forwards',
+      },
+      keyframes: {
+        fadeUp: {
+          '0%': { opacity: '0', transform: 'translateY(12px)' },
+          '100%': { opacity: '1', transform: 'translateY(0)' },
+        },
+      },
+      borderRadius: {
+        '3xl': '1.5rem',
+        '4xl': '2rem',
+      },
+    },
+  },
+}
+
+/** Where the classes of the shared components are written, to add to a product's `content`. */
+export const uiContent = `${fileURLToPath(new URL('./dist', import.meta.url)).replaceAll('\\', '/')}/**/*.js`