:root {
  --pt-green:        #03B188;
  --pt-green-dark:   #028F6D;
  --pt-appbar:       #333333;
  --pt-cream:        #F4F1EA;
  --pt-rule:         #D6D9DD;
  --pt-muted:        #6E7780;
  --pt-ink:          #0F1416;
  --pt-violet:       #8B5CF6;     /* token meter hue */
  --pt-rose:         #E11D48;     /* admin / restricted */
  --gold:            #D4A843;     /* cycleCAD */
  --teal:            #3AAFA9;     /* ExplodeView */
  --emerald:         #10B981;     /* Pentacad */

  --pt-radius:       4px;
  --pt-radius-lg:    8px;
  --pt-elev-1:       0 1px 2px rgba(0,0,0,0.08);
  --pt-elev-3:       0 2px 4px -1px rgba(0,0,0,0.20),
                     0 4px 5px 0 rgba(0,0,0,0.14),
                     0 1px 10px 0 rgba(0,0,0,0.12);
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: Roboto, Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: var(--pt-ink);
  background: #FFFFFF;
}
.suite-bar {
  height: 48px;
  background: var(--pt-appbar);
  color: white;
  display: flex;
  align-items: center;
  padding: 0 16px;
}