examples: warm neutral theme (no blue) + cleaner copy

examples/demo/styles.glts

@@ -1,18 +1,20 @@
 // ============================================================================
-// Glint System Monitor — Stylesheet
+// Glint Design — Warm Neutral Theme
+// ============================================================================
+// Warm off-white background, soft earth accents, no blue/purple.
 // ============================================================================
 
 // ── Design Tokens ────────────────────────────────────────────────────────────
-$bg       = #0f0f1a
-$surface  = #1a1a2e
-$card     = #222244
-$accent   = #7c6ff0
-$green    = #4ade80
-$red      = #f87171
-$yellow   = #fbbf24
-$text     = #e2e8f0
-$muted    = #94a3b8
-$border   = #2d2d50
+$bg       = #f5f2ed
+$surface  = #ede8e0
+$card     = #ffffff
+$accent   = #d4785f
+$green    = #7a9e7e
+$red      = #c0574a
+$yellow   = #d9a84d
+$text     = #2e2b28
+$muted    = #8a8580
+$border   = #dcd5cc
 
 // ── Mixins ───────────────────────────────────────────────────────────────────
 @mixin card-base {
@@ -46,7 +48,7 @@ Panel {
 .header {
     position: sticky
     top: 0px
-    background: $surface
+    background: $card
     padding: 8px 20px
     border-bottom: 1px solid $border
     width: fill
@@ -84,11 +86,15 @@ Panel {
     @use card-base
 }
 
+.card:hover {
+    border-color: $accent
+}
+
 // ── Header Component ─────────────────────────────────────────────────────────
 Header {
     color: $accent
     font-size: 18px
-    padding: 2px
+    padding: 2px 0
 }
 
 Text {
@@ -102,7 +108,7 @@ Label {
 
 // ── Input ────────────────────────────────────────────────────────────────────
 Input {
-    background-color: #16162e
+    background-color: #f0ece6
     color: $text
     font-size: 14px
     padding: 10px
@@ -122,19 +128,22 @@ Toggle {
 Button {
     border-radius: 8px
     border-width: 1px
-    border-color: $accent
+    border-color: $border
     padding: 8px 16px
     background: $surface
     color: $text
 }
 
 Button:hover {
-    background: #2d2d50
-    border-color: #a78bfa
+    background: $accent
+    color: #fff
+    border-color: $accent
 }
 
 Button:active {
-    background: $accent
+    background: #b8654e
+    color: #fff
+    border-color: #b8654e
 }
 
 .btn-outline {
@@ -144,6 +153,7 @@ Button:active {
 }
 
 .btn-outline:hover {
+    background: transparent
     border-color: $text
     color: $text
 }
@@ -181,6 +191,7 @@ Slider {
     padding: 10px
     gap: 6px
     align-items: center
+    text-align: center
 }
 
 .tile-row {
@@ -192,7 +203,7 @@ Slider {
 .tag-on {
     color: $green
     font-size: 12px
-    font-weight: bold
+    font-weight: 600
 }
 
 .tag-off {
@@ -203,12 +214,12 @@ Slider {
 // ── Status ───────────────────────────────────────────────────────────────────
 .ok {
     color: $green
-    font-weight: bold
+    font-weight: 600
 }
 
 .err {
     color: $red
-    font-weight: bold
+    font-weight: 600
 }
 
 // ── Button Row ───────────────────────────────────────────────────────────────
@@ -237,7 +248,7 @@ Slider {
 
 // ── Text Align ───────────────────────────────────────────────────────────────
 .ta-box {
-    background: #16162e
+    background: #f0ece6
     padding: 6px 10px
     border-radius: 6px
     width: fill
@@ -251,7 +262,7 @@ Slider {
 .lh-box {
     direction: vertical
     gap: 4px
-    background: #16162e
+    background: #f0ece6
     padding: 10px
     border-radius: 6px
 }
@@ -262,7 +273,7 @@ Slider {
 
 // ── Box Model ────────────────────────────────────────────────────────────────
 .box-pad {
-    background: #16162e
+    background: #f0ece6
     padding-top: 24px
     padding-bottom: 8px
     padding-left: 12px
@@ -271,14 +282,14 @@ Slider {
 }
 
 .box-margin {
-    background: #16162e
+    background: #f0ece6
     margin-top: 16px
     padding: 8px
     border-radius: 6px
 }
 
 .box-combo {
-    background: #16162e
+    background: #f0ece6
     padding: 12px
     border-width: 2px
     border-color: $accent
@@ -288,7 +299,7 @@ Slider {
 // ── Absolute Positioning ─────────────────────────────────────────────────────
 .abs-stage {
     position: relative
-    background: #16162e
+    background: #f0ece6
     padding: 16px
     border-radius: 8px
     width: fill
@@ -303,11 +314,11 @@ Slider {
 }
 
 .badge-inner {
-    background: $red
-    padding: 3px 8px
+    background: $accent
+    padding: 3px 10px
     border-radius: 4px
     color: #fff
-    font-weight: bold
+    font-weight: 700
     font-size: 10px
 }
 
@@ -348,7 +359,7 @@ Slider {
 // ── Log / Scroll ─────────────────────────────────────────────────────────────
 .log {
     @use card-base
-    background: #16162e
+    background: #f0ece6
     height: 180px
     overflow-y: scroll
     padding: 8px
@@ -361,7 +372,7 @@ Slider {
     background: $surface
     padding: 6px 10px
     border-radius: 4px
-    font-weight: bold
+    font-weight: 600
     font-size: 12px
     color: $accent
     width: fill
@@ -369,7 +380,7 @@ Slider {
 
 // ── Style Inheritance ────────────────────────────────────────────────────────
 .inherit {
-    background: #16162e
+    background: #f0ece6
     padding: 12px
     border-radius: 8px
     color: $yellow
@@ -383,7 +394,7 @@ Slider {
 
 // ── Display: None ────────────────────────────────────────────────────────────
 .vis {
-    background: #1e1e3a
+    background: #ede8e0
     padding: 8px 14px
     border-radius: 6px
 }
@@ -407,6 +418,7 @@ Slider {
     padding: 8px
     border-radius: 4px
     text-align: center
+    color: #fff
     flex-grow: 1
 }
 
@@ -415,7 +427,7 @@ Slider {
     padding: 8px
     border-radius: 4px
     text-align: center
-    color: #000
+    color: #fff
     flex-grow: 2
 }
 
@@ -427,8 +439,8 @@ Slider {
     background: $green
     padding: 10px 16px
     border-radius: 8px
-    color: #000
-    font-weight: bold
+    color: #fff
+    font-weight: 600
 }
 
 .toast-row {
@@ -441,19 +453,13 @@ Slider {
     background: transparent
     border-width: 0px
     padding: 0px
-    color: #000
+    color: #fff
     font-size: 18px
 }
 
 // ── Comma-separated selectors ────────────────────────────────────────────────
 .warn-text, .info-text {
-    font-weight: bold
+    font-weight: 600
     padding: 6px 10px
     border-radius: 4px
 }
-
-// ── Hover pseudo on cards ────────────────────────────────────────────────────
-.card:hover {
-    border-color: $accent
-    border-width: 1px
-}