/* CMNP: brand primitives → semantic roles → existing component aliases.
   Only #1B4C38 comes from the supplied logo. Other values are UI proposals. */
:root {
  --brand-primary: #1b4c38;
  --brand-primary-hover: #143c2c;
  --brand-primary-soft: #e0e8da;
  --brand-on-primary: #ffffff;
  --brand-clear-space: 16px;
  --brand-logo-min: 224px;
  --color-action: var(--brand-primary);
  --color-action-hover: var(--brand-primary-hover);
  --color-focus: var(--brand-primary);
  --color-selected-bg: var(--brand-primary-soft);
  --color-text: #25382d;
  --color-success: #256448;
  --color-danger: #a3342b;
  --color-warning: #74541d;
  --primary: var(--color-action);
  --text: var(--color-text);
  --success: var(--color-success);
  --danger: var(--color-danger);
  --shadow: 4px 5px 12px #d9d3c580, -4px -4px 12px #fffdf7;
  --inset: inset 2px 2px 5px #ded8ca99, inset -2px -2px 5px #fffdf8;
}
.brand-logo{display:block;width:var(--brand-logo-min);max-width:100%;flex-shrink:0;line-height:0}
.brand-logo img{display:block;width:100%;height:auto;object-fit:contain}
.brand-logo--plate{padding:var(--brand-clear-space);background:var(--surface);width:272px;border-radius:12px}
.sidebar{overflow-y:auto;width:280px;padding:24px 12px 20px}
.workspace{margin-left:280px}
.brand{display:flex;justify-content:center;min-height:132px;padding:var(--brand-clear-space);letter-spacing:normal}
.brand-sub{text-align:center;margin:8px 0 30px;font-size:9px;letter-spacing:1.4px}
.sidebar nav{padding-inline:6px}
.sidebar-note{margin-inline:10px;padding-top:20px;padding-bottom:16px}
.sidebar-bottom{margin-inline:10px}
.hero h1{font-weight:550}
.hero em{font:inherit;color:var(--brand-primary)}
.hero-art{min-width:280px;transform:none}
.hero-copy{width:64%}
.hero-art{width:36%}
.brand-hero{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;width:310px;max-width:100%;min-height:215px;padding:20px;background:var(--surface);border:1px solid #dadfce;border-radius:20px;box-shadow:var(--shadow);z-index:1}
.brand-hero .brand-logo{width:270px}
.brand-hero>span{font-size:10px;color:var(--muted);letter-spacing:.3px}
.hero-art .orbit{width:320px;height:320px;opacity:.65}
.hero-art .orbit-two{width:270px;height:270px}
.hero-art .floating,.hero-art .art-dot{display:none}
.brand-showcase{display:flex;align-items:center;gap:60px;padding:30px 16px;flex-wrap:wrap}
.brand-showcase>.brand-logo{width:330px}
.brand-showcase h2{margin:10px 0}
.brand-showcase p{font-size:14px;margin-bottom:12px}
.brand-surface{min-height:218px;display:flex;justify-content:center;align-items:center;background:#fffdf8;border:1px solid #d7dacd;border-radius:12px;padding:var(--brand-clear-space)}
.brand-surface--dark{background:var(--brand-primary);border-color:var(--brand-primary)}
.brand-guidance{font-size:14px;margin:16px 0;line-height:1.7}
.brand-header{display:flex;align-items:center;gap:32px;padding:var(--brand-clear-space);background:var(--surface)}
.brand-product{border-left:1px solid var(--border);padding-left:26px;min-width:0}
.brand-product span{font-size:9px;letter-spacing:1px;display:block;color:var(--muted)}
.brand-product strong{font-size:22px;font-weight:550;display:block;margin-top:5px;overflow-wrap:anywhere}
.app-shell-preview{border:1px solid var(--border);border-radius:14px;overflow:hidden}
.brand-demo-nav{display:flex;gap:20px;border-top:1px solid #dadfce;padding:8px 24px;background:var(--surface);flex-wrap:wrap}
.brand-demo-nav a{font-size:13px;min-height:44px;display:flex;align-items:center;border-bottom:2px solid transparent}
.brand-demo-nav [aria-current]{border-color:var(--primary);color:var(--primary);font-weight:600}
.brand-mobile-preview{width:375px;max-width:100%;border:1px solid var(--border);border-radius:20px;overflow:hidden;background:var(--bg)}
.brand-header--compact{flex-direction:column;align-items:flex-start;gap:12px}
.brand-header--compact .brand-product{border-left:0;border-top:1px solid #dadfce;padding:14px 0 0;width:100%}
.brand-mobile-content{padding:24px}
.brand-mobile-content h3{font-size:24px;margin:12px 0}
.brand-mobile-content p{font-size:14px;margin-bottom:20px}
.selected{background:var(--color-selected-bg)!important}
.btn.primary{color:var(--brand-on-primary)}
@media(hover:hover) and (pointer:fine){.btn.primary:not(:disabled):hover{background:var(--color-action-hover);opacity:1}}
@media(max-width:1150px){.hero-art{min-width:240px}.brand-hero{padding:16px}.hero h1{font-size:44px}.hero-copy{width:60%}.hero-art{width:40%}.brand-showcase{gap:25px}}
@media(max-width:900px){.sidebar{width:auto;padding:16px 20px 12px}.workspace{margin-left:0}.brand{justify-content:flex-start;padding:0;min-height:114px}.brand-sub{display:block;text-align:left;margin:8px 0 0}.sidebar nav{padding:0}.hero h1{font-size:46px}.brand-header:not(.brand-header--compact){flex-wrap:wrap}}
@media(max-width:600px){.hero-copy{width:100%}.hero h1{font-size:44px}.hero-art{display:none}.brand-showcase{padding:16px 0}.brand-showcase>.brand-logo{width:280px}.brand-surface{padding:16px 0;min-height:185px}.brand-logo--plate{width:256px}.brand-header{gap:15px}.brand-product{border-left:0;padding:14px 0 0;border-top:1px solid var(--border);width:100%}.brand-mobile-content{padding:20px}.brand-showcase code{overflow-wrap:anywhere}.brand-demo-nav{gap:15px;padding:8px 16px}}
@media(prefers-reduced-motion:reduce){.brand-logo,.brand-logo img{animation:none;transition:none}}