docs: update example instructions and improve CSS property defaults

Author: indaco

docs/css-props.md

@@ -62,30 +62,30 @@ These custom properties control spacing, layout, typography, and animation behav
 
 ### Layout
 
-| Property              | Default                           | Description                     |
-| :-------------------- | :-------------------------------- | :------------------------------ |
-| `--gtt-py`            | `0`                               | Vertical padding for the toast. |
-| `--gtt-px`            | `0.75em`                          | Horizontal padding.             |
-| `--gtt-bg`            | `var(--gtt-default-bg)`           | Background color.               |
-| `--gtt-border-color`  | `var(--gtt-default-border-color)` | Border color.                   |
-| `--gtt-border-width`  | `1px`                             | Border width.                   |
-| `--gtt-border-style`  | `solid`                           | Border style.                   |
-| `--gtt-border-radius` | `0.375rem`                        | Border radius.                  |
+| Property              | Default                        | Description                     |
+| :-------------------- | :----------------------------- | :------------------------------ |
+| `--gtt-py`            | `0`                            | Vertical padding for the toast. |
+| `--gtt-px`            | `0.75em`                       | Horizontal padding.             |
+| `--gtt-bg`            | `--gtt-color-<level>-lightest` | Background color.               |
+| `--gtt-border-color`  | `--gtt-color-<level>-lighter`  | Border color.                   |
+| `--gtt-border-width`  | `1px`                          | Border width.                   |
+| `--gtt-border-style`  | `solid`                        | Border style.                   |
+| `--gtt-border-radius` | `0.375rem`                     | Border radius.                  |
 
 ### Typography
 
 | Property            | Default                    | Description  |
 | :------------------ | :------------------------- | :----------- |
-| `--gtt-color`       | `var(--gtt-default-color)` | Text color.  |
+| `--gtt-color`       | `--gtt-color-<level>-dark` | Text color.  |
 | `--gtt-font`        | `inherit`                  | Font family. |
 | `--gtt-font-size`   | `1rem`                     | Font size.   |
 | `--gtt-line-height` | `1rem`                     | Line height. |
 
 ### Progress Bar
 
-| Property               | Default                             | Description            |
-| :--------------------- | :---------------------------------- | :--------------------- |
-| `--gtt-progress-color` | `var(--gtt-default-progress-color)` | Color of progress bar. |
+| Property               | Default                     | Description            |
+| :--------------------- | :-------------------------- | :--------------------- |
+| `--gtt-progress-color` | `--gtt-color-<level>-light` | Color of progress bar. |
 
 ### Animation
 

examples/README.md

@@ -2,15 +2,33 @@
 
 All examples are unified under a single web application.
 
-To explore them:
+To explore them locally:
 
-1. Run the example server:
+1. **Clone the repository**
 
    ```bash
-   go run examples/main.go
+   git clone https://github.com/indaco/goaster.git
    ```
 
-2. Open your browser and go to [http://localhost:3000](http://localhost:3000) to view the homepage listing all available examples.
+2. **Run the example server**
+
+   You can either run it from the project root:
+
+   ```bash
+   cd goaster
+   make dev # or: task dev
+   ```
+
+   Or directly from the `examples` directory:
+
+   ```bash
+   cd goaster/examples
+   go run .
+   ```
+
+3. **Open your browser**
+
+   Visit [http://localhost:3000](http://localhost:3000) browse the homepage and explore all available examples.
 
 Each example includes: