feat(web/ui): expand design tokens and add primitive component styles

apps/web/src/styles/tokens.css

@@ -1,3 +1,18 @@
+/*
+ * Headquarter Design Tokens
+ *
+ * Naming convention:
+ *   --space-*   : 4px-based spacing scale (1 = 4px, 2 = 8px, ...)
+ *   --font-size-* : fluid type scale from xs to 2xl
+ *   --line-height-* : text leading scale
+ *   --radius-*  : corner radius scale
+ *   --shadow-*  : elevation shadows
+ *   --bp-*      : responsive breakpoints
+ *   --touch-target : minimum interactive control size
+ *   --sidebar-width : desktop sidebar width
+ *   --mobile-nav-height : bottom nav including safe-area inset
+ */
+
 :root {
 	color-scheme: light;
 	font-family: "Inter", "IBM Plex Sans", "Segoe UI", sans-serif;
@@ -27,8 +42,34 @@
 	--space-4: 1rem;
 	--space-5: 1.5rem;
 	--space-6: 2rem;
+	--space-7: 2.5rem;
 	--space-8: 3rem;
+	--space-9: 5rem;
 	--space-10: 4rem;
+	--space-12: 6rem;
+
+	/* Border Radius */
+	--radius-sm: 6px;
+	--radius-md: 10px;
+	--radius-lg: 14px;
+	--radius-xl: 16px;
+	--radius-full: 999px;
+
+	/* Line Height */
+	--line-height-tight: 1.25;
+	--line-height-normal: 1.5;
+	--line-height-relaxed: 1.75;
+
+	/* Shadow / Elevation */
+	--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
+	--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
+	--shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
+	--shadow-xl: 0 12px 40px rgba(0, 0, 0, 0.18);
+
+	/* Layout & Touch */
+	--touch-target: 44px;
+	--sidebar-width: 280px;
+	--mobile-nav-height: calc(64px + env(safe-area-inset-bottom, 0px));
 
 	/* Breakpoints */
 	--bp-sm: 480px;