style: add macOS platform-aware styling and refine border radius tokens

Add [data-platform="mac"] overrides for softer edges, differentiated
sidebar surface, and refined shadows. Replace hardcoded border-radius
values with CSS variables. Adjust SettingsDialog dimensions.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: jonasnobile

src/frontend-shared/components/common/CommandPalette.css

@@ -12,7 +12,7 @@
 .command-palette {
 	background: var(--surface-overlay);
 	border: 1px solid var(--edge-strong);
-	border-radius: 6px;
+	border-radius: var(--radius-lg);
 	box-shadow: var(--shadow-overlay);
 	width: 480px;
 	max-height: 400px;
@@ -21,6 +21,12 @@
 	overflow: hidden;
 }
 
+[data-platform="mac"] .command-palette {
+	background: var(--surface-overlay);
+	border: 1px solid var(--edge-strong);
+	box-shadow: var(--shadow-overlay);
+}
+
 .command-palette__input-wrap {
 	padding: var(--spacing-sm) var(--spacing-md);
 	border-bottom: 1px solid var(--edge);

src/frontend-shared/components/common/ContextMenu.css

@@ -5,12 +5,18 @@
 	z-index: 2000;
 	background: var(--surface-overlay);
 	border: 1px solid var(--edge-strong);
-	border-radius: 6px;
+	border-radius: var(--radius-lg);
 	box-shadow: var(--shadow-popup);
 	min-width: 200px;
 	padding: var(--spacing-xs) 0;
 }
 
+[data-platform="mac"] .context-menu {
+	background: var(--surface-overlay);
+	border: 1px solid var(--edge-strong);
+	box-shadow: var(--shadow-popup);
+}
+
 .context-menu__icon {
 	display: flex;
 	align-items: center;

src/frontend-shared/components/common/Dialog.css

@@ -23,6 +23,12 @@
 	animation: dialog-scale-in 0.2s ease-out;
 }
 
+[data-platform="mac"] .dialog {
+	background: var(--surface-overlay);
+	border: 1px solid var(--edge-strong);
+	box-shadow: var(--shadow-overlay);
+}
+
 .dialog__header {
 	display: flex;
 	align-items: center;

src/frontend-shared/components/common/SettingsDialog.css

@@ -1,6 +1,5 @@
 .settings-dialog {
-	min-width: 600px;
-	max-width: 700px;
+	width: 640px;
 }
 
 .settings-dialog .dialog__body {
@@ -9,7 +8,7 @@
 
 .settings-layout {
 	display: flex;
-	min-height: 400px;
+	height: 400px;
 }
 
 .settings-nav {

src/frontend-shared/components/common/Toast.css

@@ -15,7 +15,7 @@
 	align-items: flex-start;
 	gap: var(--spacing-sm);
 	padding: var(--spacing-sm) var(--spacing-md);
-	border-radius: 4px;
+	border-radius: var(--radius-md);
 	border: 1px solid var(--edge);
 	background: var(--surface-overlay);
 	box-shadow: var(--shadow-popup);

src/frontend-shared/components/layout/AppShell.css

@@ -5,6 +5,10 @@
 	overflow: hidden;
 }
 
+[data-platform="mac"] .app-shell {
+	background: var(--surface);
+}
+
 .app-shell__body {
 	flex: 1;
 	display: flex;

src/frontend-shared/components/layout/Sidebar.css

@@ -8,6 +8,11 @@
 	transition: width var(--transition-slow);
 }
 
+[data-platform="mac"] .sidebar {
+	background: var(--surface-sidebar, var(--surface));
+	border-right: 1px solid var(--edge);
+}
+
 .sidebar--collapsed {
 	border-right: none;
 }
@@ -120,6 +125,12 @@
 	z-index: 10;
 }
 
+[data-platform="mac"] .sidebar-expand-btn {
+	background: var(--surface-raised);
+	border: 1px solid var(--edge);
+	box-shadow: var(--shadow-float);
+}
+
 .sidebar-expand-btn:hover {
 	background: var(--surface-hover);
 	color: var(--ink);

src/frontend-shared/components/layout/TabBar.css

@@ -5,6 +5,11 @@
 	overflow: hidden;
 }
 
+[data-platform="mac"] .tab-bar {
+	background: var(--surface-sidebar, var(--surface-raised));
+	border-bottom: 1px solid var(--edge);
+}
+
 .tab-bar__tabs {
 	display: flex;
 	overflow-x: auto;

src/frontend-shared/styles/global.css

@@ -56,9 +56,9 @@
 	--spacing-xl: 24px;
 
 	/* ── Border radius ──────────────────────────────────── */
-	--radius-sm: 3px;
-	--radius-md: 6px;
-	--radius-lg: 6px;
+	--radius-sm: 4px;
+	--radius-md: 8px;
+	--radius-lg: 10px;
 
 	/* ── Layout ─────────────────────────────────────────── */
 	--sidebar-width: 250px;
@@ -506,3 +506,25 @@ textarea:focus {
 		box-shadow: 4px 0 16px rgba(0, 0, 0, 0.5);
 	}
 }
+
+/* ── macOS refinements ─────────────────────────────────────
+   Subtle adjustments for a native macOS feel: softer edges,
+   slightly differentiated sidebar surface, refined shadows.
+   ─────────────────────────────────────────────────────────── */
+
+[data-platform="mac"] {
+	--surface-sidebar: #1e2025;
+	--edge: rgba(255, 255, 255, 0.06);
+	--edge-strong: rgba(255, 255, 255, 0.10);
+	--shadow-overlay: 0 12px 40px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.06);
+	--shadow-popup: 0 8px 24px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.06);
+	--shadow-float: 0 4px 12px rgba(0, 0, 0, 0.35);
+	--radius-lg: 12px;
+}
+
+[data-platform="mac"][data-theme="light"] {
+	--surface-sidebar: #ebebeb;
+	--shadow-overlay: 0 12px 40px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.06);
+	--shadow-popup: 0 8px 24px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.06);
+	--shadow-float: 0 4px 12px rgba(0, 0, 0, 0.08);
+}