zark-design 2.0.0 → 3.0.0

package/templates/html/showcase.html

@@ -14,19 +14,19 @@
    ============================================================ */
 :root {
   /* Brand / Ember */
-  --ember-50:  #fff3e9;
-  --ember-100: #ffe1c8;
-  --ember-200: #ffc28e;
-  --ember-300: #ffa056;
-  --ember-400: #ff8a3a;
-  --ember-500: #f56f10;
-  --ember-600: #d45e0d;
-  --ember-700: #ad4a09;
-  --ember-800: #843706;
-  --ember-900: #5e2704;
-  --liquid-lava: #f56f10;
-  --dark-void:   #151419;
-  --glucon-grey: #1b1a1e;
+  --brand-50:  #fff3e9;
+  --brand-100: #ffe1c8;
+  --brand-200: #ffc28e;
+  --brand-300: #ffa056;
+  --brand-400: #ff8a3a;
+  --brand-500: #f56f10;
+  --brand-600: #d45e0d;
+  --brand-700: #ad4a09;
+  --brand-800: #843706;
+  --brand-900: #5e2704;
+  --brand: #f56f10;
+  --bg-void:   #151419;
+  --bg-glucon: #1b1a1e;
 
   /* Neutrals */
   --paper:     #fafaf8;
@@ -118,7 +118,7 @@
   /* ---------- SPACE / CLIENTE COLORS (CRM) ----------
      Cor única por espaço — usada em ícone, tag, avatar, accent.
      Sempre tom mais saturado (500) + tom suave (50/100) para bg leve. */
-  --space-zark:        #f56f10;   /* ember-500 — brand */
+  --space-zark:        #f56f10;   /* brand-500 — brand */
   --space-zark-soft:   #fff3e9;
   --space-allsec:      #c2410c;   /* burnt orange */
   --space-allsec-soft: #fff3e9;
@@ -135,10 +135,10 @@
 }
 
 [data-theme="dark"] {
-  --ember-50:  #2a1810;  --ember-100: #3d2114;  --ember-200: #5e2704;
-  --ember-300: #843706;  --ember-400: #ad4a09;  --ember-500: #f56f10;
-  --ember-600: #ff8a3a;  --ember-700: #ffa056;  --ember-800: #ffc28e;
-  --ember-900: #ffe1c8;
+  --brand-50:  #2a1810;  --brand-100: #3d2114;  --brand-200: #5e2704;
+  --brand-300: #843706;  --brand-400: #ad4a09;  --brand-500: #f56f10;
+  --brand-600: #ff8a3a;  --brand-700: #ffa056;  --brand-800: #ffc28e;
+  --brand-900: #ffe1c8;
 
   --paper:     #0e0d11;  --canvas:    #151419;  --surface:   #1b1a1e;
   --line-100:  #232227;  --line-200:  #2c2b32;  --line-300:  #3a383f;
@@ -182,7 +182,7 @@ html, body {
   -webkit-font-smoothing: antialiased;
   text-rendering: optimizeLegibility;
 }
-::selection { background: var(--ember-200); color: var(--ink-700); }
+::selection { background: var(--brand-200); color: var(--ink-700); }
 a { color: inherit; text-decoration: none; }
 button { font-family: inherit; }
 
@@ -240,8 +240,8 @@ button { font-family: inherit; }
 }
 .sidebar-link:hover { background: var(--ink-50); color: var(--ink-700); }
 .sidebar-link.active {
-  color: var(--ember-700);
-  background: var(--ember-50);
+  color: var(--brand-700);
+  background: var(--brand-50);
   font-weight: 500;
 }
 .sidebar-link .num {
@@ -251,7 +251,7 @@ button { font-family: inherit; }
   letter-spacing: var(--ls-wide);
   width: 18px;
 }
-.sidebar-link.active .num { color: var(--ember-600); }
+.sidebar-link.active .num { color: var(--brand-600); }
 
 .sidebar-footer {
   margin-top: auto;
@@ -303,7 +303,7 @@ main { background: var(--paper); }
   font-size: var(--fs-xs);
   letter-spacing: var(--ls-widest);
   text-transform: uppercase;
-  color: var(--ember-600);
+  color: var(--brand-600);
   margin-bottom: 14px;
 }
 .section h2 {
@@ -393,10 +393,10 @@ main { background: var(--paper); }
 .btn-lg { height: 40px; padding: 0 16px; font-size: var(--fs-base); border-radius: var(--r-lg); gap: 8px; }
 
 .btn-primary {
-  background: var(--ember-600); color: #fff;
+  background: var(--brand-600); color: #fff;
   box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 1px 2px rgba(168, 53, 8, 0.18);
 }
-.btn-primary:hover { background: var(--ember-700); }
+.btn-primary:hover { background: var(--brand-700); }
 .btn-secondary {
   background: var(--surface); color: var(--ink-700);
   border-color: var(--line-300);
@@ -404,9 +404,9 @@ main { background: var(--paper); }
 }
 .btn-secondary:hover { background: var(--paper); }
 .btn-soft {
-  background: var(--ember-50); color: var(--ember-700);
+  background: var(--brand-50); color: var(--brand-700);
 }
-.btn-soft:hover { background: var(--ember-100); }
+.btn-soft:hover { background: var(--brand-100); }
 .btn-ghost {
   background: transparent; color: var(--ink-600);
 }
@@ -438,7 +438,7 @@ main { background: var(--paper); }
   width: 100%;
   transition: box-shadow var(--t-fast), border-color var(--t-fast);
 }
-.input:focus-within { box-shadow: var(--ring-focus); border-color: var(--ember-400); }
+.input:focus-within { box-shadow: var(--ring-focus); border-color: var(--brand-400); }
 .input.invalid { border-color: var(--danger-500); }
 .input.invalid:focus-within { box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.18); }
 .input-sm { height: 28px; padding: 0 8px; font-size: var(--fs-sm); }
@@ -489,7 +489,7 @@ main { background: var(--paper); }
 .tag-sm { height: 22px; padding: 0 8px; font-size: var(--fs-xs); }
 .tag-md { height: 26px; padding: 0 10px; font-size: var(--fs-sm); }
 .tag-square { border-radius: var(--r-xs); }
-.tag-ember   { background: var(--ember-50);   color: var(--ember-700); }
+.tag-ember   { background: var(--brand-50);   color: var(--brand-700); }
 .tag-mono    { background: var(--tag-bg);     color: var(--tag-fg); }
 .tag-success { background: var(--success-50); color: var(--success-700); }
 .tag-warning { background: var(--warning-50); color: var(--warning-700); }
@@ -500,7 +500,7 @@ main { background: var(--paper); }
 .badge {
   display: inline-flex; align-items: center; justify-content: center;
   min-width: 18px; height: 18px; padding: 0 5px;
-  background: var(--ember-500); color: #fff;
+  background: var(--brand-500); color: #fff;
   font-size: var(--fs-2xs); font-weight: 600;
   border-radius: var(--r-sm);
 }
@@ -514,7 +514,7 @@ main { background: var(--paper); }
   border: none; cursor: pointer; position: relative;
   transition: background var(--t-base) var(--ease-out);
 }
-.toggle.on { background: var(--ember-500); }
+.toggle.on { background: var(--brand-500); }
 .toggle .knob {
   position: absolute; top: 2px; left: 2px;
   width: 16px; height: 16px; border-radius: var(--r-xs);
@@ -552,7 +552,7 @@ main { background: var(--paper); }
 /* --- Avatar --- */
 .avatar {
   width: 24px; height: 24px;
-  background: var(--ember-500); color: #fff;
+  background: var(--brand-500); color: #fff;
   border-radius: 50%;
   display: inline-flex; align-items: center; justify-content: center;
   font-size: 11px; font-weight: 600;
@@ -614,7 +614,7 @@ main { background: var(--paper); }
 .type-token {
   font-family: var(--font-mono);
   font-size: var(--fs-xs);
-  color: var(--ember-600);
+  color: var(--brand-600);
 }
 .type-px {
   font-family: var(--font-mono);
@@ -628,9 +628,9 @@ main { background: var(--paper); }
   display: grid; grid-template-columns: 80px 60px 1fr; gap: 16px; align-items: center;
   padding: 8px 0;
 }
-.sp-token { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--ember-600); }
+.sp-token { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--brand-600); }
 .sp-px { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--ink-300); text-align: right; }
-.sp-bar { height: 12px; background: var(--ember-300); border-radius: var(--r-xs); }
+.sp-bar { height: 12px; background: var(--brand-300); border-radius: var(--r-xs); }
 
 /* --- Shadow demo --- */
 .shadow-demo {
@@ -655,13 +655,13 @@ main { background: var(--paper); }
 
 /* --- Radius demo --- */
 .radius-demo {
-  background: var(--ember-50);
-  border: 1px solid var(--ember-200);
+  background: var(--brand-50);
+  border: 1px solid var(--brand-200);
   height: 80px;
   display: flex; align-items: center; justify-content: center;
   font-family: var(--font-mono);
   font-size: var(--fs-sm);
-  color: var(--ember-700);
+  color: var(--brand-700);
 }
 
 /* ============================================================
@@ -692,12 +692,12 @@ main { background: var(--paper); }
 }
 .ds-side-item:hover { background: var(--ink-50); }
 .ds-side-item.active {
-  color: var(--ember-700);
-  background: var(--ember-50);
+  color: var(--brand-700);
+  background: var(--brand-50);
   font-weight: 500;
 }
 .ds-side-item .ico { color: var(--ink-400); }
-.ds-side-item.active .ico { color: var(--ember-600); }
+.ds-side-item.active .ico { color: var(--brand-600); }
 .ds-side-card {
   margin: 4px; padding: 12px;
   background: var(--surface);
@@ -721,7 +721,7 @@ main { background: var(--paper); }
 }
 .endpoint .label { font-size: var(--fs-base); font-weight: 600; color: var(--ink-700); }
 .endpoint .desc { font-size: var(--fs-sm); color: var(--ink-400); line-height: 1.5; }
-.endpoint .ico { color: var(--ember-600); }
+.endpoint .ico { color: var(--brand-600); }
 
 /* --- Stat card --- */
 .stat-card {
@@ -841,14 +841,14 @@ main { background: var(--paper); }
 .modal-progress { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
 .modal-progress .bars { display: flex; gap: 4px; }
 .modal-progress .bars span { width: 12px; height: 4px; border-radius: 2px; background: var(--ink-100); }
-.modal-progress .bars .first { width: 28px; background: var(--ember-500); }
+.modal-progress .bars .first { width: 28px; background: var(--brand-500); }
 .modal-list { padding: 4px; }
 .modal-item {
   padding: 12px 20px; border-radius: var(--r-md);
   display: flex; align-items: center; justify-content: space-between;
 }
 .modal-item:hover { background: var(--paper); }
-.modal-item .t { font-size: var(--fs-md); font-weight: 500; color: var(--ember-700); }
+.modal-item .t { font-size: var(--fs-md); font-weight: 500; color: var(--brand-700); }
 .modal-item.done .t { color: var(--success-700); }
 .modal-item .d { font-size: var(--fs-xs); color: var(--ink-400); margin-top: 2px; }
 .modal-item .credits { font-size: var(--fs-sm); color: var(--ink-500); font-family: var(--font-mono); }
@@ -892,7 +892,7 @@ main { background: var(--paper); }
   font-size: var(--fs-md);
   color: var(--ink-600);
 }
-.announce a { color: var(--ember-700); text-decoration: underline; }
+.announce a { color: var(--brand-700); text-decoration: underline; }
 .tip {
   display: flex; gap: 12px; padding: 14px;
   background: var(--surface);
@@ -901,7 +901,7 @@ main { background: var(--paper); }
   max-width: 320px;
   box-shadow: var(--shadow-md);
 }
-.tip .ico { color: var(--ember-500); margin-top: 2px; }
+.tip .ico { color: var(--brand-500); margin-top: 2px; }
 .tip .what {
   font-size: var(--fs-xs); font-family: var(--font-mono);
   letter-spacing: var(--ls-wider);
@@ -976,7 +976,7 @@ main { background: var(--paper); }
 
 /* Status (matrix oficial: 5 estados de tarefa) */
 .s-todo     { background: #fff8e6; color: #9a6500; }
-.s-progress { background: var(--ember-50); color: var(--ember-700); }
+.s-progress { background: var(--brand-50); color: var(--brand-700); }
 .s-review   { background: var(--info-50); color: var(--info-700); }
 .s-done     { background: var(--success-50); color: var(--success-700); }
 .s-canceled { background: var(--ink-50); color: var(--ink-500); }
@@ -984,7 +984,7 @@ main { background: var(--paper); }
 /* Modificadores (sobrescrevem status: ATRASADA = vermelho, PARADO = âmbar) */
 .s-overdue  { background: var(--danger-50); color: var(--danger-700); }
 .s-paused   { background: var(--warning-50); color: var(--warning-700); }
-.s-followup { background: var(--ember-50); color: var(--ember-700); }
+.s-followup { background: var(--brand-50); color: var(--brand-700); }
 
 /* Prioridade (4 níveis) */
 .p-urgent { background: var(--danger-50); color: var(--danger-700); }
@@ -1031,7 +1031,7 @@ main { background: var(--paper); }
   color: #fff;
 }
 .stat-icon.green   { background: var(--success-500); }
-.stat-icon.orange  { background: var(--ember-500); }
+.stat-icon.orange  { background: var(--brand-500); }
 .stat-icon.blue    { background: var(--info-500); }
 .stat-icon.purple  { background: #7c3aed; }
 .stat-icon.red     { background: var(--danger-500); }
@@ -1170,7 +1170,7 @@ main { background: var(--paper); }
   cursor: pointer;
   transition: all var(--t-fast);
 }
-.k-add:hover { color: var(--ember-700); border-color: var(--ember-300); background: var(--ember-50); }
+.k-add:hover { color: var(--brand-700); border-color: var(--brand-300); background: var(--brand-50); }
 
 /* ---------- LEAD CARD ---------- */
 .lead-card {
@@ -1192,7 +1192,7 @@ main { background: var(--paper); }
   display: inline-flex; align-items: center; gap: 6px;
   font-size: var(--fs-md); font-weight: 600; color: var(--ink-700);
 }
-.lead-card-name .flame { color: var(--ember-500); }
+.lead-card-name .flame { color: var(--brand-500); }
 .lead-card-sub {
   font-size: var(--fs-xs); color: var(--ink-400);
 }
@@ -1211,7 +1211,7 @@ main { background: var(--paper); }
 }
 .lead-card-followup {
   display: inline-flex; align-items: center; gap: 4px;
-  font-size: var(--fs-xs); color: var(--ember-700); font-weight: 500;
+  font-size: var(--fs-xs); color: var(--brand-700); font-weight: 500;
 }
 
 /* ---------- FILTER CHIPS ---------- */
@@ -1235,9 +1235,9 @@ main { background: var(--paper); }
 }
 .chip:hover { background: var(--ink-50); color: var(--ink-700); }
 .chip.active {
-  background: var(--ember-50);
-  color: var(--ember-700);
-  border-color: var(--ember-200);
+  background: var(--brand-50);
+  color: var(--brand-700);
+  border-color: var(--brand-200);
 }
 .chip .count {
   font-family: var(--font-mono);
@@ -1321,7 +1321,7 @@ main { background: var(--paper); }
 .bc-item.current { color: var(--ink-700); font-weight: 500; cursor: default; }
 .bc-dot {
   width: 6px; height: 6px; border-radius: 50%;
-  background: var(--ember-500);
+  background: var(--brand-500);
 }
 
 /* ---------- ICON GRID ---------- */
@@ -1343,8 +1343,8 @@ main { background: var(--paper); }
   transition: background var(--t-fast);
   color: var(--ink-700);
 }
-.icon-cell:hover { background: var(--paper); color: var(--ember-600); }
-.icon-cell:hover .icon-name { color: var(--ember-700); }
+.icon-cell:hover { background: var(--paper); color: var(--brand-600); }
+.icon-cell:hover .icon-name { color: var(--brand-700); }
 .icon-cell svg { display: block; }
 .icon-name {
   font-family: var(--font-mono);
@@ -1589,7 +1589,7 @@ main { background: var(--paper); }
               <div class="eyebrow">03 — Foundations</div>
               <h2>Espaçamento</h2>
             </div>
-            <p class="section-desc">Base 4px. Default de stack vertical: <code style="font-family:var(--font-mono);color:var(--ember-700)">--sp-12</code> (24px). Default de gap em flex: <code style="font-family:var(--font-mono);color:var(--ember-700)">--sp-8</code> (16px). Padding interno de card: <code style="font-family:var(--font-mono);color:var(--ember-700)">--sp-16</code> ou <code style="font-family:var(--font-mono);color:var(--ember-700)">--sp-20</code>.</p>
+            <p class="section-desc">Base 4px. Default de stack vertical: <code style="font-family:var(--font-mono);color:var(--brand-700)">--sp-12</code> (24px). Default de gap em flex: <code style="font-family:var(--font-mono);color:var(--brand-700)">--sp-8</code> (16px). Padding interno de card: <code style="font-family:var(--font-mono);color:var(--brand-700)">--sp-16</code> ou <code style="font-family:var(--font-mono);color:var(--brand-700)">--sp-20</code>.</p>
           </div>
           <div class="panel">
             <div class="panel-head"><div class="panel-title">Escala de spacing</div><div class="panel-kicker">--sp-0 → --sp-48</div></div>
@@ -1606,7 +1606,7 @@ main { background: var(--paper); }
               <div class="eyebrow">04 — Foundations</div>
               <h2>Border radius</h2>
             </div>
-            <p class="section-desc">xs em status dots, badges e progress bars · sm em tags, chips e botões pequenos · md em botões e inputs padrão · lg em cards · xl/2xl em modals e hero panels · 3xl raramente. Avatares usam <code style="font-family:var(--font-mono);color:var(--ember-700)">border-radius: 50%</code> direto (são círculos geométricos, não tags).</p>
+            <p class="section-desc">xs em status dots, badges e progress bars · sm em tags, chips e botões pequenos · md em botões e inputs padrão · lg em cards · xl/2xl em modals e hero panels · 3xl raramente. Avatares usam <code style="font-family:var(--font-mono);color:var(--brand-700)">border-radius: 50%</code> direto (são círculos geométricos, não tags).</p>
           </div>
           <div class="panel">
             <div class="panel-body">
@@ -1624,7 +1624,7 @@ main { background: var(--paper); }
               <div class="eyebrow">05 — Foundations</div>
               <h2>Sombras</h2>
             </div>
-            <p class="section-desc">Sempre warm (rgba 20,17,12) — nunca azul-frio (rgba 0,0,0). Curtas em cards, largas em modais. <code style="font-family:var(--font-mono);color:var(--ember-700)">--ring-focus</code> sempre presente em elementos interativos via teclado.</p>
+            <p class="section-desc">Sempre warm (rgba 20,17,12) — nunca azul-frio (rgba 0,0,0). Curtas em cards, largas em modais. <code style="font-family:var(--font-mono);color:var(--brand-700)">--ring-focus</code> sempre presente em elementos interativos via teclado.</p>
           </div>
           <div class="panel">
             <div class="panel-body">
@@ -1703,8 +1703,8 @@ main { background: var(--paper); }
               <div class="row"><div class="sub-label" style="width:100%; margin-bottom:0">Estados</div></div>
               <div class="row">
                 <button class="btn btn-primary btn-md">Default</button>
-                <button class="btn btn-primary btn-md" style="background:var(--ember-700)">Hover</button>
-                <button class="btn btn-primary btn-md" style="background:var(--ember-800)">Pressed</button>
+                <button class="btn btn-primary btn-md" style="background:var(--brand-700)">Hover</button>
+                <button class="btn btn-primary btn-md" style="background:var(--brand-800)">Pressed</button>
                 <button class="btn btn-secondary btn-md" disabled>Disabled</button>
                 <button class="btn btn-primary btn-md"><span class="spinner"></span> Loading…</button>
               </div>
@@ -1712,7 +1712,7 @@ main { background: var(--paper); }
               <div class="divider"></div>
               <div class="spec"><span class="l">Heights</span><span class="v">22 / 28 / 32 / 40 px</span></div>
               <div class="spec"><span class="l">Border radius</span><span class="v">--r-sm → --r-lg</span></div>
-              <div class="spec"><span class="l">Primary fill</span><span class="v">ember-600 → ember-700 hover</span></div>
+              <div class="spec"><span class="l">Primary fill</span><span class="v">brand-600 → brand-700 hover</span></div>
               <div class="spec"><span class="l">Focus ring</span><span class="v">--ring-focus (3px ember 20%)</span></div>
             </div>
           </div>
@@ -1727,7 +1727,7 @@ main { background: var(--paper); }
               <div class="eyebrow">07 — Primitives</div>
               <h2>Inputs</h2>
             </div>
-            <p class="section-desc">Border <code style="font-family:var(--font-mono);color:var(--ember-700)">--line-300</code>, raio <code style="font-family:var(--font-mono);color:var(--ember-700)">--r-lg</code>. Focus eleva o ring ember. Estado <code style="font-family:var(--font-mono);color:var(--ember-700)">invalid</code> troca a borda pra danger. URL input full-width é o padrão para campos de URL em hero.</p>
+            <p class="section-desc">Border <code style="font-family:var(--font-mono);color:var(--brand-700)">--line-300</code>, raio <code style="font-family:var(--font-mono);color:var(--brand-700)">--r-lg</code>. Focus eleva o ring ember. Estado <code style="font-family:var(--font-mono);color:var(--brand-700)">invalid</code> troca a borda pra danger. URL input full-width é o padrão para campos de URL em hero.</p>
           </div>
 
           <div class="panel">
@@ -1817,7 +1817,7 @@ main { background: var(--paper); }
               <div class="eyebrow">08 — Primitives</div>
               <h2>Tags, badges, kbd</h2>
             </div>
-            <p class="section-desc">Tags curtos com raio --r-sm (4px) pra status e estados. Variante <code style="font-family:var(--font-mono);color:var(--ember-700)">.tag-square</code> usa raio --r-xs (3px) ainda mais sharp pra data labels técnicos (linguagens, endpoints, IDs). Mono uppercase com letter-spacing wide é a assinatura.</p>
+            <p class="section-desc">Tags curtos com raio --r-sm (4px) pra status e estados. Variante <code style="font-family:var(--font-mono);color:var(--brand-700)">.tag-square</code> usa raio --r-xs (3px) ainda mais sharp pra data labels técnicos (linguagens, endpoints, IDs). Mono uppercase com letter-spacing wide é a assinatura.</p>
           </div>
 
           <div class="panel">
@@ -1914,7 +1914,7 @@ main { background: var(--paper); }
                 </div>
                 <div class="divider"></div>
                 <div class="spec"><span class="l">Off bg</span><span class="v">--ink-200</span></div>
-                <div class="spec"><span class="l">On bg</span><span class="v">--ember-500</span></div>
+                <div class="spec"><span class="l">On bg</span><span class="v">--brand-500</span></div>
                 <div class="spec"><span class="l">Animation</span><span class="v">--t-base ease-out</span></div>
               </div>
             </div>
@@ -2023,7 +2023,7 @@ main { background: var(--paper); }
               <div class="eyebrow">11 — Patterns</div>
               <h2>Sidebar de aplicação</h2>
             </div>
-            <p class="section-desc">Largura 240px, bg <code style="font-family:var(--font-mono);color:var(--ember-700)">--canvas</code>, items com altura ~32px. Active state usa <code style="font-family:var(--font-mono);color:var(--ember-700)">--ember-50</code> bg + <code style="font-family:var(--font-mono);color:var(--ember-700)">--ember-700</code> texto. Footer leve com avatar + email do user.</p>
+            <p class="section-desc">Largura 240px, bg <code style="font-family:var(--font-mono);color:var(--brand-700)">--canvas</code>, items com altura ~32px. Active state usa <code style="font-family:var(--font-mono);color:var(--brand-700)">--brand-50</code> bg + <code style="font-family:var(--font-mono);color:var(--brand-700)">--brand-700</code> texto. Footer leve com avatar + email do user.</p>
           </div>
 
           <div class="panel">
@@ -2079,9 +2079,9 @@ main { background: var(--paper); }
 
                   <div class="ds-side-card">
                     <div style="display:flex; align-items:center; gap:6px; margin-bottom:4px">
-                      <svg width="12" height="12" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" style="color:var(--ember-500)"><path d="M9 2l1.5 4.5L15 8l-4.5 1.5L9 14l-1.5-4.5L3 8l4.5-1.5z"/></svg>
+                      <svg width="12" height="12" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" style="color:var(--brand-500)"><path d="M9 2l1.5 4.5L15 8l-4.5 1.5L9 14l-1.5-4.5L3 8l4.5-1.5z"/></svg>
                       <span style="font-size:var(--fs-sm); font-weight:600; color:var(--ink-700)">What's New</span>
-                      <span style="font-size:var(--fs-2xs); color:var(--ember-600); font-family:var(--font-mono)">(6)</span>
+                      <span style="font-size:var(--fs-2xs); color:var(--brand-600); font-family:var(--font-mono)">(6)</span>
                     </div>
                     <div style="font-size:var(--fs-xs); color:var(--ink-400)">View our latest update</div>
                   </div>
@@ -2095,10 +2095,10 @@ main { background: var(--paper); }
                 <!-- Topbar preview do app -->
                 <div class="ds-main">
                   <div style="height:56px; padding:0 24px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line-200)">
-                    <div style="display:inline-flex; align-items:center; gap:8px; padding:6px 12px; background:var(--ember-50); border:1px solid var(--ember-200); border-radius:var(--r-md)">
+                    <div style="display:inline-flex; align-items:center; gap:8px; padding:6px 12px; background:var(--brand-50); border:1px solid var(--brand-200); border-radius:var(--r-md)">
                       <span class="avatar avatar-sq" style="width:18px; height:18px; font-size:9px">P</span>
-                      <span style="font-size:var(--fs-md); color:var(--ember-700); font-weight:500">Personal Team</span>
-                      <svg width="12" height="12" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5" style="color:var(--ember-700)"><path d="M5 7l4 4 4-4"/></svg>
+                      <span style="font-size:var(--fs-md); color:var(--brand-700); font-weight:500">Personal Team</span>
+                      <svg width="12" height="12" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5" style="color:var(--brand-700)"><path d="M5 7l4 4 4-4"/></svg>
                     </div>
                     <div style="display:flex; gap:6px; align-items:center">
                       <button class="btn btn-ghost btn-icon-only btn-sm">
@@ -2137,7 +2137,7 @@ main { background: var(--paper); }
                     <div class="divider"></div>
                     <div class="spec"><span class="l">Width</span><span class="v">240px</span></div>
                     <div class="spec"><span class="l">Background</span><span class="v">--canvas</span></div>
-                    <div class="spec"><span class="l">Active fill</span><span class="v">--ember-50 + --ember-700</span></div>
+                    <div class="spec"><span class="l">Active fill</span><span class="v">--brand-50 + --brand-700</span></div>
                     <div class="spec"><span class="l">Item height</span><span class="v">~32px</span></div>
                   </div>
                 </div>
@@ -2211,14 +2211,14 @@ main { background: var(--paper); }
                     </div>
                     <div class="stat-card-num">2.418</div>
                   </div>
-                  <div style="margin-top:18px; height:40px; background: linear-gradient(180deg, var(--ember-50), transparent); border-radius:var(--r-md); display:flex; align-items:flex-end; padding:4px; gap:3px">
-                    <div style="flex:1; height:30%; background:var(--ember-300); border-radius:2px"></div>
-                    <div style="flex:1; height:50%; background:var(--ember-400); border-radius:2px"></div>
-                    <div style="flex:1; height:40%; background:var(--ember-300); border-radius:2px"></div>
-                    <div style="flex:1; height:70%; background:var(--ember-400); border-radius:2px"></div>
-                    <div style="flex:1; height:55%; background:var(--ember-400); border-radius:2px"></div>
-                    <div style="flex:1; height:85%; background:var(--ember-500); border-radius:2px"></div>
-                    <div style="flex:1; height:100%; background:var(--ember-600); border-radius:2px"></div>
+                  <div style="margin-top:18px; height:40px; background: linear-gradient(180deg, var(--brand-50), transparent); border-radius:var(--r-md); display:flex; align-items:flex-end; padding:4px; gap:3px">
+                    <div style="flex:1; height:30%; background:var(--brand-300); border-radius:2px"></div>
+                    <div style="flex:1; height:50%; background:var(--brand-400); border-radius:2px"></div>
+                    <div style="flex:1; height:40%; background:var(--brand-300); border-radius:2px"></div>
+                    <div style="flex:1; height:70%; background:var(--brand-400); border-radius:2px"></div>
+                    <div style="flex:1; height:55%; background:var(--brand-400); border-radius:2px"></div>
+                    <div style="flex:1; height:85%; background:var(--brand-500); border-radius:2px"></div>
+                    <div style="flex:1; height:100%; background:var(--brand-600); border-radius:2px"></div>
                   </div>
                   <div style="margin-top:8px; display:flex; justify-content:space-between; font-family:var(--font-mono); font-size:var(--fs-2xs); color:var(--ink-300)">
                     <span>04/29</span><span>05/02</span><span>05/05</span>
@@ -2410,7 +2410,7 @@ main { background: var(--paper); }
               <div class="eyebrow">15 — Patterns</div>
               <h2>Code Block</h2>
             </div>
-            <p class="section-desc">Bg <code style="font-family:var(--font-mono);color:var(--ember-700)">--code-bg</code> warm. Strings em success-700, keys em code-fg ember. Sempre com botões de eye/copy no canto top-right.</p>
+            <p class="section-desc">Bg <code style="font-family:var(--font-mono);color:var(--brand-700)">--code-bg</code> warm. Strings em success-700, keys em code-fg ember. Sempre com botões de eye/copy no canto top-right.</p>
           </div>
 
           <div class="panel">
@@ -2738,7 +2738,7 @@ main { background: var(--paper); }
                 <div class="funnel">
                   <span style="width:0%; background:#3b82f6"></span>
                   <span style="width:36%; background:#7c3aed"></span>
-                  <span style="width:18%; background:var(--ember-500)"></span>
+                  <span style="width:18%; background:var(--brand-500)"></span>
                   <span style="width:0%; background:#06b6d4"></span>
                   <span style="width:0%; background:var(--success-500)"></span>
                   <span style="width:46%; background:var(--ink-200)"></span>
@@ -2746,7 +2746,7 @@ main { background: var(--paper); }
                 <div class="funnel-stages">
                   <div class="funnel-stage"><span class="funnel-stage-label" style="display:flex;align-items:center;gap:4px"><span style="width:6px;height:6px;border-radius:50%;background:#3b82f6"></span>Novo</span><span class="funnel-stage-count">0</span></div>
                   <div class="funnel-stage"><span class="funnel-stage-label" style="display:flex;align-items:center;gap:4px"><span style="width:6px;height:6px;border-radius:50%;background:#7c3aed"></span>Qualificando</span><span class="funnel-stage-count">4</span></div>
-                  <div class="funnel-stage"><span class="funnel-stage-label" style="display:flex;align-items:center;gap:4px"><span style="width:6px;height:6px;border-radius:50%;background:var(--ember-500)"></span>Reunião</span><span class="funnel-stage-count">1</span></div>
+                  <div class="funnel-stage"><span class="funnel-stage-label" style="display:flex;align-items:center;gap:4px"><span style="width:6px;height:6px;border-radius:50%;background:var(--brand-500)"></span>Reunião</span><span class="funnel-stage-count">1</span></div>
                   <div class="funnel-stage"><span class="funnel-stage-label" style="display:flex;align-items:center;gap:4px"><span style="width:6px;height:6px;border-radius:50%;background:#06b6d4"></span>Proposta</span><span class="funnel-stage-count">0</span></div>
                   <div class="funnel-stage"><span class="funnel-stage-label" style="display:flex;align-items:center;gap:4px"><span style="width:6px;height:6px;border-radius:50%;background:var(--success-500)"></span>Won</span><span class="funnel-stage-count">0</span></div>
                   <div class="funnel-stage"><span class="funnel-stage-label" style="display:flex;align-items:center;gap:4px"><span style="width:6px;height:6px;border-radius:50%;background:var(--ink-300)"></span>Perdido</span><span class="funnel-stage-count">0</span></div>
@@ -2760,7 +2760,7 @@ main { background: var(--paper); }
                 <div class="sub-label">Meta mensal</div>
                 <div style="display:flex; align-items:center; gap:12px; margin-bottom:18px">
                   <span style="flex:1; font-size:var(--fs-sm); color:var(--ink-600)">0/14 tarefas</span>
-                  <span style="font-family:var(--font-mono); font-size:var(--fs-sm); color:var(--ember-700); font-weight:600">0%</span>
+                  <span style="font-family:var(--font-mono); font-size:var(--fs-sm); color:var(--brand-700); font-weight:600">0%</span>
                 </div>
                 <div class="stat-progress" style="height:6px"><span style="width:0%"></span></div>
 
@@ -2775,7 +2775,7 @@ main { background: var(--paper); }
 
                 <div class="divider"></div>
                 <div class="spec"><span class="l">Cor padrão</span><span class="v">--success-500 (positivo)</span></div>
-                <div class="spec"><span class="l">Cor alternativa</span><span class="v">--ember-500 (neutro/em andamento)</span></div>
+                <div class="spec"><span class="l">Cor alternativa</span><span class="v">--brand-500 (neutro/em andamento)</span></div>
                 <div class="spec"><span class="l">Cor de alerta</span><span class="v">--danger-500 (estoura limite)</span></div>
               </div>
             </div>
@@ -2826,7 +2826,7 @@ main { background: var(--paper); }
 
                 <div class="k-col">
                   <div class="k-col-head">
-                    <span class="lh"><span class="dot" style="background:var(--ember-500)"></span>EM PROGRESSO</span>
+                    <span class="lh"><span class="dot" style="background:var(--brand-500)"></span>EM PROGRESSO</span>
                     <span class="count">2</span>
                   </div>
                   <button class="k-add"><svg width="12" height="12" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M9 4v10M4 9h10"/></svg> Nova tarefa</button>
@@ -2895,7 +2895,7 @@ main { background: var(--paper); }
               <div class="eyebrow">23 — App Patterns · CRM</div>
               <h2>Lead Card (Pipeline)</h2>
             </div>
-            <p class="section-desc">Card compacto para Pipeline de Vendas. Nome + flame icon (temperatura) + status tag. Ícones de canal (telefone, instagram, email). Footer com follow-up date em ember quando há agenda. Variante <code style="font-family:var(--font-mono);color:var(--ember-700)">.is-paused</code> adiciona border-left amber para PARADO.</p>
+            <p class="section-desc">Card compacto para Pipeline de Vendas. Nome + flame icon (temperatura) + status tag. Ícones de canal (telefone, instagram, email). Footer com follow-up date em ember quando há agenda. Variante <code style="font-family:var(--font-mono);color:var(--brand-700)">.is-paused</code> adiciona border-left amber para PARADO.</p>
           </div>
 
           <div class="panel">
@@ -3033,7 +3033,7 @@ main { background: var(--paper); }
                 <div class="spec"><span class="l">Altura</span><span class="v">28px</span></div>
                 <div class="spec"><span class="l">Padding</span><span class="v">0 12px</span></div>
                 <div class="spec"><span class="l">Border-radius</span><span class="v">--r-sm (4px)</span></div>
-                <div class="spec"><span class="l">Active</span><span class="v">bg ember-50 · color ember-700 · border ember-200</span></div>
+                <div class="spec"><span class="l">Active</span><span class="v">bg ember-50 · color brand-700 · border ember-200</span></div>
                 <div class="spec"><span class="l">Limite recomendado</span><span class="v">≤ 6 chips · acima disso use dropdown</span></div>
               </div>
             </div>
@@ -3095,7 +3095,7 @@ main { background: var(--paper); }
               <div class="eyebrow">26 — App Patterns · CRM</div>
               <h2>Biblioteca de Ícones</h2>
             </div>
-            <p class="section-desc">Set oficial — outline, stroke 1.5px, viewBox 18×18, sempre em <code style="font-family:var(--font-mono);color:var(--ember-700)">currentColor</code>. Nunca trocar por filled, nunca misturar com Lucide ou Heroicons num mesmo contexto. Quando faltar ícone, criar seguindo as mesmas regras.</p>
+            <p class="section-desc">Set oficial — outline, stroke 1.5px, viewBox 18×18, sempre em <code style="font-family:var(--font-mono);color:var(--brand-700)">currentColor</code>. Nunca trocar por filled, nunca misturar com Lucide ou Heroicons num mesmo contexto. Quando faltar ícone, criar seguindo as mesmas regras.</p>
           </div>
 
           <div class="panel">
@@ -3189,7 +3189,7 @@ main { background: var(--paper); }
                   <svg width="16" height="16" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M9 2l7 13H2L9 2z"/><path d="M9 7v3"/><circle cx="9" cy="13" r="0.6" fill="currentColor"/></svg>
                   <span style="font-size:var(--fs-sm); font-weight:500">Atrasada</span>
                 </div>
-                <div style="display:flex; align-items:center; gap:8px; padding:8px 12px; background:var(--ember-50); border-radius:var(--r-md); color:var(--ember-700)">
+                <div style="display:flex; align-items:center; gap:8px; padding:8px 12px; background:var(--brand-50); border-radius:var(--r-md); color:var(--brand-700)">
                   <svg width="16" height="16" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M9 2l1.5 4.5L15 8l-4.5 1.5L9 14l-1.5-4.5L3 8l4.5-1.5L9 2z"/></svg>
                   <span style="font-size:var(--fs-sm); font-weight:500">Highlight</span>
                 </div>
@@ -3317,8 +3317,8 @@ links.forEach(l => l.addEventListener('click', e => {
 /* --- Color swatches --- */
 const ember = [
   ['ember-50',  '#fff3e9'], ['ember-100', '#ffe1c8'], ['ember-200', '#ffc28e'],
-  ['ember-300', '#ffa056'], ['ember-400', '#ff8a3a'], ['ember-500', '#f56f10'],
-  ['ember-600', '#d45e0d'], ['ember-700', '#ad4a09'], ['ember-800', '#843706'],
+  ['ember-300', '#ffa056'], ['ember-400', '#ff8a3a'], ['brand-500', '#f56f10'],
+  ['brand-600', '#d45e0d'], ['brand-700', '#ad4a09'], ['ember-800', '#843706'],
   ['ember-900', '#5e2704'],
 ];
 const surface = [

package/templates/jsx/App.example.jsx

@@ -124,7 +124,7 @@ export default function App() {
           <Funnel stages={[
             { label: 'Novo',         count: 0, color: '#3b82f6',          percent: 0 },
             { label: 'Qualificando', count: 4, color: '#7c3aed',          percent: 36 },
-            { label: 'Reunião',      count: 1, color: 'var(--ember-500)', percent: 18 },
+            { label: 'Reunião',      count: 1, color: 'var(--brand-500)', percent: 18 },
             { label: 'Proposta',     count: 0, color: '#06b6d4',          percent: 0 },
             { label: 'Won',          count: 0, color: 'var(--success-500)', percent: 0 },
             { label: 'Perdido',      count: 0, color: 'var(--ink-300)',   percent: 0 },
@@ -159,7 +159,7 @@ export default function App() {
             />
           </KanbanColumn>
 
-          <KanbanColumn title="EM PROGRESSO" count={1} dotColor="var(--ember-500)" onAddClick={() => {}}>
+          <KanbanColumn title="EM PROGRESSO" count={1} dotColor="var(--brand-500)" onAddClick={() => {}}>
             <LeadCard
               hot
               name="Paulo Turismo"
@@ -197,7 +197,7 @@ export default function App() {
           </div>
 
           <Spec label="Heights" value="22 / 28 / 32 / 40 px"/>
-          <Spec label="Primary fill" value="ember-600 → ember-700 hover"/>
+          <Spec label="Primary fill" value="brand-600 → brand-700 hover"/>
         </Panel>
 
         <div style={{ height: 32 }}/>

package/templates/jsx/components/Avatar.jsx

@@ -5,11 +5,11 @@ import React from 'react';
  *
  * @param name    string — primeira letra é renderizada
  * @param size    number (px)  default 24
- * @param color   CSS color    default --ember-500
+ * @param color   CSS color    default --brand-500
  * @param square  boolean — usa raio --r-sm em vez de 50%
  * @param src     string — se passada, renderiza <img>
  */
-export function Avatar({ name, size = 24, color = 'var(--ember-500)', square = false, src, className = '', ...rest }) {
+export function Avatar({ name, size = 24, color = 'var(--brand-500)', square = false, src, className = '', ...rest }) {
   const cls = ['avatar', square && 'avatar-sq', className].filter(Boolean).join(' ');
   const style = {
     width: size,