zark-design 1.0.0

package/templates/primitives.jsx

@@ -0,0 +1,306 @@
+// Zark — Primitives: Button, Input, Toggle, Tag, Badge, Tabs, Card, etc.
+
+const Section = ({ id, eyebrow, title, description, children, columns }) => (
+  <section id={id} style={{
+    borderTop:'1px solid var(--line-200)',
+    padding:'72px 64px 80px',
+  }}>
+    <div style={{ maxWidth:1200, margin:'0 auto' }}>
+      <header style={{
+        display:'grid',
+        gridTemplateColumns:'minmax(220px, 280px) 1fr',
+        gap: 64,
+        marginBottom: 48,
+        alignItems:'start',
+      }}>
+        <div>
+          <div style={{
+            fontFamily:'var(--font-mono)', fontSize: 11,
+            letterSpacing:'var(--ls-widest)', textTransform:'uppercase',
+            color:'var(--ember-600)', marginBottom: 12,
+          }}>{eyebrow}</div>
+          <h2 style={{
+            fontFamily:'var(--font-display)',
+            fontSize: 'var(--fs-3xl)', lineHeight:'var(--lh-tight)',
+            letterSpacing:'var(--ls-tight)', margin: 0,
+            color:'var(--ink-700)',
+          }}>{title}</h2>
+        </div>
+        <p style={{
+          margin:0, color:'var(--ink-400)', fontSize:'var(--fs-lg)',
+          lineHeight: 1.55, maxWidth: 640,
+        }}>{description}</p>
+      </header>
+      <div style={{
+        display:'grid',
+        gridTemplateColumns: columns || '1fr',
+        gap: 24,
+      }}>
+        {children}
+      </div>
+    </div>
+  </section>
+);
+
+const Panel = ({ title, kicker, children, padded = true, style }) => (
+  <div style={{
+    background:'var(--surface)',
+    border:'1px solid var(--line-200)',
+    borderRadius:'var(--r-xl)',
+    overflow:'hidden',
+    ...style,
+  }}>
+    {(title || kicker) && (
+      <div style={{
+        padding:'14px 18px',
+        borderBottom:'1px solid var(--line-100)',
+        display:'flex', alignItems:'center', justifyContent:'space-between',
+        background:'var(--paper)',
+      }}>
+        <div style={{ fontSize: 13, fontWeight: 600, color:'var(--ink-600)' }}>{title}</div>
+        {kicker && <div style={{
+          fontFamily:'var(--font-mono)', fontSize: 10,
+          letterSpacing:'var(--ls-wider)', textTransform:'uppercase',
+          color:'var(--ink-300)',
+        }}>{kicker}</div>}
+      </div>
+    )}
+    <div style={{ padding: padded ? 24 : 0 }}>{children}</div>
+  </div>
+);
+
+const Spec = ({ label, value, mono }) => (
+  <div style={{ display:'flex', justifyContent:'space-between', gap:16, padding:'8px 0', borderBottom:'1px dashed var(--line-200)', fontSize: 12 }}>
+    <span style={{ color:'var(--ink-400)' }}>{label}</span>
+    <span style={{ color:'var(--ink-600)', fontFamily: mono ? 'var(--font-mono)' : 'inherit' }}>{value}</span>
+  </div>
+);
+
+// ---------- BUTTON ----------
+const buttonVariants = {
+  primary: {
+    bg:'var(--ember-600)', fg:'#fff', border:'transparent',
+    bgHover:'var(--ember-700)',
+  },
+  secondary: {
+    bg:'var(--surface)', fg:'var(--ink-700)', border:'var(--line-300)',
+    bgHover:'var(--paper)',
+  },
+  ghost: {
+    bg:'transparent', fg:'var(--ink-600)', border:'transparent',
+    bgHover:'var(--ink-50)',
+  },
+  soft: {
+    bg:'var(--ember-50)', fg:'var(--ember-700)', border:'transparent',
+    bgHover:'var(--ember-100)',
+  },
+  danger: {
+    bg:'var(--surface)', fg:'var(--danger-700)', border:'var(--line-300)',
+    bgHover:'var(--danger-50)',
+  },
+};
+const buttonSizes = {
+  xs: { h: 22, px: 8,  fs: 11, gap: 4, r: 'var(--r-sm)' },
+  sm: { h: 28, px: 10, fs: 12, gap: 6, r: 'var(--r-md)' },
+  md: { h: 32, px: 12, fs: 13, gap: 6, r: 'var(--r-md)' },
+  lg: { h: 40, px: 16, fs: 14, gap: 8, r: 'var(--r-lg)' },
+};
+const Button = ({ variant='secondary', size='md', icon, iconRight, children, full, ...rest }) => {
+  const v = buttonVariants[variant];
+  const s = buttonSizes[size];
+  const [hover, setHover] = React.useState(false);
+  return (
+    <button
+      onMouseEnter={()=>setHover(true)}
+      onMouseLeave={()=>setHover(false)}
+      style={{
+        display:'inline-flex', alignItems:'center', justifyContent:'center',
+        gap: s.gap,
+        height: s.h,
+        padding: `0 ${s.px}px`,
+        fontSize: s.fs, fontWeight: 500,
+        fontFamily:'var(--font-sans)',
+        color: v.fg,
+        background: hover ? v.bgHover : v.bg,
+        border: `1px solid ${v.border === 'transparent' ? 'transparent' : v.border}`,
+        borderRadius: s.r,
+        cursor:'pointer',
+        whiteSpace:'nowrap',
+        transition:'background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out)',
+        boxShadow: variant==='primary' ? 'inset 0 1px 0 rgba(255,255,255,0.18), 0 1px 2px rgba(168, 53, 8, 0.18)' :
+                   variant==='secondary' ? 'var(--shadow-xs)' : 'none',
+        width: full ? '100%' : 'auto',
+      }}
+      {...rest}
+    >
+      {icon}
+      {children}
+      {iconRight}
+    </button>
+  );
+};
+
+// ---------- INPUT ----------
+const Input = ({ icon, suffix, value, onChange, placeholder, mono, size='md', invalid, ...rest }) => {
+  const sizes = { sm:{h:28,fs:12,px:8}, md:{h:36,fs:13,px:12}, lg:{h:44,fs:14,px:14} };
+  const s = sizes[size];
+  return (
+    <label style={{
+      display:'inline-flex', alignItems:'center', gap: 6,
+      height: s.h,
+      padding: `0 ${s.px}px`,
+      background:'var(--surface)',
+      border:`1px solid ${invalid ? 'var(--danger-500)' : 'var(--line-300)'}`,
+      borderRadius:'var(--r-lg)',
+      width:'100%',
+      transition:'box-shadow var(--t-fast), border-color var(--t-fast)',
+    }}
+    onFocus={e=>e.currentTarget.style.boxShadow='var(--ring-focus)'}
+    onBlur={e=>e.currentTarget.style.boxShadow='none'}
+    >
+      {icon && <span style={{ color:'var(--ink-300)', display:'inline-flex' }}>{icon}</span>}
+      <input
+        value={value} onChange={onChange} placeholder={placeholder}
+        style={{
+          flex:1, border:'none', outline:'none', background:'transparent',
+          fontSize: s.fs, color:'var(--ink-700)',
+          fontFamily: mono ? 'var(--font-mono)' : 'var(--font-sans)',
+          minWidth: 0,
+        }}
+        {...rest}
+      />
+      {suffix && <span style={{ color:'var(--ink-300)' }}>{suffix}</span>}
+    </label>
+  );
+};
+
+// ---------- TAG / BADGE ----------
+const Tag = ({ tone = 'default', size='sm', children, square }) => {
+  const tones = {
+    default:{ bg:'var(--ink-50)',     fg:'var(--ink-500)' },
+    ember:  { bg:'var(--ember-50)',   fg:'var(--ember-700)' },
+    mono:   { bg:'var(--tag-bg)',     fg:'var(--tag-fg)' },
+    success:{ bg:'var(--success-50)', fg:'var(--success-700)' },
+    warning:{ bg:'var(--warning-50)', fg:'var(--warning-700)' },
+    danger: { bg:'var(--danger-50)',  fg:'var(--danger-700)' },
+    info:   { bg:'var(--info-50)',    fg:'var(--info-700)' },
+  };
+  const sizes = { xs:{fs:10,h:18,px:6}, sm:{fs:11,h:22,px:8}, md:{fs:12,h:26,px:10} };
+  const t = tones[tone]; const s = sizes[size];
+  return (
+    <span style={{
+      display:'inline-flex', alignItems:'center', gap:4,
+      height: s.h, padding:`0 ${s.px}px`,
+      background:t.bg, color:t.fg,
+      fontSize:s.fs, fontWeight:500,
+      fontFamily:'var(--font-mono)',
+      letterSpacing:'var(--ls-wide)',
+      textTransform:'uppercase',
+      borderRadius: square ? 'var(--r-sm)' : 'var(--r-pill)',
+    }}>{children}</span>
+  );
+};
+
+const Badge = ({ count, tone='ember' }) => (
+  <span style={{
+    display:'inline-flex', alignItems:'center', justifyContent:'center',
+    minWidth:18, height:18, padding:'0 5px',
+    background: tone==='ember' ? 'var(--ember-500)' : 'var(--ink-600)',
+    color:'#fff', fontSize:10, fontWeight:600,
+    borderRadius:'var(--r-pill)',
+  }}>{count}</span>
+);
+
+// ---------- TOGGLE ----------
+const Toggle = ({ on, onChange, size='md' }) => {
+  const sizes = { sm:{w:28,h:16,d:12}, md:{w:36,h:20,d:16}, lg:{w:44,h:24,d:20} };
+  const s = sizes[size];
+  return (
+    <button onClick={()=>onChange?.(!on)} style={{
+      width: s.w, height: s.h, padding: 2,
+      borderRadius:'var(--r-pill)',
+      background: on ? 'var(--ember-500)' : 'var(--ink-100)',
+      border:'none', cursor:'pointer', position:'relative',
+      transition:'background var(--t-base) var(--ease-out)',
+    }}>
+      <span style={{
+        position:'absolute', top:2,
+        left: on ? s.w - s.d - 2 : 2,
+        width: s.d, height: s.d, borderRadius:'50%',
+        background:'#fff',
+        boxShadow:'0 1px 2px rgba(0,0,0,0.18)',
+        transition:'left var(--t-base) var(--ease-out)',
+      }}/>
+    </button>
+  );
+};
+
+// ---------- TABS / SEGMENTED ----------
+const Segmented = ({ items, value, onChange, size='md' }) => {
+  const sizes = { sm:{h:28,fs:12,px:10}, md:{h:34,fs:13,px:12} };
+  const s = sizes[size];
+  return (
+    <div style={{
+      display:'inline-flex', padding:3, gap:2,
+      background:'var(--ink-50)',
+      border:'1px solid var(--line-200)',
+      borderRadius:'var(--r-lg)',
+    }}>
+      {items.map(it => {
+        const active = it.value === value;
+        return (
+          <button key={it.value} onClick={()=>onChange?.(it.value)} style={{
+            display:'inline-flex', alignItems:'center', gap:6,
+            height: s.h, padding:`0 ${s.px}px`,
+            fontSize: s.fs, fontWeight: active ? 600 : 500,
+            color: active ? 'var(--ink-700)' : 'var(--ink-400)',
+            background: active ? 'var(--surface)' : 'transparent',
+            border:'none', cursor:'pointer',
+            borderRadius:'var(--r-md)',
+            boxShadow: active ? 'var(--shadow-xs), 0 0 0 1px var(--line-200)' : 'none',
+            transition:'all var(--t-fast)',
+          }}>{it.icon}{it.label}{it.tag && <Tag tone="mono" size="xs">{it.tag}</Tag>}</button>
+        );
+      })}
+    </div>
+  );
+};
+
+// ---------- AVATAR ----------
+const Avatar = ({ name, size = 24, color = 'var(--ember-500)', square }) => (
+  <span style={{
+    width: size, height: size,
+    background: color, color:'#fff',
+    borderRadius: square ? 'var(--r-sm)' : '50%',
+    display:'inline-flex', alignItems:'center', justifyContent:'center',
+    fontSize: size * 0.42, fontWeight: 600,
+    fontFamily:'var(--font-display)',
+    flexShrink: 0,
+  }}>{(name || '?').charAt(0).toUpperCase()}</span>
+);
+
+// ---------- KBD ----------
+const Kbd = ({ children }) => (
+  <span style={{
+    display:'inline-flex', alignItems:'center', justifyContent:'center',
+    minWidth: 18, height: 18, padding:'0 4px',
+    fontFamily:'var(--font-mono)', fontSize: 10,
+    color:'var(--ink-400)',
+    background:'var(--surface)',
+    border:'1px solid var(--line-200)',
+    borderBottomWidth: 2,
+    borderRadius:'var(--r-sm)',
+  }}>{children}</span>
+);
+
+window.Section = Section;
+window.Panel = Panel;
+window.Spec = Spec;
+window.Button = Button;
+window.Input = Input;
+window.Tag = Tag;
+window.Badge = Badge;
+window.Toggle = Toggle;
+window.Segmented = Segmented;
+window.Avatar = Avatar;
+window.Kbd = Kbd;

package/templates/tokens.css

@@ -0,0 +1,306 @@
+/* ============================================================
+   ZARK DESIGN SYSTEM — TOKENS
+   Light, warm, neutral system inspired by ember/orange-on-paper
+   ============================================================ */
+
+:root {
+  /* ---------- BRAND / ACCENT (Zark Liquid Lava scale) ---------- */
+  /* Anchored on official Zark brand color #F56F10 (Liquid Lava) */
+  --ember-50:  #fff3e9;
+  --ember-100: #ffe1c8;
+  --ember-200: #ffc28e;
+  --ember-300: #ffa056;
+  --ember-400: #ff8a3a;   /* liquid-lava-light */
+  --ember-500: #f56f10;   /* LIQUID LAVA — brand primary */
+  --ember-600: #d45e0d;   /* liquid-lava-dark — primary action */
+  --ember-700: #ad4a09;
+  --ember-800: #843706;
+  --ember-900: #5e2704;
+  --liquid-lava: #f56f10;
+  --dark-void:   #151419;
+  --glucon-grey: #1b1a1e;
+
+  /* ---------- NEUTRALS (warm paper → ink) ---------- */
+  --paper:     #fafaf8;   /* app bg */
+  --canvas:    #f5f4f1;   /* sidebar bg */
+  --surface:   #ffffff;   /* card bg */
+  --line-100:  #f0eeea;   /* hairlines on tinted bg */
+  --line-200:  #e8e6e1;   /* default borders */
+  --line-300:  #d8d5cf;   /* stronger dividers */
+
+  --ink-50:    #f4f3f0;
+  --ink-100:   #e8e6e1;
+  --ink-200:   #c8c5bf;
+  --ink-300:   #a09c95;
+  --ink-400:   #6f6b64;
+  --ink-500:   #4a4741;
+  --ink-600:   #2e2c28;
+  --ink-700:   #1a1916;   /* near black */
+  --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/code accents */
+  --tag-bg:    #fff0e0;
+  --tag-fg:    #ad4a09;
+  --code-bg:   #fff5ea;
+  --code-fg:   #ad4a09;
+
+  /* ---------- TYPOGRAPHY ---------- */
+  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
+  --font-mono: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
+  /* Darker Grotesque for the brand-flavored display moments (ZARK wordmark vibe).
+     Use it sparingly in SaaS — section heroes, hero numbers, marketing surfaces.
+     UI text stays on Inter. */
+  --font-display: "Darker Grotesque", "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 ---------- */
+  --r-xs:  3px;
+  --r-sm:  4px;
+  --r-md:  6px;
+  --r-lg:  8px;
+  --r-xl:  12px;
+  --r-2xl: 16px;
+  --r-3xl: 20px;
+  --r-pill: 999px;
+
+  /* ---------- SHADOWS ---------- */
+  --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;
+}
+
+/* ============================================================
+   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; }
+button { font-family: inherit; }
+
+/* ============================================================
+   DARK THEME — opt-in via [data-theme="dark"] OR auto via prefers-color-scheme
+   ============================================================
+   Filosofia: o brand (liquid-lava/ember) MANTÉM os mesmos valores —
+   é a assinatura visual ZARK. O que muda são neutros, semânticos
+   suaves, sombras e ring-focus pra contraste correto.
+   ============================================================ */
+
+[data-theme="dark"] {
+  /* Brand: liquid-lava preservado, mas os tons claros viram acentos */
+  --ember-50:  #2a1810;
+  --ember-100: #3d2114;
+  --ember-200: #5e2704;   /* invertido com 900 */
+  --ember-300: #843706;
+  --ember-400: #ad4a09;
+  --ember-500: #f56f10;   /* LIQUID LAVA — inalterado, brand é brand */
+  --ember-600: #ff8a3a;   /* mais claro = mais hover/active no dark */
+  --ember-700: #ffa056;
+  --ember-800: #ffc28e;
+  --ember-900: #ffe1c8;
+
+  /* Neutros: paper/canvas/surface vão pra escala dark-void */
+  --paper:     #0e0d11;   /* app bg — mais escuro que dark-void puro */
+  --canvas:    #151419;   /* dark-void — sidebar bg */
+  --surface:   #1b1a1e;   /* glucon-grey — card bg */
+  --line-100:  #232227;   /* hairlines */
+  --line-200:  #2c2b32;   /* default borders */
+  --line-300:  #3a383f;   /* stronger dividers */
+
+  /* Ink invertido: agora é warm-white sobre dark, não warm-black sobre paper */
+  --ink-50:    #1a1916;
+  --ink-100:   #2c2b27;
+  --ink-200:   #4a4741;
+  --ink-300:   #6f6b64;
+  --ink-400:   #a09c95;
+  --ink-500:   #c8c5bf;
+  --ink-600:   #e0ddd6;
+  --ink-700:   #f0ede5;   /* near-white com warm tone */
+  --ink-800:   #f7f5ef;
+  --ink-900:   #fafaf8;
+
+  /* Semânticos suaves (50) ficam mais escuros pra fundo no dark */
+  --success-50: #0f2419;
+  --warning-50: #2a1f08;
+  --danger-50:  #2a1010;
+  --info-50:    #0e1a2c;
+
+  /* Tag/code mantêm legibilidade no dark */
+  --tag-bg:     #3d2114;
+  --tag-fg:     #ffc28e;
+  --code-bg:    #2a1810;
+  --code-fg:    #ffa056;
+
+  /* Sombras dark — invertidas: borda + glow leve em vez de drop-shadow grosso */
+  --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);
+}
+
+/* Dark mode automático 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);
+  }
+}