Rewrote all the docs - more noob friendly now.

Co-authored-by: Copilot <copilot@github.com>

docs/Components/Separator.md

@@ -1,36 +1,19 @@
 # Separator
 
-A thin divider line. Renders as a horizontal `<hr>` or a vertical bar depending on orientation.
+A thin dividing line. Use it to visually separate sections of a page or items in a toolbar. Like a ruled line on a notepad, it gives your layout breathing room and clarity.
 
 ---
 
-## HTML structure
+## Quick example
 
-**Horizontal:**
-```
-hr.border-t.border-border.my-4.{extraClasses}
-```
-
-**Vertical:**
-```
-span.inline-block.border-l.border-border.mx-2.h-4.{extraClasses}
+```csharp
+new Separator()          // horizontal rule
+new Separator(orientation: "vertical")  // vertical bar
 ```
 
 ---
 
-## CSS mechanics
-
-| Class | Effect |
-|---|---|
-| `border-t border-border` | Top border in the theme's border color (horizontal) |
-| `border-l border-border` | Left border in the theme's border color (vertical) |
-| `my-4` | Default vertical margin for horizontal separators |
-| `mx-2` | Default horizontal margin for vertical separators |
-| `h-4` | 16px height for vertical separators |
-
----
-
-## Constructor signature
+## All the options
 
 ```csharp
 public Separator(
@@ -38,46 +21,57 @@ public Separator(
     string extraClasses = "")
 ```
 
-| Parameter | Description |
+| Parameter | What it does |
 |---|---|
-| `orientation` | `"horizontal"` (default) or `"vertical"` |
-| `extraClasses` | Additional Tailwind classes on the element |
+| `orientation` | `"horizontal"` (default) renders an `<hr>`. `"vertical"` renders an inline bar. |
+| `extraClasses` | Additional Tailwind classes to override spacing or colour. |
 
 ---
 
-## Usage examples
+## Real-world examples
 
-### Horizontal divider
+### Between sections on a settings page
 
-```csharp
-new Separator()
+```html
+<h2 class="text-lg font-semibold">Account</h2>
+<p class="text-sm text-muted-foreground">Manage your account details.</p>
+$$Sep1$$
+<h2 class="text-lg font-semibold">Notifications</h2>
 ```
 
-### Vertical divider in a flex toolbar
+```csharp
+_sep1 = new Separator();
+```
+
+### Vertical bar in a text editor toolbar
 
 ```html
 <div class="flex items-center gap-2">
   <button>Bold</button>
-  $$VertSep$$
+  $$Sep$$
   <button>Italic</button>
-  $$VertSep$$
+  $$Sep$$
   <button>Underline</button>
 </div>
 ```
 
 ```csharp
-var VertSep = new Separator(orientation: "vertical");
+_sep = new Separator(orientation: "vertical");
 ```
 
-### Custom margin
+### More or less spacing
 
 ```csharp
-new Separator(extraClasses: "my-8")       // extra vertical space
-new Separator(extraClasses: "my-0 mt-2")  // override default margin
+new Separator(extraClasses: "my-8")    // extra breathing room above and below
+new Separator(extraClasses: "my-2")    // tighter spacing
 ```
 
 ---
 
+## How it works
+
+A horizontal separator is an `<hr>` element with a top border. A vertical separator is an inline `<span>` with a left border and a fixed height of 16px. Both use `border-border` which follows the theme's CSS variable and adapts to dark mode automatically.
+
 ## Tips and tricks
 
 - The horizontal `Separator` is an `<hr>` element — it carries semantic meaning as a thematic break. Use it between content sections.