zark-design 2.0.0 → 3.0.1

package/templates/jsx/{App.example.jsx → App.example.jsx.hbs}

@@ -40,8 +40,8 @@ import {
   Icons,
 } from './index';
 
-import logoZark from './assets/logo-zark-laranja.png';
-import iconZark from './assets/zark-icon.png';
+import logoZark from './assets/logo-primary.png';
+import iconZark from './assets/icon.png';
 
 export default function App() {
   const [tab, setTab] = useState('hoje');
@@ -53,7 +53,7 @@ export default function App() {
     <div style={{ display: 'grid', gridTemplateColumns: 'var(--sidebar-w) 1fr', minHeight: '100vh' }}>
 
       {/* SIDEBAR */}
-      <Sidebar logo={<img src={logoZark} alt="ZARK" className="zk-sidebar-logo"/>}>
+      <Sidebar logo={<img src={logoZark} alt="{{name}}" className="zk-sidebar-logo"/>}>
         <SidebarSection>Workspace</SidebarSection>
         <SidebarLink active icon={<Icons.Home/>} shortcut={<Kbd>⌥D</Kbd>}>Dashboard</SidebarLink>
         <SidebarLink icon={<Icons.Activity/>} shortcut={<Kbd>⌥P</Kbd>}>Pipeline</SidebarLink>
@@ -61,7 +61,7 @@ export default function App() {
         <SidebarLink icon={<Icons.Docs/>} shortcut={<Kbd>⌥F</Kbd>}>Financeiro</SidebarLink>
 
         <SidebarSection>Compartilhados</SidebarSection>
-        <SidebarLink icon={<AvatarSpace name="Z" spaceKey="zark" size={18}/>}>ZARK</SidebarLink>
+        <SidebarLink icon={<AvatarSpace name="Z" spaceKey="zark" size={18}/>}>{{name}}</SidebarLink>
         <SidebarLink icon={<AvatarSpace name="V" spaceKey="vipcar" size={18}/>}>VIPCAR</SidebarLink>
         <SidebarLink icon={<AvatarSpace name="L" spaceKey="limppe" size={18}/>}>LIMPPE TEC</SidebarLink>
       </Sidebar>
@@ -112,7 +112,7 @@ export default function App() {
           <AlertCritical
             title="8 tarefas em atraso"
             items={[
-              { tag: <TagDot kind="priority" value="urgent">URGENTE</TagDot>, label: 'Enviar proposta para TR PAULO', source: 'ZARK · Tarefas', meta: '3 dias' },
+              { tag: <TagDot kind="priority" value="urgent">URGENTE</TagDot>, label: 'Enviar proposta para TR PAULO', source: '{{name}} · Tarefas', meta: '3 dias' },
               { tag: <TagDot kind="priority" value="urgent">URGENTE</TagDot>, label: 'CHAMANDO O HEXA!', source: 'VIPCAR · Acompanhamento', meta: '3 dias' },
             ]}
             footer="+ 6 outras tarefas atrasadas"
@@ -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,14 +197,14 @@ 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 }}/>
 
         {/* Toast */}
-        <Toast tone="default" icon={<img src={iconZark} alt="ZARK" style={{ height: 14, filter: 'brightness(0) invert(1)' }}/>}>
-          Welcome to ZARK!
+        <Toast tone="default" icon={<img src={iconZark} alt="{{name}}" style={{ height: 14, filter: 'brightness(0) invert(1)' }}/>}>
+          Welcome to {{name}}!
         </Toast>
 
         {/* Modal */}

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,

package/templates/jsx/components/Funnel.jsx

@@ -4,7 +4,7 @@ import React from 'react';
  * Funnel — horizontal segmented funnel (Pipeline de Vendas)
  *
  * @param stages [{ label, count, color, percent }]
- *  color   — qualquer CSS color (sugestão: var(--ember-500), var(--success-500), etc)
+ *  color   — qualquer CSS color (sugestão: var(--brand-500), var(--success-500), etc)
  *  percent — 0-100, largura proporcional do segmento
  */
 export function Funnel({ stages = [] }) {
@@ -42,7 +42,7 @@ export function Funnel({ stages = [] }) {
 export function ProgressBar({ value = 0, tone = 'success', height = 4 }) {
   const colorMap = {
     success: 'var(--success-500)',
-    ember:   'var(--ember-500)',
+    ember:   'var(--brand-500)',
     danger:  'var(--danger-500)',
   };
   return (

package/templates/jsx/components/Sidebar.jsx

@@ -37,7 +37,7 @@ export function SidebarLink({ active = false, icon, shortcut, onClick, href, chi
   const cls = `zk-sidebar-link ${active ? 'active' : ''}`.trim();
   const content = (
     <>
-      {icon && <span style={{ display: 'inline-flex', color: active ? 'var(--ember-600)' : 'var(--ink-400)' }}>{icon}</span>}
+      {icon && <span style={{ display: 'inline-flex', color: active ? 'var(--brand-600)' : 'var(--ink-400)' }}>{icon}</span>}
       <span style={{ flex: 1 }}>{children}</span>
       {shortcut}
     </>

package/templates/jsx/components.css

@@ -1,5 +1,5 @@
 /* ============================================================
-   ZARK DESIGN SYSTEM — COMPONENTS
+   Brand DESIGN SYSTEM — COMPONENTS
    v3 · Sistemas/Apps · 2026
    Importe APÓS tokens.css.
    ============================================================ */
@@ -33,18 +33,18 @@
 .btn-full { width: 100%; }
 
 .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);
   box-shadow: var(--shadow-xs);
 }
 .btn-secondary:hover { background: var(--paper); }
-.btn-soft       { background: var(--ember-50);  color: var(--ember-700); }
-.btn-soft:hover { background: var(--ember-100); }
+.btn-soft       { background: var(--brand-50);  color: var(--brand-700); }
+.btn-soft:hover { background: var(--brand-100); }
 .btn-ghost      { background: transparent;       color: var(--ink-600); }
 .btn-ghost:hover{ background: var(--ink-50); }
 .btn-danger     { background: var(--surface);    color: var(--danger-700); border-color: var(--line-300); }
@@ -72,7 +72,7 @@
   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); }
@@ -123,7 +123,7 @@
 .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); }
@@ -150,14 +150,14 @@
 
 /* Status — 5 estados base */
 .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); }
 /* Modificadores */
 .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 */
 .p-urgent { background: var(--danger-50);  color: var(--danger-700); }
@@ -179,7 +179,7 @@
 .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);
 }
@@ -193,7 +193,7 @@
   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);
@@ -246,13 +246,13 @@
   transition: all var(--t-fast);
 }
 .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); }
+.chip.active { background: var(--brand-50); color: var(--brand-700); border-color: var(--brand-200); }
 .chip .count { font-family: var(--font-mono); font-size: var(--fs-2xs); color: inherit; opacity: 0.7; }
 
 /* ---------- 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;
@@ -328,7 +328,7 @@
   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 {
@@ -394,7 +394,7 @@
   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); }
@@ -518,7 +518,7 @@
   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 {
@@ -536,7 +536,7 @@
 .lead-card.is-overdue { border-left: 3px solid var(--danger-500); }
 .lead-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
 .lead-card-name { 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); }
 .lead-card-meta { display: flex; align-items: center; justify-content: space-between; font-size: var(--fs-xs); color: var(--ink-400); }
 .lead-card-meta .icons { display: inline-flex; gap: 6px; color: var(--ink-300); }
@@ -548,7 +548,7 @@
 }
 .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;
 }
 
 /* ---------- EMPTY STATE ---------- */
@@ -620,8 +620,8 @@
 }
 .zk-sidebar-link:hover { background: var(--ink-50); color: var(--ink-700); }
 .zk-sidebar-link.active {
-  color: var(--ember-700);
-  background: var(--ember-50);
+  color: var(--brand-700);
+  background: var(--brand-50);
   font-weight: 500;
 }
 
@@ -686,7 +686,7 @@
   text-align: center;
   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);
@@ -695,7 +695,7 @@
   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);

package/templates/jsx/icons.jsx

@@ -1,8 +1,8 @@
-// ZARK Icon Set — outline · stroke 1.5px · viewBox 18×18 · currentColor
+// Brand Icon Set — outline · stroke 1.5px · viewBox 18×18 · currentColor
 // Usage:
 //   import { Icons } from './icons';
 //   <Icons.Search size={16}/>
-//   <Icons.Bell size={20} style={{ color: 'var(--ember-500)' }}/>
+//   <Icons.Bell size={20} style={{ color: 'var(--brand-500)' }}/>
 
 import React from 'react';
 

package/templates/jsx/index.js

@@ -1,31 +1,31 @@
-// ZARK Design System — barrel export
+// Design System — barrel export
 // Importe componentes individuais ou o objeto inteiro:
-//   import { Button, TagDot, StatCard } from '@zark/design-system-apps/jsx';
+// import { Button, TagDot, StatCard } from '@zark/design-system-apps/jsx';
 
-export { Button }                       from './components/Button.jsx';
-export { Input, UrlInputFull }          from './components/Input.jsx';
-export { Tag }                          from './components/Tag.jsx';
-export { TagDot }                       from './components/TagDot.jsx';
-export { Badge }                        from './components/Badge.jsx';
-export { Toggle }                       from './components/Toggle.jsx';
-export { Segmented }                    from './components/Segmented.jsx';
-export { Chips }                        from './components/Chip.jsx';
-export { StatCard }                     from './components/StatCard.jsx';
-export { AlertCritical }                from './components/AlertCritical.jsx';
-export { Funnel, ProgressBar }          from './components/Funnel.jsx';
-export { EmptyState }                   from './components/EmptyState.jsx';
-export { KanbanColumn, KanbanBoard }    from './components/KanbanColumn.jsx';
-export { LeadCard }                     from './components/LeadCard.jsx';
-export { TableActions }                 from './components/TableActions.jsx';
+export { Button } from './components/Button.jsx';
+export { Input, UrlInputFull } from './components/Input.jsx';
+export { Tag } from './components/Tag.jsx';
+export { TagDot } from './components/TagDot.jsx';
+export { Badge } from './components/Badge.jsx';
+export { Toggle } from './components/Toggle.jsx';
+export { Segmented } from './components/Segmented.jsx';
+export { Chips } from './components/Chip.jsx';
+export { StatCard } from './components/StatCard.jsx';
+export { AlertCritical } from './components/AlertCritical.jsx';
+export { Funnel, ProgressBar } from './components/Funnel.jsx';
+export { EmptyState } from './components/EmptyState.jsx';
+export { KanbanColumn, KanbanBoard } from './components/KanbanColumn.jsx';
+export { LeadCard } from './components/LeadCard.jsx';
+export { TableActions } from './components/TableActions.jsx';
 export { Sidebar, SidebarLink, SidebarSection } from './components/Sidebar.jsx';
-export { Panel }                        from './components/Panel.jsx';
-export { Section }                      from './components/Section.jsx';
-export { Modal }                        from './components/Modal.jsx';
-export { Toast }                        from './components/Toast.jsx';
-export { Announce, Tip }                from './components/Banner.jsx';
-export { CodeBlock }                    from './components/CodeBlock.jsx';
-export { Avatar, AvatarSpace }          from './components/Avatar.jsx';
-export { Kbd }                          from './components/Kbd.jsx';
-export { Spec }                         from './components/Spec.jsx';
+export { Panel } from './components/Panel.jsx';
+export { Section } from './components/Section.jsx';
+export { Modal } from './components/Modal.jsx';
+export { Toast } from './components/Toast.jsx';
+export { Announce, Tip } from './components/Banner.jsx';
+export { CodeBlock } from './components/CodeBlock.jsx';
+export { Avatar, AvatarSpace } from './components/Avatar.jsx';
+export { Kbd } from './components/Kbd.jsx';
+export { Spec } from './components/Spec.jsx';
 
-export { Icons }                        from './icons.jsx';
+export { Icons } from './icons.jsx';

package/templates/presets/zark/preset.json

@@ -0,0 +1,26 @@
+{
+  "name": "ZARK",
+  "slug": "zark",
+  "preset": "zark",
+  "brand": {
+    "50":  "#fff3e9",
+    "100": "#ffe1c8",
+    "200": "#ffc28e",
+    "300": "#ffa056",
+    "400": "#ff8a3a",
+    "500": "#f56f10",
+    "600": "#d45e0d",
+    "700": "#ad4a09",
+    "800": "#843706",
+    "900": "#5e2704",
+    "ring":         "rgba(255, 93, 31, 0.20)",
+    "ringSoft":     "rgba(255, 93, 31, 0.12)",
+    "ringDark":     "rgba(255, 138, 58, 0.30)",
+    "ringSoftDark": "rgba(255, 138, 58, 0.16)"
+  },
+  "fonts": {
+    "ui":      "Inter",
+    "mono":    "JetBrains Mono",
+    "display": "Space Grotesk"
+  }
+}

package/templates/html/tokens.css

@@ -1,283 +0,0 @@
-/* ============================================================
-   ZARK DESIGN SYSTEM — TOKENS
-   v3 · Sistemas/Apps · 2026
-   Importe este arquivo no entry-point do projeto antes de
-   components.css.
-   ============================================================ */
-
-:root {
-  /* ---------- BRAND / EMBER (Liquid Lava scale) ---------- */
-  --ember-50:  #fff3e9;
-  --ember-100: #ffe1c8;
-  --ember-200: #ffc28e;
-  --ember-300: #ffa056;
-  --ember-400: #ff8a3a;
-  --ember-500: #f56f10;   /* LIQUID LAVA — brand primary */
-  --ember-600: #d45e0d;
-  --ember-700: #ad4a09;
-  --ember-800: #843706;
-  --ember-900: #5e2704;
-  --liquid-lava: #f56f10;
-  --dark-void:   #151419;
-  --glucon-grey: #1b1a1e;
-
-  /* ---------- NEUTRALS (warm paper → ink) ---------- */
-  --paper:     #fafaf8;
-  --canvas:    #f5f4f1;
-  --surface:   #ffffff;
-  --line-100:  #f0eeea;
-  --line-200:  #e8e6e1;
-  --line-300:  #d8d5cf;
-
-  --ink-50:    #f4f3f0;
-  --ink-100:   #e8e6e1;
-  --ink-200:   #c8c5bf;
-  --ink-300:   #a09c95;
-  --ink-400:   #6f6b64;
-  --ink-500:   #4a4741;
-  --ink-600:   #2e2c28;
-  --ink-700:   #1a1916;
-  --ink-800:   #111110;
-  --ink-900:   #0a0a09;
-
-  /* ---------- SEMANTIC ---------- */
-  --success-50:  #ecfdf3;
-  --success-500: #10a960;
-  --success-700: #067a44;
-
-  --warning-50:  #fff8e6;
-  --warning-500: #d99000;
-  --warning-700: #9a6500;
-
-  --danger-50:   #fef1f1;
-  --danger-500:  #dc3545;
-  --danger-700:  #a52833;
-
-  --info-50:     #eef5ff;
-  --info-500:    #2f7adc;
-  --info-700:    #1f5ba8;
-
-  --tag-bg:    #fff0e0;
-  --tag-fg:    #ad4a09;
-  --code-bg:   #fff5ea;
-  --code-fg:   #ad4a09;
-
-  /* ---------- SPACE / CLIENTE COLORS (CRM) ---------- */
-  --space-zark:        #f56f10;
-  --space-zark-soft:   #fff3e9;
-  --space-allsec:      #c2410c;
-  --space-allsec-soft: #fff3e9;
-  --space-vipcar:      #ea580c;
-  --space-vipcar-soft: #fff3e9;
-  --space-limppe:      #f59e0b;
-  --space-limppe-soft: #fff8e6;
-  --space-gerais:      #1f2937;
-  --space-gerais-soft: #f4f3f0;
-  --space-mixshop:     #b91c1c;
-  --space-mixshop-soft:#fef1f1;
-  --space-vipseg:      #991b1b;
-  --space-vipseg-soft: #fef1f1;
-
-  /* ---------- TYPOGRAPHY ----------
-     Inter        → UI texto + NÚMEROS (KPIs, valores, contadores)
-     JetBrains    → Código, labels técnicos, kbd
-     Space Grotesk→ TÍTULOS (h1, h2, h3, modal titles, header bands)
-  */
-  --font-sans:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
-  --font-mono:    "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
-  --font-display: "Space Grotesk", "Inter Tight", "Inter", sans-serif;
-  --font-ui:      "Inter", -apple-system, sans-serif;
-
-  /* type scale (px) */
-  --fs-2xs: 10px;
-  --fs-xs:  11px;
-  --fs-sm:  12px;
-  --fs-md:  13px;
-  --fs-base:14px;
-  --fs-lg:  16px;
-  --fs-xl:  18px;
-  --fs-2xl: 22px;
-  --fs-3xl: 28px;
-  --fs-4xl: 36px;
-  --fs-5xl: 48px;
-  --fs-6xl: 64px;
-  --fs-display: 88px;
-
-  /* line-heights */
-  --lh-tight: 1.1;
-  --lh-snug:  1.25;
-  --lh-base:  1.45;
-  --lh-loose: 1.6;
-
-  /* letter spacing */
-  --ls-tight:  -0.02em;
-  --ls-snug:   -0.01em;
-  --ls-normal:  0;
-  --ls-wide:    0.04em;
-  --ls-wider:   0.08em;
-  --ls-widest:  0.14em;
-
-  /* weights */
-  --fw-regular: 400;
-  --fw-medium:  500;
-  --fw-semibold:600;
-  --fw-bold:    700;
-
-  /* ---------- SPACING (4px base) ---------- */
-  --sp-0:  0;
-  --sp-1:  2px;
-  --sp-2:  4px;
-  --sp-3:  6px;
-  --sp-4:  8px;
-  --sp-5:  10px;
-  --sp-6:  12px;
-  --sp-7:  14px;
-  --sp-8:  16px;
-  --sp-10: 20px;
-  --sp-12: 24px;
-  --sp-14: 28px;
-  --sp-16: 32px;
-  --sp-20: 40px;
-  --sp-24: 48px;
-  --sp-32: 64px;
-  --sp-40: 80px;
-  --sp-48: 96px;
-
-  /* ---------- RADII (sem pill) ---------- */
-  --r-xs:  3px;
-  --r-sm:  4px;
-  --r-md:  6px;
-  --r-lg:  8px;
-  --r-xl:  12px;
-  --r-2xl: 16px;
-  --r-3xl: 20px;
-
-  /* ---------- SHADOWS (warm-black, never cool-black) ---------- */
-  --shadow-xs:  0 1px 0 rgba(20, 17, 12, 0.04);
-  --shadow-sm:  0 1px 2px rgba(20, 17, 12, 0.05), 0 0 0 1px rgba(20, 17, 12, 0.04);
-  --shadow-md:  0 4px 12px rgba(20, 17, 12, 0.06), 0 1px 2px rgba(20, 17, 12, 0.05);
-  --shadow-lg:  0 12px 32px rgba(20, 17, 12, 0.08), 0 2px 6px rgba(20, 17, 12, 0.04);
-  --shadow-xl:  0 24px 64px rgba(20, 17, 12, 0.12), 0 4px 12px rgba(20, 17, 12, 0.05);
-  --shadow-modal: 0 32px 96px rgba(20, 17, 12, 0.18), 0 8px 24px rgba(20, 17, 12, 0.08);
-  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.08);
-
-  --ring-focus:      0 0 0 3px rgba(255, 93, 31, 0.20);
-  --ring-focus-soft: 0 0 0 3px rgba(255, 93, 31, 0.12);
-
-  /* ---------- MOTION ---------- */
-  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
-  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
-  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
-  --t-fast:    120ms;
-  --t-base:    180ms;
-  --t-slow:    280ms;
-  --t-slower:  420ms;
-
-  /* ---------- LAYOUT ---------- */
-  --sidebar-w:  240px;
-  --topbar-h:   56px;
-  --container-max: 1280px;
-}
-
-/* ============================================================
-   DARK THEME
-   ============================================================ */
-[data-theme="dark"] {
-  --ember-50:  #2a1810;
-  --ember-100: #3d2114;
-  --ember-200: #5e2704;
-  --ember-300: #843706;
-  --ember-400: #ad4a09;
-  --ember-500: #f56f10;   /* brand inalterado */
-  --ember-600: #ff8a3a;
-  --ember-700: #ffa056;
-  --ember-800: #ffc28e;
-  --ember-900: #ffe1c8;
-
-  --paper:     #0e0d11;
-  --canvas:    #151419;
-  --surface:   #1b1a1e;
-  --line-100:  #232227;
-  --line-200:  #2c2b32;
-  --line-300:  #3a383f;
-
-  --ink-50:    #1a1916;
-  --ink-100:   #2c2b27;
-  --ink-200:   #4a4741;
-  --ink-300:   #6f6b64;
-  --ink-400:   #a09c95;
-  --ink-500:   #c8c5bf;
-  --ink-600:   #e0ddd6;
-  --ink-700:   #f0ede5;
-  --ink-800:   #f7f5ef;
-  --ink-900:   #fafaf8;
-
-  --success-50: #0f2419;
-  --warning-50: #2a1f08;
-  --danger-50:  #2a1010;
-  --info-50:    #0e1a2c;
-
-  --tag-bg:  #3d2114;
-  --tag-fg:  #ffc28e;
-  --code-bg: #2a1810;
-  --code-fg: #ffa056;
-
-  --shadow-xs:  0 1px 0 rgba(0, 0, 0, 0.5);
-  --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.04);
-  --shadow-md:  0 4px 12px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
-  --shadow-lg:  0 12px 32px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.3);
-  --shadow-xl:  0 24px 64px rgba(0, 0, 0, 0.6), 0 4px 12px rgba(0, 0, 0, 0.3);
-  --shadow-modal: 0 32px 96px rgba(0, 0, 0, 0.7), 0 8px 24px rgba(0, 0, 0, 0.4);
-  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.04);
-
-  --ring-focus:      0 0 0 3px rgba(255, 138, 58, 0.30);
-  --ring-focus-soft: 0 0 0 3px rgba(255, 138, 58, 0.16);
-}
-
-/* Auto dark via OS, opt-out: <html data-theme="light"> */
-@media (prefers-color-scheme: dark) {
-  :root:not([data-theme="light"]) {
-    --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;
-    --paper:     #0e0d11;  --canvas:    #151419;  --surface:   #1b1a1e;
-    --line-100:  #232227;  --line-200:  #2c2b32;  --line-300:  #3a383f;
-    --ink-50:    #1a1916;  --ink-100:   #2c2b27;  --ink-200:   #4a4741;
-    --ink-300:   #6f6b64;  --ink-400:   #a09c95;  --ink-500:   #c8c5bf;
-    --ink-600:   #e0ddd6;  --ink-700:   #f0ede5;  --ink-800:   #f7f5ef;
-    --ink-900:   #fafaf8;
-    --success-50: #0f2419; --warning-50: #2a1f08; --danger-50:  #2a1010; --info-50: #0e1a2c;
-    --tag-bg: #3d2114; --tag-fg: #ffc28e; --code-bg: #2a1810; --code-fg: #ffa056;
-    --shadow-xs:  0 1px 0 rgba(0, 0, 0, 0.5);
-    --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.04);
-    --shadow-md:  0 4px 12px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
-    --shadow-lg:  0 12px 32px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.3);
-    --shadow-xl:  0 24px 64px rgba(0, 0, 0, 0.6), 0 4px 12px rgba(0, 0, 0, 0.3);
-    --shadow-modal: 0 32px 96px rgba(0, 0, 0, 0.7), 0 8px 24px rgba(0, 0, 0, 0.4);
-    --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.04);
-    --ring-focus:      0 0 0 3px rgba(255, 138, 58, 0.30);
-    --ring-focus-soft: 0 0 0 3px rgba(255, 138, 58, 0.16);
-  }
-}
-
-/* ============================================================
-   BASE
-   ============================================================ */
-* { box-sizing: border-box; }
-html, body {
-  margin: 0; padding: 0;
-  font-family: var(--font-sans);
-  font-size: var(--fs-base);
-  line-height: var(--lh-base);
-  color: var(--ink-700);
-  background: var(--paper);
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-}
-::selection { background: var(--ember-200); color: var(--ink-700); }
-a { color: inherit; text-decoration: none; }
-button { font-family: inherit; }
-
-@keyframes zk-spin   { to { transform: rotate(360deg); } }
-@keyframes zk-fadein { from { opacity: 0; transform: translateY(4px);} to { opacity: 1; transform: translateY(0);} }