:root{
/* brand */
--op-orange:#FF5E00;
--op-graphite:#1C1D1F;
--op-ink-on-orange:#FFFFFF;
/* ink ramp */
--op-ink:#3A3B3E;
--op-ink-2:#4A4B4E;
--op-steel:#6E7176;
--op-mute:#8A8D91;
/* surfaces + lines */
--op-white:#FFFFFF;
--op-concrete:#F5F5F2;
--op-pill:#F4F4F2;
--op-hair:#EDEDEA;
--op-pill-line:#E4E4E0;
--op-sand:#E8E8E6;
--op-rule:#DCDCD8;
--op-line-strong:#D2D2CE;
/* placeholder stripe pairs */
--op-stripe-mid-a:#DADAD7;--op-stripe-mid-b:#E0E0DD;
--op-stripe-light-a:#E8E8E6;--op-stripe-light-b:#EFEFED;

/* semantic */
--surface-page:var(--op-white);
--surface-muted:var(--op-sand);
--surface-accent:var(--op-orange);
--surface-pill:var(--op-pill);
--surface-pill-hover:var(--op-hair);
--surface-concrete:var(--op-concrete);
--surface-dark:var(--op-graphite);
--text-primary:var(--op-ink);
--text-on-muted:var(--op-ink-2);
--text-body:var(--op-steel);
--text-meta:var(--op-mute);
--text-on-accent:var(--op-ink-on-orange);
--line-on-accent:rgba(255,255,255,.5);
--text-accent:var(--op-orange);
--text-hover:var(--op-orange);
--text-inverse:var(--op-white);
--border-hairline:var(--op-hair);
--border-pill:var(--op-pill-line);
--border-rule:var(--op-rule);
--border-strong:var(--op-line-strong);
--overlay-scrim:rgba(58,59,62,.28);
--shadow-drawer:-24px 0 60px rgba(0,0,0,.08);
}