Make entire HK admin panel cohesive and always readable

- Remap shared shadcn semantic tokens (--color-primary, --color-popover,
  --color-card, --color-border, --color-ring, --color-muted-foreground,
  --color-destructive, ...) onto the admin palette for any page scoped with
  body:has([data-admin]); this themes every embedded Button, Badge, Input,
  Select, Card, Table, Tabs, Dialog, Switch, Checkbox with the admin theme
  and guaranteed contrast, without editing component files. Gated so the
  public site is untouched and Radix portals (dialogs/selects) are covered.
- Tag the admin layout/sidebar with data-admin and give the admin content
  area the admin canvas background so the whole HK is one cohesive dark UI.
- Fix hardcoded colors in catalog shop preview and favicon form to use
  admin variables; fix white text on a light warning tint (low contrast).

src/app/globals.css

@@ -1055,3 +1055,37 @@ tbody tr:hover {
     -webkit-overflow-scrolling: touch;
   }
 }
+
+/* ── Admin (HK) semantic token remap ──────────────────────────────────────
+   Shared shadcn UI primitives (Button, Badge, Input, Select, Card, Table,
+   Tabs, Dialog, Switch, Checkbox, Tooltip, …) are built on the site's
+   semantic tokens (--color-background, --color-primary, --color-popover,
+   --color-border, --color-ring, --color-muted-foreground, …). On admin
+   pages we remap those tokens onto the admin palette so every embedded
+   component renders with the admin theme and guaranteed contrast, without
+   touching any component file.
+
+   Gated by `body:has([data-admin])` so the public site is completely
+   unaffected. This also covers Radix portals (Dialog/Select/Dropdown/
+   Popover/Tooltip) which mount under <body>. */
+body:has([data-admin]) {
+  --color-foreground: var(--admin-text);
+  --color-card: var(--admin-surface);
+  --color-card-foreground: var(--admin-text);
+  --color-popover: var(--admin-surface);
+  --color-popover-foreground: var(--admin-text);
+  --color-primary: var(--admin-accent);
+  --color-primary-hover: color-mix(in srgb, var(--admin-accent) 84%, #000000);
+  --color-primary-foreground: var(--admin-accent-foreground);
+  --color-secondary: color-mix(in srgb, var(--admin-accent) 14%, var(--admin-surface));
+  --color-secondary-foreground: var(--admin-text);
+  --color-muted: color-mix(in srgb, var(--admin-text) 9%, var(--admin-surface));
+  --color-muted-foreground: var(--admin-text-muted);
+  --color-accent: color-mix(in srgb, var(--admin-accent) 16%, var(--admin-surface));
+  --color-accent-foreground: var(--admin-text);
+  --color-destructive: var(--admin-error);
+  --color-destructive-foreground: var(--admin-error-foreground);
+  --color-border: var(--admin-border);
+  --color-input: var(--admin-border);
+  --color-ring: var(--admin-accent);
+}